/* Design tokens. Dark is the default — the script in index.html stamps data-theme on before first paint, and only stamps "light" if that has been chosen — so the light set below is the base and the dark block overrides it. Every colour in the dashboard resolves through here, including the ones the SVG builders emit inline, so a hard-coded hex anywhere else survives only one of the two themes. */ :root { color-scheme: light; --bg: #f4f6f9; --panel: #ffffff; --panel-alt: #eef1f5; --border: #ccd3dd; --text: #11141a; --text-dim: #39414e; --muted: #5a6270; /* 5.9:1 on the panel */ --grid: #e3e7ed; --axis: #aab2be; --plot-bg: #eef2f7; /* compass face & direction-strip surface */ --accent: #1a5fbf; /* chrome */ --header-top: #ffffff; --header-bot: #eaeef4; --hover-border: #9aa4b2; --seg-on-bg: #d8e6fa; --seg-on-fg: #123a6b; --tooltip-bg: #ffffff; --shadow: rgba(15, 23, 36, 0.18); /* Speed-band washes behind the wind trace. Deliberately stronger than a typical chart wash — these are the flyable / strong / too-strong call, read at a glance and often in daylight, so they have to carry across the room. */ --band-ok: rgba(12, 140, 12, 0.20); --band-strong: rgba(200, 96, 40, 0.26); --band-over: rgba(198, 40, 40, 0.26); /* Lull, average and gust are one measure at three levels, not three identities — swapping their order would be a lie. So they take one hue in three lightness steps: darker is more wind. This also leaves green meaning exactly one thing on the page (the flying verdict), which it didn't when the lull line was green and "on direction" was green too. */ --series-lull: #8ab4e8; /* blue 300 */ --series-avg: #2f7ad1; /* blue 500 */ --series-gust: #14406f; /* blue 700 */ /* status — themed, because the dark-theme values sit at 3:1 or less on white and these carry the flyable / too-strong call */ --good: #0f7a24; --warning: #9a6a05; --serious: #b4521c; --critical: #c22b2b; } :root[data-theme="dark"] { color-scheme: dark; --bg: #0d0d0d; --panel: #171a21; --panel-alt: #1e222b; --border: #39404d; --text: #ffffff; --text-dim: #d2d0c7; --muted: #a8a69e; /* 7.1:1 on the panel — was 4.85:1 and reading muddy */ --grid: #3a3a37; --axis: #4a4a46; --plot-bg: #1f2530; --accent: #3987e5; --header-top: #12151b; --header-bot: #0d0d0d; --hover-border: #3d444f; --seg-on-bg: #24405e; --seg-on-fg: #cde2fb; --tooltip-bg: #0d0d0d; --shadow: rgba(0, 0, 0, 0.5); --band-ok: rgba(12, 200, 12, 0.20); --band-strong: rgba(236, 131, 90, 0.26); --band-over: rgba(226, 70, 70, 0.28); /* The same ramp anchored the other way: on a dark ground more wind has to be brighter, or the strongest reading is the one that disappears. */ --series-lull: #1f5fa8; --series-avg: #4a90e6; --series-gust: #9ec8f5; --good: #0ca30c; --warning: #fab219; --serious: #ec835a; --critical: #e05252; /* #d03b3b was 3.6:1 here — too low for the chip text */ }