:root { --bg: #0a0c10; --panel: #0e1218; --line: #1c2330; --line-soft:#141a23; --dim: #5a6675; --txt: #c8d2de; --txt-strong: #ffffff; --accent-hot: #ff6b35; /* 10m */ --accent-warn: #ffc94d; /* 15m */ --accent-go: #48e08a; /* 20m */ --accent-cool: #35c9ff; /* 40m */ --accent-deep: #a78bfa; /* 80m and below */ --accent-none: #6f7f92; /* unknown mode — never a guess */ /* Mode colour is its own axis, separate from the band colours above. A bandscope row already carries its band in the label and the track's position, so the dot on it only ever has to say which mode. Six hues spread ~60° apart around the wheel, kept off the --accent-* hues so the two systems never look like one, tuned to stay distinguishable from each other at a few pixels wide on the dark panel background. */ --mode-cw: #47bbf5; --mode-ssb: #facf42; --mode-ft8: #3eda53; --mode-ft4: #ef5db9; --mode-rtty: #f35749; --mode-psk: #af77ee; --band-160m: var(--accent-deep); --band-80m: var(--accent-deep); --band-60m: var(--accent-deep); --band-40m: var(--accent-cool); --band-30m: var(--accent-cool); --band-20m: var(--accent-go); --band-17m: var(--accent-go); --band-15m: var(--accent-warn); --band-12m: var(--accent-warn); --band-10m: var(--accent-hot); --band-6m: var(--accent-hot); /* VHF and up. These reuse the same five --accent-* hues rather than adding a sixth ramp, for two reasons. The two halves of the spectrum are never on screen together (see the toggle in web/js/bands.js), so a repeated hue cannot be mistaken for the HF band that shares it. And --band-* is only ever read by the activity heatmap, where the cell's opacity carries the number and the hue only says which row you are on: it identifies, it does not rank. New hues would have to clear the same OKLCH contrast and separation work the light theme above documents, for no gain. 6m keeps --accent-hot in both halves, since it appears in both. Neighbouring rows never repeat a hue. */ --band-4m: var(--accent-warn); --band-2m: var(--accent-go); --band-70cm: var(--accent-cool); --band-23cm: var(--accent-deep); --band-13cm: var(--accent-hot); --band-9cm: var(--accent-warn); --band-6cm: var(--accent-go); --band-3cm: var(--accent-cool); /* QO-100 is the one entry that is not a band and not propagation, so it gets the neutral rather than a place in the ramp. */ --band-qo100: var(--accent-none); --band-12cm: var(--accent-deep); --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --rail-width: 290px; } /* Light theme. Same tokens, re-picked values — see web/js/theme.js and the inline pre-paint snippet in every page's for how [data-theme] gets set on the root before first paint. --band-*, --font-mono and --rail-width are not repeated here: they either forward to --accent-* above (so they already follow this block's redefinitions with no copy needed) or hold no colour at all. The neutrals invert the dark relationships rather than just negating them: --panel stays a touch brighter than --bg (elevated surfaces read lighter in both themes, not just "the opposite colour"), and --line/--line-soft are tuned lighter-but-still-readable — a straight negation of the dark values reads as a much harsher grid on white than the dark original ever did on near-black, which is the "grid of hard lines" this is written to avoid. --accent-* and --mode-* cannot simply invert either: the dark hues are bright, high-lightness colours chosen to pop off near-black, and the same hues at the same lightness all but disappear on a light panel. Each was re-picked in OKLCH at a lightness (~0.48) and per-hue max chroma that (a) clears 4.5:1 against both --bg and --panel — these are read as real text in places (rail score, ticker badge, #live, callsign links), not just graphics — and (b) keeps the six --mode-* hues, and separately the five --accent-* hues plus --accent-none, at least as far apart from each other in OKLab as the shipped dark set's own closest pair (min pairwise distance ~0.137); see .superpowers/theme-report.md for the numbers and the method. Hue *families* are kept close to the dark original (hot=red, warn=amber, go=green, cool=teal/blue, deep=violet; same order for the mode hues) so the association carries over even though every value is new. Some cross-talk between the --mode-* and --accent-* systems remains — e.g. --mode-rtty and --accent-hot land close together in both themes — because the shipped dark palette already has the same overlap (--mode-ssb and --accent-warn are nearly identical there) and resolving it would have cost separation within each six/five-way set, which is the constraint that is actually load-bearing. */ :root[data-theme="light"] { --bg: #eef1f6; --panel: #f9fbfd; --line: #c3cbd6; --line-soft:#e2e7ee; --dim: #5b6472; --txt: #1b222c; --txt-strong: #05070b; --accent-hot: #ad0549; --accent-warn: #7b5600; --accent-go: #02721c; --accent-cool: #00697b; --accent-deep: #6804e6; --accent-none: #71767d; --mode-cw: #09687f; --mode-ssb: #845003; --mode-ft8: #1a7105; --mode-ft4: #9b0096; --mode-rtty: #ae0440; --mode-psk: #5301f9; }