/* theme.css — one palette for every o-page, in two registers. * * Thirteen pages each carried their own copy of the same :root block, and each * hardcoded the same handful of rgba() literals derived from it. That was fine * while there was one register: the literals and the variables agreed because * both were dark. A second register breaks that agreement — a white wash lifts * a dark card and washes out a light one — so the literals become variables * here and the register swaps them. * * The rule for anything added later: NO COLOUR LITERAL IN A PAGE. If a wash or * a glow is needed, it is rgba(var(--something-rgb), a). A page that reaches * for #06171E again has quietly opted out of the light register, and nobody * will notice until someone reads it in daylight. */ :root{ /* the ground and the ink */ --abyss:#06171E; --deep:#0A2129; --card:#123742; --card-hi:#17434F; --foam:#EFF6F5; --vapour:#C4DBDF; --vapour-dim:#82A0A8; --ground-top:#0C2932; /* the two accents */ --liquid:#33C2D2; --liquid-deep:#1B8B99; --solid:#E7B24C; --solid-deep:#C58F2C; /* and growth: a bud on /paths, the next thing that can grow */ --bud:#7FCB86; --bud-rgb:127,203,134; /* triplets, for every wash, glow, border and scrim built out of the above. * --wash is the subtle surface lift on a card; --well is the recessed ground * of an input or a code block. They invert as a pair. */ --liquid-rgb:51,194,210; --solid-rgb:231,178,76; --vapour-rgb:196,219,223; --wash-rgb:255,255,255; --well-rgb:6,23,30; --card-rgb:18,55,66; --card-hi-rgb:23,67,79; --line:rgba(var(--vapour-rgb),0.13); --line-strong:rgba(var(--vapour-rgb),0.24); --display:'Syne',system-ui,sans-serif; --body:'Newsreader',Georgia,serif; --mono:'Space Mono',ui-monospace,monospace; } /* The light register. Every value below is the same role in a different key — * note --abyss inverting to near-white, because it is the BUTTON TEXT colour as * well as the page ground, so the buttons stay legible without a rule of their * own. The two accents darken rather than lighten: teal and amber at their dark * values carry enough contrast on paper, where their bright values do not. * The dim vapour keeps its hue at the lightest that reads at 4.5 to 1 on every * light ground, --deep included; look:weft voices the same value at 1.13. */ :root[data-theme="light"]{ --abyss:#FBF8F2; --deep:#F3EEE3; --card:#FFFFFF; --card-hi:#FFFDF8; --foam:#12333C; --vapour:#3C5A63; --vapour-dim:#596E76; --ground-top:#FFFDF8; --liquid:#0D6B79; --liquid-deep:#0A5561; --solid:#8E6210; --solid-deep:#6F4C08; --bud:#2E7D3A; --bud-rgb:46,125,58; --liquid-rgb:13,107,121; --solid-rgb:142,98,16; --vapour-rgb:60,90,99; --wash-rgb:18,51,60; /* the wash darkens a light surface as white lifts a dark one */ --well-rgb:255,255,255; /* and a well brightens where it used to deepen */ --card-rgb:255,255,255; --card-hi-rgb:255,253,248; --line:rgba(var(--vapour-rgb),0.16); --line-strong:rgba(var(--vapour-rgb),0.30); } /* Cards read as raised on paper and as inset on a dark ground — the same box, * the opposite affordance, which is why this is a shadow here and a wash there. */ :root[data-theme="light"] .sect, :root[data-theme="light"] .card{ box-shadow:0 1px 3px rgba(var(--wash-rgb),0.07); } /* The toggle. A page with its own #btn-theme in a bar gets that wired instead; * anything else gets this, fixed out of the way, so no page needs new markup. */ .theme-toggle{ position:fixed; top:12px; right:12px; z-index:99; background:rgba(var(--wash-rgb),0.06); border:1px solid var(--line); border-radius:6px; color:var(--vapour-dim); font-family:var(--mono); font-size:13px; line-height:1; padding:7px 9px; cursor:pointer; } .theme-toggle:hover{ color:var(--foam); border-color:var(--line-strong); } @media print{ .theme-toggle{ display:none } } /* A hand-drawn diagram carries its own fixed light-on-dark fills, and rewriting * every one of them into a variable is neither possible in an SVG presentation * attribute nor worth it. So the diagram keeps its dark ground in both registers * and simply sits on a plate — a figure on the page rather than part of it. */ :root[data-theme="light"] svg[role="img"]{ background:#0A2129; border-radius:12px; padding:10px; } /* family colour — one steady pastel hue per family (pages set --fam-h; these four * tokens keep it soft and legible in both registers; the name is always written) */ :root{ --fam-s:26%; --fam-l:31%; --fam-line-l:44%; --fam-ink-l:84% } :root[data-theme="light"]{ --fam-s:46%; --fam-l:92%; --fam-line-l:64%; --fam-ink-l:30% } /* dictate — the mic glyph theme.js lays over a write box's top-right corner * (window.dictate;