/* ============================================================ Qlean - theme tokens ------------------------------------------------------------ The DARK palette stays where it has always been: in each page's own :root block. This file only adds the LIGHT overrides, plus a few tokens that were previously hardcoded. Why overrides rather than a rewrite: ":root" is specificity (0,1,0); every selector below is (0,2,0), so these win no matter what order the stylesheets load in. Nothing about the existing dark rendering is touched, which makes the whole light theme revertable by deleting this file and the toggle. Two states are covered deliberately: - system preference, when the visitor has not chosen - data-theme on , when they have (and it must beat the system preference in BOTH directions) ============================================================ */ :root{ /* Mode-independent. The pill buttons are gold with dark text in both themes - that IS the brand - so they get their own tokens rather than borrowing --gold, which has to flip for text use. */ --btn-a:#FFEFB8; --btn-b:#C9A84C; --on-gold:#1A1206; /* Previously hardcoded as #fff and #EAF2F8. Two tokens, not one, so the existing dark rendering is preserved exactly. */ --text-max:#FFFFFF; --text-high:#EAF2F8; /* Neutral scrim over artwork - unchanged in both themes. */ --img-scrim:rgba(0,0,0,.45); /* Surfaces and inks that were hardcoded in the page CSS. The dark values here are the originals, so dark rendering is exactly what it always was. */ --header-bg:rgba(26,33,45,0.82); --tile-1:rgba(22,29,43,.5); --tile-2:rgba(16,21,31,.5); --prose-ink:#D7E2EA; --lede-ink:#EDE0C8; } /* The light palette, defined once and applied from two places. */ @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ --navy-abyss:#FAF7F2; --navy-deep:#F1EBE2; --navy-card:#FFFFFF; --steel:#35657A; --teal:#2C6A76; --ice:#17434E; --gold:#8A6A12; --gold-deep:#6E5410; --ember:#C2461A; --mint:#1F7A3A; --text-soft:#3C4753; --text-dim:#616B77; --danger:#C42127; --line:rgba(14,20,27,0.14); --text-max:#0E141B; --text-high:#1B2530; --img-scrim:rgba(0,0,0,.35); --header-bg:rgba(255,255,255,0.88); --tile-1:rgba(255,255,255,.72); --tile-2:rgba(241,235,226,.72); --prose-ink:#364049; --lede-ink:#4A3F28; color-scheme:light; } } :root[data-theme="light"]{ --navy-abyss:#FAF7F2; --navy-deep:#F1EBE2; --navy-card:#FFFFFF; --steel:#35657A; --teal:#2C6A76; --ice:#17434E; --gold:#8A6A12; --gold-deep:#6E5410; --ember:#C2461A; --mint:#1F7A3A; --text-soft:#3C4753; --text-dim:#616B77; --danger:#C42127; --line:rgba(14,20,27,0.14); --text-max:#0E141B; --text-high:#1B2530; --img-scrim:rgba(0,0,0,.35); --header-bg:rgba(255,255,255,0.88); --tile-1:rgba(255,255,255,.72); --tile-2:rgba(241,235,226,.72); --prose-ink:#364049; --lede-ink:#4A3F28; color-scheme:light; } :root[data-theme="dark"]{ color-scheme:dark; } /* ---- Theme toggle control ---- */ .theme-toggle{ background:none; border:1px solid var(--line); color:var(--text-soft); width:34px;height:34px; border-radius:8px; cursor:pointer; display:inline-flex;align-items:center;justify-content:center; flex:none; padding:0; line-height:1; transition:border-color .15s, color .15s; } .theme-toggle:hover{ border-color:var(--teal); color:var(--ice); } .theme-toggle svg{ width:17px;height:17px;display:block } /* Show the icon for the mode the click would switch TO: in dark you see a sun, in light you see a moon. */ .theme-toggle .i-sun{ display:block } .theme-toggle .i-moon{ display:none } @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .theme-toggle .i-sun{ display:none } :root:not([data-theme="dark"]) .theme-toggle .i-moon{ display:block } } :root[data-theme="light"] .theme-toggle .i-sun{ display:none } :root[data-theme="light"] .theme-toggle .i-moon{ display:block } :root[data-theme="dark"] .theme-toggle .i-sun{ display:block } :root[data-theme="dark"] .theme-toggle .i-moon{ display:none } /* The legal/thankyou header is just a brand lockup; make room for the toggle on the right without disturbing the nav-based headers. */ header .wrap.brandbar{display:flex;align-items:center;justify-content:space-between;gap:16px}