/* ============================================================
   THROTTLECROSS — design tokens
   Dark-first. One committed direction: race night under
   stadium tungsten. Palette lifted from the poster + logo.
   ============================================================ */

:root {
  /* ---- palette (oklch) ------------------------------------ */
  /* arena blacks (poster roof) */
  --ink:        oklch(13.5% 0.005 300);   /* #0B0A0C-ish */
  --ink-raise:  oklch(17%   0.006 300);   /* raised surface */
  --ink-line:   oklch(28%   0.008 300);   /* hairlines on ink */

  /* poster dirt */
  --dirt-deep:  oklch(17.5% 0.022 55);    /* #1C120C-ish */
  --dirt-mid:   oklch(27%   0.048 55);    /* #3A2417-ish */
  --dirt-high:  oklch(46%   0.075 60);    /* lit dirt kick */

  /* logo red — identity, CTAs, the X, speed */
  --throttle-red:      oklch(55% 0.205 27);   /* ~#D42127 */
  --throttle-red-deep: oklch(50% 0.190 27);   /* CTA fill, AA w/ bone */
  --throttle-red-dim:  oklch(38% 0.140 27);   /* borders, glows */
  --throttle-red-press: oklch(44% 0.170 27);  /* :active darken (D2.5) */
  --throttle-red-bright: oklch(63% 0.200 27); /* small red TEXT on ink (AA ≥4.5) — rail terminal, redline flag */

  /* logo X blue — data + focus only, never decoration */
  --holeshot-blue:        oklch(54% 0.132 252);  /* ~#1B74C4 */
  --holeshot-blue-bright: oklch(70% 0.120 252);  /* small text / focus */

  /* warm white type */
  --bone:      oklch(95.5% 0.007 90);     /* #F4F1EC-ish */
  --bone-dim:  oklch(80%   0.012 85);     /* secondary copy */
  --bone-mute: oklch(64%   0.012 85);     /* labels, captions */

  /* arena tungsten — POSTPONED / status ONLY */
  --caution: oklch(76% 0.128 75);         /* ~#E8A33D */

  /* translucents */
  --ink-veil:   oklch(13.5% 0.005 300 / .82);
  --ink-veil-solid: oklch(13.5% 0.005 300 / .96); /* no-blur engines (T-003) */
  --ink-glass:  oklch(17%   0.006 300 / .62);
  --bone-ghost: oklch(95.5% 0.007 90 / .14);
  --red-ghost:  oklch(55% 0.205 27 / .16);

  /* ---- type ------------------------------------------------ */
  --font-display: "Saira Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-text: "Saira", "Helvetica Neue", Arial, sans-serif;
  /* the data face — labels, addresses, dates, times, chips. Replaces the
     old ui-monospace stack (never shipped, rendered differently per OS);
     --font-mono stays as an alias so every existing rule keeps working. */
  --font-data: "Archivo Narrow", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-mono: var(--font-data);
  --font-stamp: "Saira Stencil One", "Saira Condensed", "Arial Narrow", sans-serif;

  /* scale (clamp system) */
  --text-hero:    clamp(3.4rem, 1.1rem + 10.4vw, 11.5rem); /* THROTTLECROSS */
  --text-display: clamp(2.25rem, 1rem + 4.6vw, 5.75rem);   /* section display */
  --text-title:   clamp(1.55rem, 1.05rem + 1.9vw, 2.9rem);
  --text-lead:    clamp(1.1rem, 1rem + .5vw, 1.4rem);
  --text-base:    clamp(1rem, .95rem + .25vw, 1.125rem);
  --text-small:   .875rem;
  --text-micro:   .72rem;

  /* speed slant for display moments */
  --slant: -9deg;

  /* ---- rhythm ---------------------------------------------- */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.5rem;
  --space-7: 4rem;
  --space-8: 6.5rem;
  --space-section: clamp(5rem, 3.4rem + 7vw, 11rem);
  --gutter: clamp(1.1rem, .5rem + 3vw, 3.5rem);
  --measure: 62ch;
  --page-max: 84rem;

  /* ---- motion ---------------------------------------------- */
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-snap:     cubic-bezier(.9, 0, .1, 1);     /* gate drop: hard in, hard stop */
  --ease-impact:   cubic-bezier(.34, 1.56, .64, 1); /* landing slam w/ overshoot settle */
  --ease-launch:   cubic-bezier(.6, 0, .3, 1);
  --dur-fast: 140ms;
  --dur-base: 280ms;
  --dur-slow: 640ms;

  /* ---- chrome ---------------------------------------------- */
  --head-h: 3.5rem;
  /* bar + the device notch/status-bar strip. env() is 0 unless the
     page opts in with viewport-fit=cover, so this is inert on
     desktop and on notchless devices. */
  --head-total: calc(var(--head-h) + env(safe-area-inset-top, 0px));
  --rpm-h: 3px;
  --radius-chip: .2rem;   /* tight radii — plated, not pillowy */
  --radius-card: .4rem;
  --shadow-deep: 0 24px 60px -24px oklch(0% 0 0 / .8);

  /* scroll progress (JS writes this) */
  --scroll-progress: 0;

  accent-color: var(--throttle-red);
  color-scheme: dark;
}