/* ── TOKENS ──────────────────────────────────────
   Design tokens for the site.

   • Type scale uses T-shirt naming (2xs → 3xl), sized by pixel
     because the display is desktop-dominant and precise-pixel
     control matters. Fluid sizes (--fs-display-*) are used for
     everything that needs to scale between phone and 4K.
   • Colours are grouped by role: text, background, line, accent,
     and semantic (recognition).
   • Existing tokens (--text, --text-mute, --text-dim, --line etc.)
     kept intact — new tokens extend, they don't replace. */
/*
   Breakpoints — CSS @media can't reference custom properties directly,
   so these values live here as documentation only. Every part file
   should use the widths listed below, and only these:

     --bp-narrow      (max-width:  390px)   very small phone
     --bp-phone       (max-width:  640px)   phone / mobile primary
     --bp-tablet      (max-width:  760px)   small tablet portrait
     --bp-desktop     (max-width:  960px)   tablet → desktop pivot
     --bp-wide        (max-width: 1180px)   wide laptop
     --bp-max         (min-width: 1440px)   large monitor

   If you find yourself reaching for a new value, prefer aligning to
   one of the above unless a real design reason forces otherwise. */
:root{
  /* Layout */
  --radius:14px;
  --radius-lg:18px;
  --radius-xl:22px;
  --container:1320px;
  --gutter:clamp(24px,5vw,72px);
  --section-y:clamp(72px,7.5vw,108px);
  --ease:cubic-bezier(.16,1,.3,1);

  /* Type scale — body */
  --fs-2xs:  9px;    /* mono uppercase micro labels */
  --fs-xs:  10px;    /* small mono labels (most common) */
  --fs-sm:  11px;    /* smallest body text, tag pills */
  --fs-base:12px;    /* small body */
  --fs-md:  13px;    /* body medium */
  --fs-lg:  14px;    /* body large — default */
  --fs-xl:  15px;    /* body xl — drawer, quickFacts */
  --fs-2xl: 17px;    /* lead paragraphs */
  --fs-3xl: 22px;    /* card titles */

  /* Type scale — fluid displays (phone → wide monitor) */
  --fs-display-sm: clamp(15px, 1.5vw, 18px);
  --fs-display-md: clamp(24px, 2.5vw, 34px);
  --fs-display-lg: clamp(28px, 3.4vw, 44px);
  --fs-display-xl: clamp(44px, 6vw, 84px);

  /* Colour — text */
  --text-white:   #ffffff;   /* pure white — hero name, key emphasis */
  --text:         #f0f0f5;   /* default body */
  --text-strong:  #f5f5ff;   /* cool near-white — section titles */
  --text-mute:    #8a8aa8;
  --text-dim:     #5a5a78;

  /* Colour — background */
  --bg:      #08080c;        /* deepest — page fill */
  --bg-soft: #0d0d14;        /* slightly lifted */
  --bg-1:    #0a0a14;        /* card variant a */
  --bg-2:    #0c0c12;        /* card variant b */
  --bg-3:    #101018;        /* hover / active */
  --surface:       rgba(255,255,255,.022);
  --surface-hover: rgba(255,255,255,.04);

  /* Colour — line */
  --line:      rgba(255,255,255,.06);
  --line-soft: rgba(255,255,255,.04);

  /* Colour — accent */
  --accent:      #a78bfa;
  --accent-2:    #818cf8;
  --accent-soft: rgba(167,139,250,.12);

  /* Colour — semantic */
  --recognition: #fbbf24;    /* gold — recognition card accent */
}