/* Shared theme tokens for every page (dashboard, server-rendered pages, kiosk).
   Light is the base; `[data-theme="dark"]` on <html> switches to dark. The attribute is set
   server-side from the `theme` cookie and by a tiny inline <head> script (cookie → localStorage →
   prefers-color-scheme), so the first paint already has the right theme.
   Inter is the only font family.

   Colour roles (see DESIGN.md):
   --accent*   the brand colour (indigo). Buttons, links, selected states, the logo sweep. Never a data value.
   --ok*       semantic success (emerald). Confirmations, "on time" in text. Same hue as --d0.
   --d0..--d3  the delay scale (on time / 5–15 / 15–30 / 30+ min). Data only.
   --cyan      secondary data colour: trains, early arrivals, the on-time trend line. */
:root {
  --bg: #fafaf9;
  --bg-glow: #f3f2f8;                       /* soft tint behind the boot screen */
  --panel: rgba(255, 255, 255, 0.90);       /* translucent panels over the map */
  --panel-solid: #ffffff;
  --panel-strong: rgba(255, 255, 255, 0.97);/* detail drawer, sticky headers */
  --line: rgba(22, 23, 30, 0.09);
  --line-strong: rgba(22, 23, 30, 0.18);
  --text: #16171c;
  --text-2: #3b3e47;                        /* secondary text (feed rows, routes) */
  --muted: #666a75;
  --dim: #9a9ea8;
  --hover: rgba(22, 23, 30, 0.045);
  --hover-strong: rgba(22, 23, 30, 0.085);
  --track: rgba(22, 23, 30, 0.08);          /* bar backgrounds, rings, progress tracks */
  --accent: #443dd6;
  --accent-strong: #3730b8;                 /* hover / pressed */
  --accent-soft: rgba(68, 61, 214, 0.10);
  --accent-line: rgba(68, 61, 214, 0.40);
  --accent-glow: rgba(68, 61, 214, 0.22);
  --on-accent: #ffffff;
  --ok: #1a9c5c;
  --ok-soft: rgba(26, 156, 92, 0.12);
  --ok-line: rgba(26, 156, 92, 0.45);
  --cyan: #0b84ab;
  --cyan-soft: rgba(11, 132, 171, 0.12);
  --cyan-line: rgba(11, 132, 171, 0.4);
  --d0: #1a9c5c;
  --d1: #b07f00;
  --d2: #d35a0c;
  --d3: #d6224b;
  --early: #0b84ab;
  --nodata: #7b8a99;
  --shadow: 0 10px 40px rgba(22, 23, 40, 0.12);
  --shadow-soft: 0 6px 24px rgba(22, 23, 40, 0.08);
  --inset-hi: rgba(255, 255, 255, 0.6);
  --overlay: rgba(20, 22, 30, 0.35);        /* modal backdrop */
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* numeric text: same family, tabular figures */
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #0f1320;
  --bg-glow: #151a2c;
  --panel: rgba(21, 26, 42, 0.88);
  --panel-solid: #161b2c;
  --panel-strong: rgba(19, 23, 38, 0.97);
  --line: rgba(170, 180, 220, 0.10);
  --line-strong: rgba(170, 180, 220, 0.20);
  --text: #e9ebf3;
  --text-2: #c3c8d8;
  --muted: #8b92a8;
  --dim: #5b6278;
  --hover: rgba(255, 255, 255, 0.045);
  --hover-strong: rgba(255, 255, 255, 0.09);
  --track: rgba(255, 255, 255, 0.08);
  --accent: #8f8cff;
  --accent-strong: #a6a3ff;
  --accent-soft: rgba(143, 140, 255, 0.14);
  --accent-line: rgba(143, 140, 255, 0.45);
  --accent-glow: rgba(143, 140, 255, 0.30);
  --on-accent: #0f1320;
  --ok: #3ccf8e;
  --ok-soft: rgba(60, 207, 142, 0.14);
  --ok-line: rgba(60, 207, 142, 0.5);
  --cyan: #38d6ff;
  --cyan-soft: rgba(56, 214, 255, 0.12);
  --cyan-line: rgba(56, 214, 255, 0.4);
  --d0: #3ccf8e;
  --d1: #ffd23f;
  --d2: #ff8a3d;
  --d3: #ff3b6b;
  --early: #38d6ff;
  --nodata: #6f7f98;
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  --shadow-soft: 0 6px 24px rgba(0, 0, 0, 0.35);
  --inset-hi: rgba(255, 255, 255, 0.04);
  --overlay: rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}
/* Theme toggle (sun/moon). The icon shows the theme you would switch to. */
.theme-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--muted); cursor: pointer; flex: none; }
.theme-btn:hover { color: var(--text); background: var(--hover); }
.theme-btn svg { width: 16px; height: 16px; display: block; }
.theme-btn .ico-sun { display: none; }
[data-theme="dark"] .theme-btn .ico-sun { display: block; }
[data-theme="dark"] .theme-btn .ico-moon { display: none; }