/* Design tokens for every page. Dark or light per data-theme, set by theme.js.
   Map-layer colors (closures, pipes) are read by JS too, via getComputedStyle. */
:root {
  color-scheme: dark;
  --hcl-ink: #141A22; --hcl-harbor: #1D4E89; --hcl-harbor-light: #8FB6E3; --hcl-paper: #F6F4EE; /* brand/06-tokens */
  --bg: var(--hcl-ink); --panel: #18202a; --card: #1d2631; --glass: rgba(20, 26, 34, 0.88);
  --line: #2c3947; --text: var(--hcl-paper); --muted: #98a3b1; --hover: #1f2935;
  --accent: var(--hcl-harbor-light); --warn: #f2994a; --bad: #eb5757; --good: #6fcf97;
  --minor: #f2c94c; --moderate: #f2994a; --major: #eb5757;
  --control-bg: #19212b; --button-bg: #212b37;
  --control-line: #66768a; /* form controls need 3:1 against their background */
  --alert-bg: #24171b;
  --closure: #ff8a1f; /* road-work sign orange */ --flood-closure: #ff5a5a; --scheduled-closure: #c084fc; --code-case: #ff7eb6;
  --font: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --pipe: #e8eef5; --inlet: #9ad8ff;
}
:root[data-theme=light] {
  color-scheme: light;
  --bg: var(--hcl-paper); --panel: #fbfaf6; --card: #efece4; --glass: rgba(251, 250, 246, 0.9);
  --line: #d9d4c7; --text: var(--hcl-ink); --muted: #5a6370; --hover: #ebe7dd;
  --accent: var(--hcl-harbor); /* never Harbor Light on Paper: 1.9:1 */ --warn: #bc4c00; --bad: #cf222e; --good: #1a7f37;
  --control-bg: #fffefb; --button-bg: #efece4; --control-line: #767c84;
  --alert-bg: #fbeeec;
  --pipe: #3d4b5c; --inlet: var(--hcl-harbor); --closure: #c25e00;
}