/* The palette, in one place, for both halves of the site. * * This block used to exist five times -- _public.html, explore.html, * subject.html, pulse.html, radio_advertisers.html -- and the copies had * already drifted: --bar existed in three of them, --up/--down in one, * --orig/--copy/--neg in two. The authenticated half had no tokens at all and * restated four greys and the sentiment triplet as literals. * * THREE THEME STATES, NOT TWO. A viewer who has chosen a theme has * data-bs-theme stamped on ; a viewer who has not gets nothing and only * prefers-color-scheme applies. So the full light palette is declared on bare * :root, redefined under a prefers-color-scheme block guarded as * :root:not([data-bs-theme="light"]) so an explicit light choice still beats a * dark OS, and redefined again under [data-bs-theme="dark"] so the toggle wins * in the other direction. No colour is defined only inside one of those * blocks -- that is the classic unreadable-page bug. * * Nothing Bootstrap-specific lives here: app.css does that bridging, so the * public pages, which never load Bootstrap, do not pay for it. */ :root { --ink: #16181d; --muted: #5f6672; --line: #e3e6ea; --paper: #ffffff; --wash: #f5f6f8; --accent: #14505c; --accent-ink: #ffffff; --bar: #14505c26; /* Editorial rather than alert colours. The saturated Bootstrap green/red read as a warning banner; these read as print, and stay legible on both grounds. --orig/--copy name the same pair for the republication pages. */ --pos: #2c6a4d; --neu: #5f6672; --neg: #a63a30; --orig: #2c6a4d; --copy: #a2542b; --up: #2c6a4d; --down: #a2542b; /* The sidebar was hardcoded dark in both themes, so the app had no light theme that actually looked light. */ --sidebar-bg: #14232a; --sidebar-ink: #e7edf0; --sidebar-muted: #9fb3bb; --radius-card: 6px; --radius-control: 4px; /* Two measures, named. There were three magic widths on the public side and none on the app side, and the marketing nav was visibly wider than the prose beneath it. */ --measure-prose: 52rem; --measure-data: 70rem; /* Bootstrap's 4px step, adopted because the public half had no scale at all -- ten ad-hoc rem values with no discernible rhythm. */ --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 3rem; --font-body: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; --font-size: 15px; --line-height: 1.6; } @media (prefers-color-scheme: dark) { :root:not([data-bs-theme="light"]) { --ink: #e2e5ea; --muted: #98a0ac; --line: #2b313a; --paper: #14171c; --wash: #1b1f26; --accent: #56a6b8; --accent-ink: #0b1418; --bar: #56a6b830; --pos: #6bb391; --neu: #98a0ac; --neg: #e0776b; --orig: #6bb391; --copy: #d18a52; --up: #6bb391; --down: #d18a52; --sidebar-bg: #10161a; --sidebar-ink: #e7edf0; --sidebar-muted: #8c9aa4; } } :root[data-bs-theme="dark"] { --ink: #e2e5ea; --muted: #98a0ac; --line: #2b313a; --paper: #14171c; --wash: #1b1f26; --accent: #56a6b8; --accent-ink: #0b1418; --bar: #56a6b830; --pos: #6bb391; --neu: #98a0ac; --neg: #e0776b; --orig: #6bb391; --copy: #d18a52; --up: #6bb391; --down: #d18a52; --sidebar-bg: #10161a; --sidebar-ink: #e7edf0; --sidebar-muted: #8c9aa4; }