/* ═══════════════════════════════════════════════════
   DESIGN TOKENS
   Dark theme only. No light branch, no [data-theme].
   Contrast ratios are measured against --c-bg (#0F0F0F)
   using the WCAG 2.x relative luminance formula.
═══════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  /* ── Surface ── */
  --c-bg:             #0F0F0F;
  --c-bg-2:           #1A1A1A;
  --c-bg-3:           #212121;
  --c-bg-4:           #262626;
  --c-border:         #2D2D2D;
  --c-border-hover:   #3A3A3A;

  /* ── Text ── */
  --c-text-1:         #FFFFFF;   /* headings          19.17:1 */
  --c-text-2:         #E8EAF5;   /* body              15.99:1 */
  --c-text-3:         #A2ABCC;   /* secondary          8.43:1 */
  --c-text-4:         #7B84A8;   /* muted              5.21:1 */

  /* ── Accent.
     Three values because one blue cannot do every job at 4.5:1.
     --c-accent is light enough to read AS text on the dark background but
     too light to sit UNDER white text; --c-accent-strong is the reverse. ── */
  --c-accent:         #3B82F6;   /* accent text on --c-bg        5.21:1 */
  --c-accent-bright:  #5B9BF8;   /* accent text on tinted fills  5.56:1 */
  --c-accent-strong:  #2563EB;   /* fill under white text        5.17:1 */
  --c-accent-hover:   #1D4ED8;   /* hovered fill                 6.70:1 */
  --c-accent-soft:    rgba(59, 130, 246, .10);
  --c-accent-rgb:     59, 130, 246;

  /* ── Success ── */
  --c-success:        #22C55E;   /*                    8.41:1 */
  --c-success-soft:   rgba(34, 197, 94, .10);
  --c-success-rgb:    34, 197, 94;

  /* ── Effects ── */
  --c-shadow-md:      rgba(0, 0, 0, .3);
  --c-shadow-deep:    rgba(0, 0, 0, .6);
  --c-focus-ring:     rgba(59, 130, 246, .12);
  --c-nav-bg:         rgba(26, 26, 26, .94);
  --c-overlay-card:   rgba(15, 15, 15, .75);

  /* ── Typography ── */
  --f-display: 'Archivo', sans-serif;
  --f-body:    'Inter', sans-serif;

  --fs-100: 12px;                       /* eyebrow, meta, chips, badges */
  --fs-200: 14px;                       /* captions, secondary */
  --fs-300: 16px;                       /* body */
  --fs-400: 18px;
  --fs-500: 20px;
  --fs-600: clamp(20px, 2vw, 26px);
  --fs-700: clamp(32px, 3.8vw, 52px);   /* h2 */
  --fs-800: clamp(44px, 6vw, 88px);     /* h1 */

  --lh-tight: 1.1;
  --lh-snug:  1.35;
  --lh-base:  1.65;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;
  --fw-black:     900;

  --ls-tight:  -.03em;
  --ls-normal: 0;
  --ls-wide:   .12em;
  --ls-wider:  .18em;

  /* ── Spacing (4px step) ── */
  --sp-1:  4px;   --sp-2:  8px;   --sp-3:  12px;  --sp-4:  16px;
  --sp-5:  20px;  --sp-6:  24px;  --sp-8:  32px;  --sp-10: 40px;
  --sp-12: 48px;  --sp-16: 64px;  --sp-20: 80px;  --sp-24: 96px;
  --sp-section: clamp(80px, 10vw, 140px);

  /* ── Shape ── */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-pill: 999px;

  /* ── Motion ── */
  --dur-fast: .15s;
  --dur-base: .25s;
  --dur-slow: .7s;
  --ease-out: cubic-bezier(.23, 1, .32, 1);

  /* ── Layout ── */
  --container:     1200px;
  --container-pad: 48px;
  /* Sticky header height. Referenced by the anchor scroll offset and by the
     mobile panel's height budget, so it lives here rather than in three
     separate literals. */
  --nav-h:         68px;
}