/* ============================================================ EON Matrix — the interaction accent, defined once. Lived in join.css until the player needed it too. The player is also reachable from /watch/, which does not load join.css (that sheet is the locked-preview + join overlay), so the pair moved here rather than being written out twice. Eon Yellow on the dark ground. On cream it becomes Eon ORANGE #db8037 with white ink — owner's call, 2026-08-24: the site carries ONE accent and it is the brand orange, so nothing on a page reads as a second, unrelated highlight colour. app.css's --accent, --signal and --focus moved with it, in step as always. This replaced Eon Purple #793795, which measured better on cream (7.4:1, and white on it 7.5:1) but was a different hue from every other accent on the page. Recorded so the numbers are not lost: #db8037 is 2.81:1 on cream and white on it is 2.93:1. Darkening the orange to lift that is not available — the brand bible forbids shades of a brand colour. The full record of the trade is in app.css's deck accent block. --cta-ink is not decoration either. A filled Eon Yellow button needs dark ink on top; white on yellow is unreadable. On the light theme's orange the owner's call is the opposite pairing — white — which is why the two themes no longer share one ink value. THREE blocks, not two. This project has three theme states: an explicit choice stamps data-theme on (index.html:26-47), and the default "system" setting stamps nothing at all — so system-default light is only reachable through the media query. A two-selector version silently misses it. ============================================================ */ :root { --cta: #f3c516; --cta-ink: #17101c; /* How far through an episode you are. Its own token rather than --cta, because --cta goes Eon Purple in light and a purple progress bar on cream reads as a selection state rather than as progress. Owner's call: Eon Yellow on dark, Eon Orange on light — the same orange the hero shader inks with in light mode, so the two agree. The light value is the brand bible's Eon Orange, #db8037, not a darkened stand-in (owner's call, 2026-08-24, overriding the earlier #b8641c). The measurement that motivated the darkening still stands and is recorded here so nobody re-derives it as a bug: #db8037 is 2.81:1 on cream, under the 3:1 floor for a UI component, where #b8641c was 4.12:1. The owner's position is that the brand colour is the brand colour on this surface. Where it matters most, this bar, the number is not really the issue: the progress hairline is drawn over the thumbnail's artwork and over the player's controls, not over cream, so the cream reading never applies to it. See app.css's accent block for the one place it does — and for the rule that any ink ON this orange must be dark, since white on #db8037 is 2.93:1. */ --progress: #f3c516; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --cta: #db8037; --cta-ink: #fff; --progress: #db8037; } } :root[data-theme="light"] { --cta: #db8037; --cta-ink: #fff; --progress: #db8037; }