/* ==========================================================================
   Better Roads — Design tokens
   Single source of truth. The landing page AND every SVG asset derive from
   these values. Do not introduce a colour that is not in this file.

   TWO SURFACES, ONE SYSTEM
   ------------------------
   The page is a document: pale, warm, sun-bleached concrete — the light
   default. The charts, diagrams and app screens inside it are instruments:
   dark measurement plates, the way instrument output is reproduced inside a
   printed engineering report. That split is deliberate and holds in BOTH
   themes, which is why the --plate-* tokens never change with the theme.

   The light theme's ink is literally the dark theme's asphalt: one material
   seen by day and by night.

   COLOUR MEANS ONE THING
   ----------------------
   The yellow-to-red ramp is the severity legend. Nothing on this page is warm
   unless it is reporting how bad a road is. There is no decorative accent.
   ========================================================================== */

:root {
  /* ======================================================================
     LIGHT — the default. Sun-bleached concrete and survey paper.
     ====================================================================== */
  --road-void: #f4f2ec;   /* page base                                     */
  --road-0:    #eae7de;   /* alternating sections                          */
  --road-1:    #fdfcf9;   /* raised cards                                  */
  --road-2:    #d9d3c6;   /* hairlines, borders                            */
  --road-3:    #c2bbaa;   /* input borders, tracks                         */

  --paint:     #141a23;   /* ink — the dark theme's asphalt                */
  --paint-2:   #47525f;
  --paint-3:   #78818d;

  /* Severity, darkened for legibility against a pale page. Same hues, more
     ink — a light background needs the ramp to carry contrast, not glow. */
  --sev-0:     #8d97a3;
  --sev-1:     #c68a00;
  --sev-2:     #dd6f1d;
  --sev-3:     #cf3f22;
  --sev-4:     #a3161f;

  --instr:     #2d6b9c;
  --instr-dim: #a7bccd;

  /* The unremarkable stretches of the accelerometer trace — present, but not
     competing with the severity ramp overlaid on the rough stretches. */
  --trace:     #8b93a0;

  /* Fog / horizon colour handed to the WebGL scenes so the road recedes into
     the page rather than into an arbitrary void. */
  --scene-fog: #f4f2ec;

  /* Action. Deliberately NOT on the severity ramp — a button is not data, so
     it must not borrow the legend's colour. In daylight the call to action is
     dark paint on pale concrete; at night it is the same paint lit up. */
  --action:     #141a23;
  --action-ink: #f6f4ef;

  /* The road gets its own band at the foot of the hero rather than sitting
     behind the headline. Dark ink needs a light backing and asphalt needs to
     stay dark; they cannot share a band, and a scrim strong enough to
     reconcile them erases the road. Separating them is the fix. */
  --road-band-min: clamp(180px, 26vh, 380px);

  /* Only the band's own top and bottom edges are feathered. */
  --veil-top: rgba(244, 242, 236, 1);
  --veil-mid: rgba(244, 242, 236, 0.55);
  --veil-end: rgba(244, 242, 236, 0.72);
  --chrome-bg: rgba(244, 242, 236, 0.86);

  /* ======================================================================
     PLATES — instrument surfaces. Identical in both themes, on purpose.
     Charts, diagrams, app screens and their severity ramp live here.
     ====================================================================== */
  --plate-void:  #080a0e;
  --plate-bg:    #0c1017;
  --plate-panel: #141a23;
  --plate-line:  #1e2632;
  --plate-edge:  #2c3542;

  --plate-ink:   #f2eee4;
  --plate-ink-2: #a8b0bc;
  --plate-ink-3: #6c7684;

  --plate-sev-0: #5b6b7a;
  --plate-sev-1: #ffd24d;
  --plate-sev-2: #ff9a3c;
  --plate-sev-3: #f2603c;
  --plate-sev-4: #c6262e;

  --plate-instr:     #7fa6c9;
  --plate-instr-dim: #35485c;

  /* ======================================================================
     Type
     ====================================================================== */
  /* Display = Archivo with its width axis pushed wide. Reads as road signage,
     which is where this product lives. Sentence case at display size — caps
     here reads sports/crypto, not civic. */
  --font-display: 'Archivo', 'Arial Black', system-ui, sans-serif;
  --font-body:    'Instrument Sans', system-ui, -apple-system, sans-serif;
  /* Mono because every number on this page is a measurement. Earned. */
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-d1:    clamp(2.4rem, 6.1vw, 5.5rem);
  --t-d2:    clamp(1.9rem, 4.4vw, 3.5rem);
  --t-d3:    clamp(1.35rem, 2.4vw, 2rem);
  --t-lead:  clamp(1.0625rem, 1.5vw, 1.375rem);
  --t-body:  1.0625rem;
  --t-small: 0.9375rem;
  --t-label: 0.6875rem;

  --lh-display: 0.94;
  --lh-body:    1.62;
  --tr-display: -0.028em;
  --tr-label:   0.18em;

  /* ======================================================================
     Layout / motion
     ====================================================================== */
  --max:     1240px;
  --gutter:  clamp(20px, 4.2vw, 64px);
  --rail:    56px;
  --radius:  3px;

  --ease:  cubic-bezier(0.16, 0.84, 0.44, 1);
  --d-fast: 240ms;
  --d-mid:  420ms;
  --d-slow: 900ms;
}

/* ==========================================================================
   DARK — wet asphalt at night under sodium light. Opt-in via the toggle.
   ========================================================================== */
[data-theme="dark"] {
  --road-void: #080a0e;
  --road-0:    #0c1017;
  --road-1:    #141a23;
  --road-2:    #1e2632;
  --road-3:    #2c3542;

  --paint:     #f2eee4;
  --paint-2:   #a8b0bc;
  --paint-3:   #6c7684;

  --sev-0:     #5b6b7a;
  --sev-1:     #ffd24d;
  --sev-2:     #ff9a3c;
  --sev-3:     #f2603c;
  --sev-4:     #c6262e;

  --instr:     #7fa6c9;
  --instr-dim: #35485c;
  --trace:     #98a0ac;

  --scene-fog: #080a0e;

  --action:     #ffd24d;
  --action-ink: #080a0e;

  --veil-top: rgba(8, 10, 14, 1);
  --veil-mid: rgba(8, 10, 14, 0.45);
  --veil-end: rgba(8, 10, 14, 0.70);
  --chrome-bg: rgba(8, 10, 14, 0.86);
}

/* Reduced motion is a hard floor, not a nicety: this page's core content is
   motion. Everything must still be readable and complete when it is off. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}