/* ================================================================================================ theme.css — Rob (2026-09-05). THE SITE'S COLOUR TOKENS, in one place, for every page outside the game. Until now each page outside `/city` stated its own palette: `Blog.razor.css` said as much in its own header ("the tokens are stated rather than imported … if they ever become shared variables, all five pages move together"). This is that file, and they now do. Thirteen stylesheets plus the landing page's inline block read from here; nothing states a chrome colour of its own any more. WHAT IS A TOKEN AND WHAT IS NOT ------------------------------- Tokenised: CHROME — panels, hairlines, ink, labels, links, buttons, code blocks, rails, chips. These are the surfaces whose whole job is to be the page, and they flip with the theme. NOT tokenised, deliberately: OBJECTS WITH A COLOUR OF THEIR OWN. A post-it is yellow paper, a postcard is warm stock, the START button is amber, a danger button is red, and text laid over a photograph or a film is white on a dark scrim. Those are pictures of things, not chrome; making them "theme-aware" would mean a yellow post-it that is not yellow. They keep their literals, and the media overlays keep their dark scrims in BOTH themes — a light scrim over moving footage is what makes video backgrounds unreadable. THE TWO CHANNELS. Two tokens carry an rgb TRIPLET rather than a colour, because the glass idiom this site is built on is `rgba(255,255,255,.08)` fills over a dark ground — a hundred of them, at ten different alphas. Naming a hundred alpha steps would be absurd, so instead: --tc-tint the "lighten" channel: borders, hover fills, dividers (dark 255,255,255) --tc-shade the "darken" channel: shadows (dark 0,0,0) --tc-halo the channel a text-shadow uses UNDER text on a photo — the opposite polarity to the ink, so it is black on the dark theme and white on the light one and every rule writes `rgba(var(--tc-tint), .08)` with its own alpha kept exactly as it was. In the light theme `--tc-tint` becomes a dark slate, so the same rule that drew a faint white line on navy draws a faint grey line on paper, at the same weight, with no rule rewritten. GROUND AND GLASS ARE TWO TOKENS, NOT ONE. In the dark theme they are 7/255 apart — #0b1016 and #121820 — and it is tempting to fold them. They must not be: a panel reads as a card because it is LIGHTER than the page it sits on, and on paper that means white glass on a grey-white ground. Fold them and every panel on the light theme disappears. Measured, the first time round. DEFAULT IS LIGHT (Rob, 2026-09-06). `:root` is the LIGHT theme now, and the dark one is the block behind `[data-theme="dark"]`. That is a one-line change of which selector carries which table, and it is deliberately the whole mechanism: a visitor with nothing stored — and every page in the instant before `js/theme.js` has written the attribute — gets paper rather than navy, and no rule anywhere else had to know. `prefers-color-scheme` is still NOT consulted: the theme is a choice, not a detection. The choice lives in `localStorage['tc-theme']` and is applied to `` by `js/theme.js` from the document HEAD, before the body paints, so there is no flash of the wrong theme. ROLLBACK to a dark-first site: swap the two selectors below back (`:root` carries the dark table, `:root[data-theme="light"]` the light one), swap the two `color-scheme` lines at the foot, and set `FALLBACK` in `js/theme.js` back to 'dark'. ROLLBACK: remove the and the