/* ============================================================
   ENDUROCROSS — DESIGN TOKENS
   "THE GAUNTLET" · dark-first, one committed direction.
   Palette per docs/CREATIVE-BRIEF.md §Palette (oklch, hex noted).
   NOTE: there is deliberately NO slant/skew token in this file.
   EnduroCross display type sits DEAD VERTICAL — obstacles don't
   lean; they stop you. The RED X interrupts type instead.
   ============================================================ */

:root {
  color-scheme: dark;

  /* ---- Ground ------------------------------------------- */
  --ink:        oklch(14.52% 0.0021 286.13);  /* #0A0A0B arena black */
  --ink-raised: oklch(18.87% 0.0038 48.51);   /* #151312 raised surface */
  --ink-edge:   oklch(26% 0.006 60);          /* hairlines on ink */

  /* ---- Dirt (log/dirt browns from the photography) ------- */
  --dirt-deep:  oklch(19.02% 0.0189 62.50);   /* #1A120B */
  --dirt-mid:   oklch(30.02% 0.0388 67.04);   /* #3B2A18 */
  --dirt-lit:   oklch(43.77% 0.0663 65.38);   /* #6B4A28 */
  --dirt-ground: oklch(21% 0.02 62);          /* footer ground — one clear step
                                                 above page ink (D-23) */

  /* ---- Identity ------------------------------------------ */
  --x-red:      oklch(60.79% 0.23 27.58);     /* #ED2626 THE X. CTAs. */
  --x-red-deep: oklch(48% 0.19 27.58);        /* pressed/dark red */
  --hivis:      oklch(88.59% 0.1855 120.95);  /* #C8EB49 championship chartreuse:
                                                 live/status, data moments,
                                                 checkers beat, course stakes.
                                                 Never decoration-only. */
  --bone:       oklch(95.91% 0.0074 80.72);   /* #F4F1EC type on dark */
  --bone-70:    oklch(80% 0.008 80);
  --bone-50:    oklch(66% 0.008 75);

  /* ---- Type families (assets/fonts/fonts.css) */
  /* Headline face is Gear Wide Ultra (MCKL, Adobe Fonts kit mul3zyv —
     Trevor 2026-09-03). The kit exposes it as its own family,
     "gear-wide-ultra", single face at weight 900; "gear-wide" (400/700)
     follows for anything lighter, then the self-hosted Saira stack as
     the loading fallback. UPPERCASE, dead vertical either way. */
  --font-display: 'gear-wide-ultra', 'gear-wide', 'Saira Condensed', 'Saira Condensed Fallback', 'Arial Narrow', sans-serif;
  --font-text:    'Saira', system-ui, sans-serif;
  --font-data:    'Archivo Narrow', 'Arial Narrow', sans-serif;  /* labels, dates, telemetry */
  --font-stamp:   'Saira Stencil One', 'Saira Condensed', sans-serif; /* stamps + round numerals only */

  /* ---- Type scale (fluid) -------------------------------- */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --text-h3:   clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  --text-h2:   clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  --text-h1:   clamp(2.75rem, 1.8rem + 4.5vw, 5.5rem);
  --text-mega: clamp(3.5rem, 1.25rem + 10.5vw, 10.5rem);  /* the gauntlet voice */
  --text-data: clamp(0.8125rem, 0.78rem + 0.15vw, 0.9375rem);

  /* ---- Rhythm --------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-section: clamp(4.5rem, 3rem + 6vw, 9.5rem);
  /* D-07 — the closing beat: last content → footer rule, and every
     hero → first section hand-off. One value, every template. */
  --space-section-end: clamp(3rem, 2rem + 3vw, 5rem);
  --gutter: clamp(1.25rem, 0.75rem + 2.5vw, 3.5rem);
  --measure: 62ch;
  --page-max: 90rem;

  /* ---- Edges ---------------------------------------------- */
  --hairline: 1px solid var(--ink-edge);
  --notch: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  --notch-sm: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));

  /* ---- Motion ---------------------------------------------- */
  --duration-fast: 160ms;
  --duration-base: 300ms;
  --duration-slow: 600ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-impact: cubic-bezier(0.7, -0.02, 0.1, 1.04); /* hits hard, lands dead */

  /* ---- Layers ----------------------------------------------- */
  --z-header: 100;
  --z-progress: 110;
  --z-menu: 120;
  --z-wipe: 200;
  --z-consent: 150;
  --z-sticky-cta: 90;
}