/* ALEETH theme tokens · light, dark and auto.
---------------------------------------------------------------------------
THIS IS NOT A NEW BRAND. Both palettes below are lifted from the doc kit,
which has shipped dark and "-Light" variants of every business document for
months. Shane already signs off on these exact values every time a Light PDF
goes to a customer. Nothing here was invented; it was moved from the PDF
pipeline to the web so the two stop diverging.
THE ONE THING THAT IS NOT AN INVERT. Gold #D2B373 is a dark-ground colour.
On white it drops to roughly 1.9:1 against the page and fails every contrast
floor there is. The light palette uses brass #8C6A2E instead, which is what
the Light PDFs already use. So --gold is a ROLE, not a fixed hex, and any
surface that hard-codes #D2B373 will look broken the moment light mode is on.
HOW TO USE IT
(paint-blocking, see that file)
Then style against the tokens, never against a literal.
THE THREE STATES
auto no data-theme attribute; follows the operating system
light
dark
Both explicit states are defined twice on purpose: once inside the media
query and once as an attribute rule, so a chosen theme beats the system
preference in BOTH directions. A palette defined only inside a media query
cannot be overridden by a toggle.
--------------------------------------------------------------------------- */
/* ── light, the default ground ─────────────────────────────────────────────
Defined on bare :root so a surface with no JavaScript, no media support and
no attribute still renders a complete, legible palette. */
:root {
color-scheme: light;
--void: #FFFFFF; /* the page */
--panel: #FAF8F3; /* raised or inset surfaces */
--elev: #F4F0E7; /* a step ABOVE panel. on light, higher means more tint, not more white */
--ink: #232428; /* body text */
--mut: #54565E; /* secondary text */
--dim: #736D63; /* tertiary, captions, meta. 4.5:1 on page, panel and elev */
--line: #E4E0D6; /* hairlines and borders */
--line-soft: #EFEBE1; /* the quieter divider, barely there */
--gold: #8A682D; /* the accent AT THIS GROUND. brass, not #D2B373 */
--gold-deep: #6F5321; /* pressed, visited, heavier weight */
--gold-glow: #6F5321; /* hover. on a light ground "brighter" means DARKER */
--goldsoft: #F7F2E6; /* gold-tinted fill behind gold text */
--red: #A6503F; /* stop, deny, halt */
--redsoft: #FAF1EC;
--shadow: 0 1px 2px rgba(35, 31, 32, .06), 0 8px 24px rgba(35, 31, 32, .06);
}
/* ── dark, when the system asks for it ──────────────────────────────────── */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--void: #231F20;
--panel: #2A2624;
--elev: #332E29;
--ink: #EDE7DD;
--mut: #A79F93;
--dim: #9B968A;
--line: #443C36;
--line-soft: #1C1915;
--gold: #D2B373;
--gold-deep: #B3922A; /* 4.5:1 on page, panel AND elev. #9A7D24 was 4.14 even on the page */
--gold-glow: #E8C878;
--goldsoft: #2E2921;
--red: #C96A5A;
--redsoft: #33231F;
--shadow: 0 1px 2px rgba(0, 0, 0, .34), 0 8px 24px rgba(0, 0, 0, .30);
}
}
/* ── dark, when the reader chose it ─────────────────────────────────────── */
:root[data-theme="dark"] {
color-scheme: dark;
--void: #231F20;
--panel: #2A2624;
--elev: #332E29;
--ink: #EDE7DD;
--mut: #A79F93;
--dim: #9B968A;
--line: #443C36;
--line-soft: #1C1915;
--gold: #D2B373;
--gold-deep: #B3922A;
--gold-glow: #E8C878;
--goldsoft: #2E2921;
--red: #C96A5A;
--redsoft: #33231F;
--shadow: 0 1px 2px rgba(0, 0, 0, .34), 0 8px 24px rgba(0, 0, 0, .30);
}
/* ── the ground itself ──────────────────────────────────────────────────────
Painted explicitly. A transparent body borrows whatever is behind it, which
is how a page ends up with dark text on a dark browser ground. */
html { background: var(--void); }
body { background: var(--void); color: var(--ink); }
/* Only animate for readers who have not asked us to stop. */
@media (prefers-reduced-motion: no-preference) {
html.theme-ready body { transition: background-color .18s ease, color .18s ease; }
}
/* ── the toggle ─────────────────────────────────────────────────────────────
Three segments, current one filled. Ships hidden and is revealed by theme.js
once it has run, so a reader with JavaScript off never sees a dead control. */
.theme-toggle { display: none; }
html.theme-ready .theme-toggle {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 2px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--panel);
}
.theme-toggle button {
appearance: none;
border: 0;
background: none;
color: var(--dim);
font: inherit;
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
padding: 5px 11px;
border-radius: 999px;
cursor: pointer;
line-height: 1;
}
.theme-toggle button:hover { color: var(--ink); }
.theme-toggle button[aria-pressed="true"] {
background: var(--goldsoft);
color: var(--gold);
}
.theme-toggle button:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 2px;
}