/* Design tokens (P2.22 step 1): every colour, radius, shadow and spacing
   step named in docs/design.md, as CSS custom properties, defined once.
   unified.css reads these instead of hard-coding hex values, so a later
   palette change (or the Android app reusing the same system) is one line
   here, not a grep-and-replace across the stylesheet.

   Light values live on :root; dark values are the same custom properties
   redefined under body.dark (the toggle class ui.js already uses), so a
   descendant that reads var(--ink) gets the right value for whichever
   theme is active without needing its own `body.dark .selector` override —
   removing most of those overrides was the point of this file.

   Tokens not named in design.md's tables (--accent-ink, the radius/shadow/
   space names) are this build's own, chosen to read clearly; everything
   else is named exactly as design.md names it. */

:root {
  /* Colour — Harbour (docs/design.md §Colour) */
  --page: #eef1f6;
  --surface: #ffffff;
  --surface-raised: #eef1f6;
  --line: #e4e8ee;
  --navy: #003c71;
  --nav-tab-ink: #cfe1f8;
  --ink: #1a1a1a;
  --ink-secondary: #444444;
  --ink-muted: #666666;
  --due: #0e7490;
  --due-early: #0a7d5e;
  --due-late: #dc2626;
  --live-dot: #16a34a;
  --stop-dot: #9aa4b2;
  --accent: #fbbf24;
  --accent-ink: #1f2937;   /* the Track button's text on --accent; not a named
                              design.md token, but its value is (the accent
                              row's "with #1f2937 text") */

  /* Status chips (docs/design.md §Colour — "Status chips"); same in both
     themes unless design.md shows otherwise, so no body.dark override. */
  --chip-late-bg: #fee2e2;
  --chip-late-ink: #b91c1c;
  --chip-ok-bg: #dcfce7;
  --chip-ok-ink: #166534;
  --chip-warn-bg: #fef3c7;
  --chip-warn-ink: #92400e;
  --chip-neutral-bg: #f4f4f5;
  --chip-neutral-ink: #4b5563;

  /* Corners (docs/design.md §Corners and shadows) */
  --radius-pill: 999px;
  --radius-sheet: 24px;        /* the phone sheet's top corners (step 2) */
  --radius-zoom-group: 18px;   /* the zoom control's group (step 2) */
  --radius-card: 16px;
  --radius-button: 10px;

  /* Shadows (docs/design.md §Corners and shadows) */
  --shadow-nav: 0 4px 16px rgba(0,0,0,.28);
  --shadow-map-control: 0 2px 8px rgba(0,0,0,.28);
  --shadow-sheet: 0 -8px 28px rgba(0,0,0,.28);
  --shadow-panel: 4px 0 24px rgba(0,0,0,.1);
  --shadow-card: 0 1px 6px rgba(0,0,0,.06);

  /* Spacing scale (docs/design.md §Spacing) — 4, 8, 12, 16, 24, 32 px, no
     other number. This step swapped the single-value declarations that
     were already exactly on the scale (margin/padding/gap: 4px, 8px or
     12px with nothing else on that shorthand — e.g. unified.css's
     .map-select-hint, .pill-chevron, .veh-track, the ride modal; 9 call
     sites as of this step, review round 1). A value that's part of a
     multi-value shorthand with a non-scale sibling (padding: 7px 14px 7px
     12px), or that isn't on the scale at all, is untouched pending the
     view that redraws it — most of the file is still that case. */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
}

body.dark {
  --page: #14161c;
  --surface: #1c1e24;
  --surface-raised: #242730;
  --line: #262933;
  /* --navy, --nav-tab-ink, --live-dot, --accent, --accent-ink are identical
     in both themes per design.md — no override. */
  --ink: #e6e8eb;
  --ink-secondary: #d0d4db;
  --ink-muted: #9ba1a8;
  --due: #67e8f9;
  --due-early: #4ade80;
  --due-late: #f87171;
  --stop-dot: #6b7684;

  /* The one chip pair design.md shows a dark variant for ("the same in
     both themes unless shown"): departed/passed/neutral. */
  --chip-neutral-bg: #2c2f36;
  --chip-neutral-ink: #c6cad0;

  --shadow-sheet: 0 -8px 28px rgba(0,0,0,.6);   /* design.md: "(dark .6)" */
  --shadow-card: 0 1px 4px rgba(0,0,0,.4);      /* unified.css's existing dark
                                                    card shadow, carried over */
  /* Step 2: the canvas's dark board (StopMapR390Dark.dc.html) renders the
     floating nav pill and the map controls (zoom group, locate) at .6
     alpha in dark, the same bump design.md states explicitly for the sheet
     shadow above — not written as its own table row, but visibly the same
     rule, so carried the same way. */
  --shadow-nav: 0 4px 16px rgba(0,0,0,.6);
  --shadow-map-control: 0 2px 8px rgba(0,0,0,.6);
}