/* ZO-GO map — design tokens as CSS custom properties.
   Recoloured from the planner this app was copied from, to the ZO-GO palette in
   docs/brand/design-system.md: teal #0B8373 (filled), bright teal #31DDC6, crimson #D80032.
   THE TOKEN NAMES ARE THE PLANNER'S and were kept so no rule had to change: `--color-brand-teal`
   is the filled teal, `--color-brand-orange` holds the bright-teal accent (dark ink on it, never
   white), and the two `route` pairs are vehicle 1 (crimson) and vehicle 2 (teal). A first pass, not the design pass. */

:root {
  /* ── brand (the sign) ── */
  --color-brand-teal:   #0B8373;   /* D-193: motorway blue (was teal #0B8373) */
  --color-brand-teal-deep: #08665A;   /* F-14: the outline under the plate */
  --color-brand-orange: #31DDC6;   /* the ACCENT: bright teal, always with dark ink on it (10:1) */
  --color-brand-board:  #EDFFFB;
  --color-brand-ink:    #15201D;

  /* ── warm ramp — earth & sun ── */
  --color-warm-gold:   #F2A63B;
  --color-warm-orange: #EE7A21;
  --color-warm-ember:  #D9531F;
  --color-warm-clay:   #B23A24;
  --color-warm-maroon: #7E2B2E;

  /* ── cool ramp — clean day sky ── */
  --color-cool-haze:  #F0F7FB;
  --color-cool-light: #A8DBEC;
  --color-cool-blue:  #3E8FC4;
  --color-cool-deep:  #1B3F72;

  /* ── steel ramp — cold dawn ── */
  --color-steel-1: #2C3A47;
  --color-steel-2: #556B7D;
  --color-steel-3: #8A9CAA;
  --color-steel-4: #AEBEC8;

  /* ── route — functional vehicle tracks (D-011) ── */
  --color-route-amber:      #D80032;   /* vehicle 1: crimson, so the line reads on a pale map */
  --color-route-amber-deep: #A30026;
  --color-route-blue:       #0B8373;   /* D-197: vehicle 2 is the brand blue */
  --color-route-blue-deep:  #08665A;
  --color-route-rail:       #8A6FB0;
  --color-route-self:       #1B9AAA;
  --color-route-self-deep:  #147A86;   /* the same hue, for TEXT — see tokens.json */

  /* ── time-of-day skies ── */
  /* F-14, 2026-08-02: these now match sky.css EXACTLY. They described a ~162deg gradient
     nothing used while four tuned 172deg ones shipped, so /new invented a fifth. A token
     that disagrees with what renders is worse than no token — it invites a third value. */
  --gradient-sky-dawn:  linear-gradient(172deg,#0E1614 0%,#123B34 55%,#2E7A6E 100%);
  --gradient-sky-day:   linear-gradient(172deg,#FAFAFB 0%,#F3FBF9 60%,#EDFFFB 100%);   /* D-193: road-atlas paper */
  --gradient-sky-night: linear-gradient(172deg,#0E1614 0%,#0B2621 38%,#07322B 70%,#0A4A40 100%);
  --gradient-sky-dusk:  linear-gradient(172deg,#0E1614 0%,#07322B 45%,#0B5C51 80%,#0B8373 100%);

  /* ── type ── */
  --font-family-display: "Saira Semi Condensed", "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-family-body:    "Barlow", system-ui, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 16px;      /* F-17: was 15px, below the floor */
  --font-size-lg: 17px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-display: 38px;
  --font-tracking-tight: 0.02em;
  --font-tracking-wide: 0.08em;
  --font-tracking-wider: 0.14em;

  /* ── space ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* ── radius ── */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ── shadow ── */
  --shadow-sign:  0 5px 16px rgba(0,0,0,0.40);
  --shadow-card:  0 1px 3px rgba(0,0,0,0.15);
  --shadow-sheet: 0 6px 18px rgba(0,0,0,0.35);

  /* ── motion ── */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --duration-sky: 1200ms;
}