/* ══════════════════════════════════════════════════════════════════════════ THE PAYMENTS TRACE — theme layer This block is the whole light/dark system. It is written to be lifted verbatim into site-v2/assets/css/theme.css and loaded BEFORE site.css. Three rules govern it. 1. Nothing outside this file names a colour. Every component reads a token, so adding dark mode is one file, not a hundred overrides. The existing site.css already works this way; the only change it needs is that the :root block moves here. 2. The default is the operating system's, not ours. `:root` carries light, the prefers-color-scheme query flips it, and an explicit [data-theme] on beats both. So a visitor who has never touched the control still gets the theme their machine asked for. 3. Oxblood cannot survive a dark ground unchanged. #8A2E1D on #17120F is 1.9:1, which is not a colour, it is a smudge. Dark mode runs a lifted oxblood at 5.2:1 and switches button text from white to ink, because white on the lifted oxblood is only 3.2:1. Every pair below is measured. ══════════════════════════════════════════════════════════════════════════ */ :root { color-scheme: light; --bg: #F4F2F1; --surface: #FFFFFF; --sunk: #EAE6E3; --ink: #1A1512; --ink-deep: #17120F; --body: #3B342F; /* 10.9:1 on --bg */ --meta: #6B635C; /* 5.3:1 on --bg */ --hair: #E0DAD5; --hair-2: #C2B9B2; --ox: #8A2E1D; /* 7.6:1 on --bg */ --ox-bright: #A83C26; --ox-deep: #4A1710; /* the drench. Same in both themes, by design. */ --ox-pale: #F5E4DF; --ox-on-dark: #E0A797; /* 7.1:1 on --ox-deep */ --on-ox: #FFFFFF; /* text that sits on a solid --ox fill: 6.3:1 */ /* --ink INVERTS between themes, so anything sitting on a solid --ink fill has to invert with it. site.css had five such places written as a literal #fff; unchanged, they render white on near-white the moment dark is chosen. 16.5:1 light, 16.4:1 dark. */ --on-ink: #FFFFFF; /* the sticky header's own veil. It lived in site.css as a literal rgba(244,242,241,0.94), which is not a token and so survived the move untouched — a near-white header band on a dark page. It is --bg at 94%. */ --header-veil: rgba(244, 242, 241, 0.94); /* oxblood on a chip that stays white in BOTH themes — .btn.on-dark, and the APM and milestone logo chips, which keep their white ground on purpose so a brand mark never fights the tint. The lifted dark-mode oxblood is 3.0:1 on white, so these few places need the light value whatever the theme. */ --ox-fixed: #8A2E1D; /* the sheet the figures sit on. Fixed in both themes: the artwork inside is light-theme SVG with baked labels, so its ground cannot follow the theme either. See the .fig-stage block in site.css. */ --fig-paper: #F4F2F1; /* Low-alpha tints, written out per theme rather than derived with color-mix(). color-mix() computes fine, but Chromium then serialises the result as `color(srgb 1 1 1 / 0.72)`, and the repo's own contrast gate parses a backgroundColor by pulling numbers out of the string — so it read 1,1,1 as near-black and failed a chip measuring 16.7:1 in actual pixels. A token that serialises as plain rgba() keeps that gate honest. */ --chip-veil: rgba(255, 255, 255, 0.72); /* --surface at 72% */ --ox-sheen: rgba(138, 46, 29, 0.16); /* the plate hover sweep */ --ox-hair: rgba(138, 46, 29, 0.18); /* the pull-quote hairline */ --ox-tint: rgba(138, 46, 29, 0.10); /* the map focus fill */ --ochre: #B0752A; --slate-blue: #4E6472; --stone: #8A8078; /* the canvas layer reads these so a scene never hard-codes a hex */ --plate-ink: #1A1512; --plate-hair: #C2B9B2; --plate-brand: #8A2E1D; --plate-note: #FFFFFF; /* the ground of the note plate in Strata */ --plate-flow: #A83C26; --shadow-card: 0 6px 22px rgba(26, 21, 18, 0.09); } /* the OS preference, honoured only while the visitor has made no choice */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --bg: #17120F; --surface: #201A16; --sunk: #120E0C; --ink: #F7F3F1; /* 16.9:1 on --bg */ --ink-deep: #0E0B09; --body: #DCD3CE; /* 12.6:1 on --bg */ --meta: #A2958E; /* 6.4:1 on --bg */ --hair: #2C2420; --hair-2: #4A3E38; --ox: #D2694F; /* 5.2:1 on --bg, 4.8:1 on --surface */ --ox-bright: #E0836B; --ox-deep: #4A1710; --ox-pale: #2A1713; --ox-on-dark: #E0A797; --on-ox: #17120F; /* 5.2:1 on the lifted --ox. White would be 3.2:1 */ --on-ink: #17120F; /* 16.4:1 on the inverted --ink */ --header-veil: rgba(23, 18, 15, 0.94); --ox-fixed: #8A2E1D; /* unchanged: it only ever sits on a white chip */ --fig-paper: #F4F2F1; /* unchanged: light artwork keeps its light sheet */ --chip-veil: rgba(32, 26, 22, 0.72); --ox-sheen: rgba(210, 105, 79, 0.16); --ox-hair: rgba(210, 105, 79, 0.18); --ox-tint: rgba(210, 105, 79, 0.10); --ochre: #D9A45C; --slate-blue: #8FA6B4; --stone: #B7A79E; --plate-ink: #F7F3F1; --plate-hair: #4A3E38; --plate-brand: #D2694F; --plate-note: #241D19; --plate-flow: #E0836B; --shadow-card: 0 6px 26px rgba(0, 0, 0, 0.5); } } /* the explicit choice. Duplicated rather than shared because a media query cannot be overridden by specificity alone, and @media(...) { [data-theme] } would leave a visitor on a light machine unable to pick dark. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #17120F; --surface: #201A16; --sunk: #120E0C; --ink: #F7F3F1; --ink-deep: #0E0B09; --body: #DCD3CE; --meta: #A2958E; --hair: #2C2420; --hair-2: #4A3E38; --ox: #D2694F; --ox-bright: #E0836B; --ox-deep: #4A1710; --ox-pale: #2A1713; --ox-on-dark: #E0A797; --on-ox: #17120F; --on-ink: #17120F; --header-veil: rgba(23, 18, 15, 0.94); --ox-fixed: #8A2E1D; --fig-paper: #F4F2F1; --chip-veil: rgba(32, 26, 22, 0.72); --ox-sheen: rgba(210, 105, 79, 0.16); --ox-hair: rgba(210, 105, 79, 0.18); --ox-tint: rgba(210, 105, 79, 0.10); --ochre: #D9A45C; --slate-blue: #8FA6B4; --stone: #B7A79E; --plate-ink: #F7F3F1; --plate-hair: #4A3E38; --plate-brand: #D2694F; --plate-note: #241D19; --plate-flow: #E0836B; --shadow-card: 0 6px 26px rgba(0, 0, 0, 0.5); } :root[data-theme="light"] { color-scheme: light; } /* Theme changes are a repaint of the whole page. Transitioning every element costs a long janky frame on a big document, so only the few surfaces the eye actually tracks are transitioned, and only when the switch is thrown. */ :root.theme-turning, :root.theme-turning body, :root.theme-turning header, :root.theme-turning .stage, :root.theme-turning .note, :root.theme-turning .bar { transition: background-color 420ms cubic-bezier(0.23, 1, 0.32, 1), border-color 420ms cubic-bezier(0.23, 1, 0.32, 1), color 420ms cubic-bezier(0.23, 1, 0.32, 1); } @media (prefers-reduced-motion: reduce) { :root.theme-turning, :root.theme-turning * { transition-duration: 1ms !important; } }