/* ══════════════════════════════════════════
   Design Tokens — single source of truth.
   To retheme the site, edit values here only.
   ══════════════════════════════════════════ */
:root {

  /* ── Brand colours ── */
  --teal:      #00C2CB;
  --green:     #00D17E;

  /* Gradient shortcuts */
  --grad:      linear-gradient(90deg,  var(--teal) 0%, var(--green) 100%);
  --grad-diag: linear-gradient(135deg, var(--teal) 0%, var(--green) 100%);

  /* RGB channels — use for rgba() calls: rgba(var(--teal-rgb), 0.15) */
  --teal-rgb:  0, 194, 203;
  --green-rgb: 0, 209, 126;

  /* ── Text colours ── */
  --dark:      #1a1a2e;   /* headings, strong text  */
  --text:      #6b7280;   /* body copy              */
  --text-md:   #374151;   /* medium-emphasis text   */
  --text-nav:  #4a5568;   /* nav link default       */

  /* ── Background colours ── */
  --white:     #ffffff;
  --bg:        #f9fafb;   /* light section bg       */
  --bg-alt:    #f5f7fb;   /* alternate section bg   */

  /* ── Footer colours ── */
  --footer-bg:     #0f172a;
  --footer-text:   #94a3b8;
  --footer-border: #1e293b;
  --footer-social: #1e2d45;
  --footer-muted:  #64748b;
  --footer-head:   #f1f5f9;

  /* ── Border radius ── */
  --radius-pill: 50px;   /* buttons, badges        */
  --radius-card: 20px;   /* cards, panels          */
  --radius-sm:   10px;   /* icon boxes, inputs     */

  /* ── Layout ── */
  --max-w:   1100px;     /* section max-width      */
  --pad-x:   24px;       /* section side padding   */

  /* ── Transitions ── */
  --t:    0.2s;
  --t-md: 0.25s;
}