/* ============================================================
   NEXT ROUTE — Design Tokens
   Single source of truth. Nothing in this repo hardcodes a color.
   Measured contrast ratios live in docs/design-system.md.
   ============================================================ */

:root {

  /* ---- Core palette (docs/plan.md) --------------------------
     Host-native. Next Route reads as part of the Toyota Audio
     Multimedia system rather than a third-party skin sitting on
     top of it: true near-black, cool neutrals, the system orange,
     and the two semantic status colors the host already uses. */

  --void:   #0A0B0C;  /* background — true near-black, host-native        */
  --ink:    #F2F4F5;  /* primary text + high-priority data                */
  --signal: #F2600C;  /* the system accent: active trail, urgency, CTA    */
  --muted:  #8A949C;  /* secondary text, borders, inactive, organizing    */

  /* ---- Semantic status --------------------------------------
     Two colors that mean exactly one thing each. Green says the
     thing you hoped for is true; amber says pay attention but
     don't stop. Signal stays the accent, not a status. */

  --go:   #4FB477;  /* trail open, offline map saved, condition nominal   */
  --warn: #E8B33A;  /* daylight countdown, no-service ahead, caution      */

  /* ---- Derived surfaces -------------------------------------
     Steps of Void along luminance only. Elevation is the only
     thing they encode. */

  --surface-1: #15181B;  /* cards on Void          */
  --surface-2: #1E2226;  /* controls, track wells  */
  --rail:      #0E1113;  /* nav chrome, recedes    */
  --line:      #2C3238;  /* 1px separators         */

  /* ---- Accent + status derivatives --------------------------
     Permitted only where the meaning is identical to the parent.
     Never for decoration, never as a new accent. */

  --signal-dim:   #8F3A07;  /* Signal under a fill, still reads as Signal */
  --signal-ghost: rgba(242, 96, 12, 0.14);
  --signal-edge:  rgba(242, 96, 12, 0.38);

  --warn-ghost:   rgba(232, 179, 58, 0.10);
  --warn-edge:    rgba(232, 179, 58, 0.32);

  /* Scrims — Void at opacity, so overlays on the map never
     introduce a new color or a cast. */
  --scrim:   rgba(10, 11, 12, 0.88);
  --scrim-2: rgba(10, 11, 12, 0.95);

  /* ---- Text roles -------------------------------------------
     Measured against --void:
       Ink    on Void  17.85:1  AAA — any size
       Warn   on Void  10.26:1  AAA — any size
       Go     on Void   7.62:1  AAA — any size
       Muted  on Void   6.38:1  AA  — any size, body copy included
       Signal on Void   6.05:1  AA  — any size
       Ink    on Signal 2.95:1  FAILS — never do this
       Void   on Signal 6.05:1  AA  — this is why CTAs use Void on Signal

     Every pair in this system passes AA except Ink on Signal,
     which is why the primary CTA carries dark text on orange
     rather than the white the original mockup used. */

  --text-primary:   var(--ink);
  --text-secondary: var(--muted);
  --on-signal:      var(--void);

  /* ---- Type -------------------------------------------------
     Heavy, wide sans. Matches the host multimedia system so
     Next Route reads as native, not bolted on. */

  --font-display: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-data:    "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;

  --size-hero:   56px;  /* the one number you read at a glance      */
  --size-title:  44px;  /* trail name, destination                  */
  --size-data-l: 34px;  /* tier-1 stats                             */
  --size-data-m: 24px;  /* telemetry                                */
  --size-body:   15px;  /* trail notes, supporting sentences        */
  --size-sub:    13px;  /* metadata under a title                   */
  --size-label:  11px;  /* uppercase tracked labels — always Muted  */

  --weight-heavy: 800;
  --weight-bold:  700;
  --weight-med:   600;

  --track-label: 0.18em;  /* uppercase labels need air              */
  --track-tight: -0.02em; /* display sizes tighten                  */

  /* Tabular numerals on every piece of data. Numbers must not
     jitter or shift width while the truck is moving. */
  --numerals: tabular-nums;

  /* ---- Space + shape ---------------------------------------- */

  --gap-xs: 6px;
  --gap-s:  12px;
  --gap-m:  16px;
  --gap-l:  22px;
  --gap-xl: 26px;

  --radius-card: 12px;
  --radius-screen: 10px;
  --radius-bezel: 18px;

  /* ---- Touch targets ----------------------------------------
     Glove-friendly is inherited from the truck's own design law.
     60px is the floor. Nothing interactive goes below it. */

  --target-min:     60px;
  --target-primary: 76px;

  /* ---- Screen geometry --------------------------------------
     Toyota Audio Multimedia 14" display. Fixed pixel canvas —
     screens are authored at hardware size and scaled to fit. */

  --screen-w: 1560px;
  --screen-h: 660px;
  --rail-w:   88px;
  --side-w:   400px;

  /* ---- Motion -----------------------------------------------
     One meaningful motion moment: Driving -> Parked.
     These values are the spec handed to Rive.
     See docs/transition-storyboard.md. */

  --ease-recede: cubic-bezier(0.4, 0.0, 1, 1);    /* leaving: accelerate out */
  --ease-bloom:  cubic-bezier(0.16, 1, 0.3, 1);   /* arriving: settle in     */
  --ease-state:  cubic-bezier(0.2, 0.8, 0.2, 1);  /* generic state change    */

  --dur-recede: 380ms;
  --dur-bloom:  620ms;
  --dur-stagger: 70ms;  /* between blooming tiers */
  --dur-total:  1200ms; /* full transition budget */
}

/* Motion is a feature here, but it is never mandatory. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-recede: 1ms;
    --dur-bloom: 1ms;
    --dur-stagger: 0ms;
    --dur-total: 1ms;
  }
}