/* ============================================================================
   FTS DISPATCH — DESIGN TOKENS
   RE-THEMED: "Chrome & Red" — silver / red / white.
   Legacy token NAMES are retained (a color re-theme swaps values, not names):
     --amber  → SIGNAL RED  (glow / emissive / running lights / LED sign)
     --hazard → SOLID RED   (CTA fills & shields; 5:1 with white text)
     --guide  → SILVER      (was highway green; metallic frames / valid state)
   ========================================================================== */

:root {
  /* --- Grounds: chrome tonal range (dark graphite ↔ silver-white) ------ */
  --asphalt:      #191C20;   /* dark chrome / graphite — primary dark ground */
  --asphalt-2:    #24282D;   /* raised graphite surface */
  --asphalt-3:    #343A41;   /* silver-lit panel / border on dark */
  --bone:         #EEF0F3;   /* silver-white — primary light ground */
  --bone-2:       #E2E5E9;   /* recessed light surface */
  --bone-3:       #CBD1D8;   /* light border */

  /* --- Red: the single brand accent, two calibrated tones ------------- */
  --amber:        #FF373D;   /* SIGNAL RED — glow / emissive / running lights (bright, on dark) */
  --amber-deep:   #C21A20;
  --hazard:       #D81F27;   /* SOLID RED — CTA fills & shields (white text = 5.1:1) */
  --hazard-deep:  #A5151B;

  /* --- Silver: chrome / metallic (was highway green) ------------------ */
  --guide:        #8B929B;   /* mid silver — metallic frames, valid state */
  --guide-lite:   #B9C0C8;   /* bright silver */
  --silver:       #C4CAD1;   /* chrome */
  --silver-2:     #9AA1AA;
  --silver-bright:#E4E7EB;
  --silver-deep:  #6E747C;

  --reflect:      #FFFFFF;   /* pure white — light on dark (headlight, tape, chrome hot spot) */

  /* --- Semantic ink (cool neutral grays) ----------------------------- */
  --ink-on-dark:      #E9EBEE;
  --ink-on-dark-soft: #A9AFB6;
  --ink-on-dark-faint:#6E747B;
  --ink-on-light:     #1A1D21;
  --ink-on-light-soft:#4E5359;
  --ink-on-light-faint:#868C93;

  /* --- Typography ---------------------------------------------------- */
  --font-display: "Big Shoulders Display", "Arial Narrow", "Impact", sans-serif;
  --font-stencil: "Big Shoulders Stencil", "Big Shoulders Display", sans-serif;
  --font-body:    "Overpass", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    "Overpass Mono", ui-monospace, "SFMono-Regular", "Consolas", monospace;

  /* fluid display scale — condensed face, so it can run large */
  --fs-mega:  clamp(2.9rem, 1.7rem + 3.6vw, 5.4rem);   /* hero headline */
  --fs-h1:    clamp(2.6rem, 1.8rem + 3.6vw, 5rem);
  --fs-h2:    clamp(2rem, 1.5rem + 2.4vw, 3.4rem);
  --fs-h3:    clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
  --fs-lead:  clamp(1.12rem, 1rem + .5vw, 1.4rem);
  --fs-body:  1.0625rem;
  --fs-sm:    0.9375rem;
  --fs-xs:    0.8125rem;
  --fs-kicker:0.72rem;   /* stencil/mono labels */

  --lh-tight: 0.92;
  --lh-head:  1.02;
  --lh-body:  1.62;

  --tr-kicker: 0.22em;   /* letter-spacing for signage labels */
  --tr-tight:  -0.01em;

  /* --- Spacing (0.25rem base rhythm) --------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;    --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;   --s-11: 11rem;

  --section-y: clamp(4rem, 3rem + 6vw, 8.5rem);   /* vertical section padding */

  /* --- Layout -------------------------------------------------------- */
  --content-max: 1240px;
  --gutter: clamp(1.15rem, 0.6rem + 2.4vw, 3.5rem);
  --shoulder-w: clamp(0px, -2rem + 6vw, 4.5rem);  /* left edge-line track; collapses on mobile */

  /* --- Sign-corner radius (highway signs have soft corners) ---------- */
  --r-sign: 5px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;

  /* --- Borders / rules ----------------------------------------------- */
  --line-dark:  #363C43;
  --line-light: #D4D9DF;
  --hair: 1px;

  /* --- Motion (one language) ----------------------------------------- */
  --ease-out:    cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --t-fast: 180ms;
  --t-base: 320ms;
  --t-slow: 640ms;
  --t-marquee: 42s;

  /* --- Elevation: the shifting card shadow --------------------------- */
  --shadow-rest: 0 1px 0 rgba(0,0,0,.04), 0 8px 20px -14px rgba(20,22,26,.5);
  --shadow-lift: -6px 14px 34px -16px rgba(20,22,26,.55), 8px 4px 0 -2px var(--amber);

  /* --- Signature: RED LED sign glow (was amber) ---------------------- */
  --glow-amber: 0 0 1px var(--amber), 0 0 10px rgba(255,55,61,.55), 0 0 28px rgba(255,55,61,.30);
  --glow-headlight: 0 0 24px rgba(255,255,255,.35);

  --z-base: 1;
  --z-raise: 10;
  --z-header: 100;
  --z-float: 200;
  --z-nav: 300;
  --z-modal: 400;
}

/* Utility face size aliases used across components */
:root {
  --dot-size: 3px;   /* DMS sign dot pitch */
}