/* ============================================================================= * kc-uplift.css — the Knowledge Center desktop uplift TOKEN LAYER * ============================================================================= * * WHAT THIS FILE IS * * Two new orthogonal axes, and the compatibility work that lets the app keep * running while only some screens have been uplifted. Nothing here selects a * component, moves an element or sets a font. It declares custom properties and * one background paint, and that is all. Load it LAST, after kc-lesson-v2.css. * * THREE AXES, AND THEY ARE ORTHOGONAL * * data-presentation vivid | focused | clear EXISTING register system * data-theme light | dark NEW * data-surface glass | solid NEW, glass is the app default * * `data-presentation` still governs type, density, radius, border WEIGHT, * motion and the accent ramp. `data-theme` governs which palette those tokens * resolve to. `data-surface` governs whether plates are opaque or translucent. * Set `data-theme` and `data-surface` on the SAME element (the app root) — * `[data-surface="glass"]` reads its theme from the element it is written on, * not from an ancestor, so a nested surface preview inside a differently-themed * root is not supported and is not needed. * * `data-theme` ALREADY EXISTS HERE, AND IT HAS THREE STATES * * center.html ships a theme control whose `auto` setting REMOVES the attribute * and follows `prefers-color-scheme` from there (`applyTheme`, center.html * ~3638). So "no attribute" means AUTO in this product, not dark and not light, * and this file honours that rather than redefining it: `:root` is light, * `[data-theme="dark"]` is dark, and a media query supplies dark to a root that * has made no choice. LAYER 0 explains why that forces the held-palette shape. * * Surface is the mirror image and has no auto path. An absent `data-surface` * resolves to SOLID; glass is the default the app WRITES rather than the default * the cascade assumes, so an un-uplifted screen keeps opaque plates until * something asks for glass. `prefers-reduced-transparency: reduce` puts a glass * root back on the solid values (LAYER 5) without duplicating a palette. * * WHY `clear` INVERTS THE DIRECTION OF THE MAP * * In vivid and focused the new names are authored here and the OLD names are * re-pointed at them. In `clear` that is reversed: `clear` already owns a * measured, AAA palette in kc-theme.css SECTION F (and a measured light one in * SECTION G), and the one thing this file must not do is re-derive it. So in * `clear` the NEW names alias the OLD ones, glass is neutralised to opaque * plates with no blur and no wash, and every ratio `clear` ships today is * arithmetically untouched — this file does not redeclare --text, --surface or * --bg in that register at all. The legacy half of tests/contrast.test.js reads * the same three files it always did and its 396 numbers are unchanged. * * CONTRAST, MEASURED AGAINST THE COMPOSITED GROUND * * Every ink below was measured over the ground it actually sits on, glass * included: a translucent plate over its sky is not the pairing an opaque plate * is. tools/contrast_audit.mjs samples each frame's --sky on a grid, composites * the plate (and any tint or wash above it) over each sample, and takes the * WORST point. That is why --ink3 differs across all four modes, and why the * semantic inks do too — the next block is the full ledger of what moved. * ========================================================================== */ /* ============================================================================= * EVERY HANDOFF VALUE THAT HAD TO CHANGE, WITH THE MEASUREMENT THAT FORCED IT * ----------------------------------------------------------------------------- * The handoff re-measured --ink3 in all four modes and stopped there. It is the * right instinct applied to one token: the ink is the per-mode variable, and * --ink3 is the one that breaks first. But it is not the only one that breaks, * and the two grounds that are NOT plates were never measured at all. * * INK, per mode. Each value below is the MINIMUM hue-preserving move — the * chromaticity is identical, scaled in linear light, and each was solved * against the worst composited point of every ground it is used on, not just * the bare plate. * * light solid --green #0b7a66 -> #0b7965 4.49:1 on its own --green-tint * light glass --ink2 #4a5578 -> #495376 4.41:1 on --crit-tint on --plate * light glass --ink3 #525c7d -> #4d5676 4.12:1 on --quiet on --plate * (#525c7d holds 4.50:1 on the BARE plate, which is * what the handoff measured; a --quiet control fill * on that plate is where it goes) * light glass --green #0b7a66 -> #076151 3.59:1 on --plate, 3.24:1 on tint * light glass --amber #8a5a05 -> #794f04 4.11:1 on --plate, 3.62:1 on wash * light glass --crit #b0392e -> #983027 4.13:1 on --plate, 3.70:1 on tint * dark glass --ink2 #b5ac9f -> #c2b9ab 4.39:1 on --amber-wash on --plate * dark glass --ink3 #b3aa9c -> #b7afa2 4.28:1 on --quiet on --plate * dark glass --amber #cb9f41 -> #ddb467 4.00:1 on --amber-wash, 4.35 tint * dark glass --crit #e0857a -> #e7a9a3 3.33:1 on --crit-tint on --plate * * That last one is worth the sentence it takes, because it is the only place * the alternative was properly ruled out rather than assumed. --crit also fails * on the BARE dark glass plate (4.25:1), so the tint is not the cause: weakening * --crit-tint to alpha .08 still leaves the ink needing #e49a92, and raising the * plate from .44 to .72 opacity — which is no longer glass by any reading — * still only reaches 4.05:1. Cutting the dark sky to 40% of its stated strength * would do it, and that is the wash the handoff says is load-bearing. The ink * was the only variable that worked. * * TWO GROUNDS THE HANDOFF NEVER MEASURED, because they are not plates: * * --page light glass canvas washes .24/.24/.22 -> .13/.13/.12 * Darkest point Y 0.539, which puts --ink3 at 3.70:1. Unlike the * frame sky, THE PAGE CANVAS IS A TEXT GROUND: every screen that has * not been uplifted yet paints its body copy straight onto it. * --chrome light glass .70/.34 -> .86/.66, dark glass .62/.24 -> .72/.46 * Drawn for a 68px app bar whose label sits in the top third and * never reaches the weak end of the ramp. --ink3 measured 3.93:1 at * the .34 stop. * * ONE NAME, because the codebase already owned it: * * --acc-tint -> --tint-acc. kc-theme.css declares --acc-tint per accent as the * ramp's OPAQUE tint panel (#2f1d48 on purple), !important. Left as written, * the uplift's translucent tint never won the cascade and --au-sel resolved to * #2f1d48: primary ink on a selected answer row measured 1.17:1 under a light * theme. --acc-tint is now an alias of --tint-acc (LAYER 4) so nothing that * reads the old name is stranded. It is the only handoff name that moved. * * ONE RULE THAT IS NOT A TOKEN CHANGE, and one defect that was already shipping, * are recorded at --sky in LAYER 1 MODE 3 and at --au-content-plate in LAYER 2. * ========================================================================== */ /* ============================================================================= * LAYER 0 — THE HELD PALETTES: the only place in this file a colour is written * ----------------------------------------------------------------------------- * Four palettes, four prefixes, and then nothing below declares a value — only * references. That is not tidiness, it is the answer to a problem `data-theme` * creates the moment you look at how center.html already uses it. * * center.html has shipped a `data-theme` control for a while, and its contract * has three states, not two: `applyTheme('auto')` REMOVES the attribute and the * page follows `prefers-color-scheme` from there. So "no attribute" already * means AUTO in this product, and a token layer that reads it as "dark" would * quietly break the setting members already have. * * Honouring auto means the dark palette has to be reachable from two different * selectors — `[data-theme="dark"]` and, inside a media query, * `:root:not([data-theme="light"])` — and CSS gives you no way to put a media * query in a selector list. Writing the palette twice is how center.html's own * inline block does it, and it is a value that can drift. Holding it once and * referencing it twice cannot: tests/contrast.test.js asserts the two reference * lists are token-for-token identical, so the path the audit CANNOT see (media * queries are stripped before parsing) is provably the path it measures. * * --l-* light + solid * --d-* dark + solid * --lg-* light + glass, the deltas only * --dg-* dark + glass, the deltas only * ========================================================================== */ :root { /* --- MODE 1 of 4: LIGHT + SOLID ------------------------------------------- --page is the painted canvas and MAY be a multi-layer gradient. --page-base is its flat fallback and MUST stay a colour: the app uses --bg as a gradient colour stop (kc-theme.css:1196) and inside a box-shadow (kc-theme.css:573), and a gradient in either place drops the whole declaration. --bg maps to --page-base, never to --page; the wash is painted in LAYER 6 instead. --bell is the handoff's --text-3 #8a93b2, kept because the prototype uses it and named so nobody mistakes it for ink: it measures 2.71:1 and is decorative only. Text-weight semantics (--green/--amber/--crit) are the DARKENED variants of the documented -500 fills, which are kept as --*-fill for meters, dots and filled chips. --acc is the accent INK; --acc-deep is the same hue as a fill and as the focus ring, one stop darker because on a light ground darker is more contrast; --on-acc is the ink that sits on it. The handoff has no solid accent fill — its primary control is the gradient — but the app has ~30 of them behind --acc-fill/--acc-ink, so the pair has to exist. */ --l-page: #f2f0f7; --l-page-base: #f2f0f7; --l-sky: radial-gradient(48vw 48vw at 12% 8%, rgba(124,92,255,.10), transparent 62%), radial-gradient(42vw 42vw at 88% 14%, rgba(167,139,250,.12), transparent 62%), radial-gradient(52vw 52vw at 78% 96%, rgba(127,111,224,.10), transparent 62%), linear-gradient(180deg, #f6f4fb, #f9f8fd); --l-chrome: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.58)); --l-plate: #ffffff; --l-inset: #f8f7fc; --l-recess: #f1eff9; --l-ink1: #16121f; --l-ink2: #4e4760; --l-ink3: #5c5570; --l-bell: #8f89a3; --l-acc: #4c2fc4; --l-acc-deep: #3a22a3; --l-on-acc: #ffffff; --l-tint-acc: rgba(76,47,196,.10); --l-acc-quiet: rgba(76,47,196,.07); --l-green: #0b7965; --l-green-fill: #12bfa0; --l-green-tint: rgba(18,191,160,.18); --l-amber: #8a5a05; --l-amber-fill: #f5a524; --l-amber-tint: rgba(245,165,36,.20); --l-amber-wash: rgba(245,165,36,.14); --l-crit: #b0392e; --l-crit-fill: #f2685f; --l-crit-tint: rgba(242,104,95,.16); --l-check-bg: #0b7965; --l-check-ink: #ffffff; --l-quiet: rgba(74,85,120,.07); --l-track: rgba(74,85,120,.18); --l-rule: rgba(74,85,120,.24); --l-rule-soft: rgba(74,85,120,.18); --l-rule-firm: rgba(74,85,120,.55); --l-shadow: 0 1px 2px rgba(16,26,64,.05), 0 8px 24px -12px rgba(16,26,64,.18); --l-blur: none; --l-blur-chrome: blur(14px); --l-grad: linear-gradient(150deg, #a78bfa, #7f6fe0); --l-on-grad: #0b0a14; --l-frame: linear-gradient(135deg, rgba(124,92,255,.60), rgba(76,47,196,.42)); --l-stripe-p: rgba(76,47,196,.12); --l-stripe-g: rgba(18,191,160,.20); --l-stripe-am: rgba(245,165,36,.22); --l-stripe-n: rgba(74,85,120,.10); --l-stripe-b: rgba(74,85,120,.05); /* --- MODE 2 of 4: DARK + SOLID ------------------------------------------- Aurora's own values, with one deliberate difference: --ink3 is lifted from Aurora's --text-3 #948b7e (4.81:1 on --inset) to #a49b8d, because every mono metadata label in the uplift is 10.5-11.5px and the handoff would not ship a 4.8 at that size. #948b7e survives as --bell, which never carries text. */ --d-page: #0b0a14; --d-page-base: #0b0a14; --d-sky: radial-gradient(48vw 48vw at 12% 8%, rgba(124,92,255,.30), transparent 60%), radial-gradient(42vw 42vw at 88% 14%, rgba(240,171,252,.20), transparent 60%), radial-gradient(52vw 52vw at 78% 96%, rgba(94,234,212,.16), transparent 60%), linear-gradient(180deg, #0e0d19, #0b0a14); --d-chrome: linear-gradient(180deg, rgba(11,10,20,.85), rgba(11,10,20,.35)); --d-plate: #141220; --d-inset: #1b1828; --d-recess: #08070f; --d-ink1: #ece7df; --d-ink2: #bab5b1; --d-ink3: #9c9793; --d-bell: #8a8690; --d-acc: #cbaafe; --d-acc-deep: #bc91fb; --d-on-acc: #0b0a14; --d-tint-acc: rgba(188,145,251,.12); --d-acc-quiet: rgba(188,145,251,.10); --d-green: #7ac8a6; --d-green-fill: #52b88c; --d-green-tint: rgba(82,184,140,.16); --d-amber: #cb9f41; --d-amber-fill: #cb9f41; --d-amber-tint: rgba(203,159,65,.16); --d-amber-wash: rgba(203,159,65,.10); --d-crit: #e0857a; --d-crit-fill: #e0857a; --d-crit-tint: rgba(224,133,122,.16); --d-check-bg: #7ac8a6; --d-check-ink: #0c0714; --d-quiet: rgba(255,255,255,.05); --d-track: rgba(255,255,255,.07); --d-rule: rgba(148,139,126,.35); --d-rule-soft: rgba(148,139,126,.28); --d-rule-firm: rgba(148,139,126,.50); --d-shadow: none; --d-blur: none; --d-blur-chrome: blur(14px); --d-grad: linear-gradient(150deg, #a78bfa, #7f6fe0); --d-on-grad: #0b0a14; --d-frame: linear-gradient(135deg, rgba(203,170,254,.75), rgba(127,111,224,.75)); --d-stripe-p: rgba(203,170,254,.12); --d-stripe-g: rgba(122,200,166,.12); --d-stripe-am: rgba(203,159,65,.14); --d-stripe-n: rgba(255,255,255,.05); --d-stripe-b: rgba(255,255,255,.02); /* --- MODE 3 of 4: LIGHT + GLASS, deltas only ----------------------------- Four things together make the frost read, and dropping any one flattens it: translucent plates, a real backdrop blur on TOP-LEVEL plates and the app bar only, a luminous edge carried IN THE SHADOW TOKEN so nothing reflows, and a stronger wash to see through. --inset carries NO backdrop-filter: nesting blur inside blur produced compositing artifacts, so it is alpha alone. The wash strength is load-bearing and is not a free parameter. The handoff's --ink3 #525c7d lands at 4.5006:1 on the plate composited over the peak of the blue wash — a six-ten-thousandth margin, which is how you can tell the number was solved rather than chosen. Re-run the audit if you touch either the plate alpha or the wash; every mono metadata label depends on it. --sky IS NOT A TEXT GROUND, and that is a rule rather than a value. The blue wash peaks at Y 0.415, a mid-blue: --ink2 measures 3.25:1 on it and --ink3 2.92:1, and the wash cannot be weakened enough to change that without destroying it (--ink3 would need the alphas cut to 38%). So in glass mode sub-primary ink sits on a plate, an inset, or the --chrome scrim, and the page head — the one block the handoff leaves on the bare frame — takes the scrim exactly as the app bar above it does. --ink1 is the only ink asserted on the bare sky (7.81:1 light, 6.43:1 dark) and the only one that belongs there. */ --lg-page: radial-gradient(30vw 30vw at 6% 2%, rgba(124,92,255,.13), transparent 60%), radial-gradient(28vw 28vw at 94% 12%, rgba(167,139,250,.13), transparent 60%), radial-gradient(32vw 32vw at 80% 84%, rgba(127,111,224,.10), transparent 60%), linear-gradient(180deg, #e9e6f4, #f1eef8); --lg-page-base: #e9e6f4; --lg-sky: radial-gradient(40vw 40vw at 14% 6%, rgba(36,52,222,.38), transparent 58%), radial-gradient(34vw 34vw at 86% 10%, rgba(123,107,232,.42), transparent 58%), radial-gradient(44vw 44vw at 76% 92%, rgba(18,191,160,.40), transparent 58%), radial-gradient(30vw 30vw at 46% 52%, rgba(240,171,252,.24), transparent 60%), linear-gradient(180deg, #eaeefb, #eff8f6); --lg-chrome: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.66)); --lg-plate: rgba(255,255,255,.50); --lg-inset: rgba(255,255,255,.34); --lg-recess: rgba(255,255,255,.42); --lg-ink3: #4f4864; --lg-ink2: #4a4360; --lg-green: #076151; --lg-amber: #794f04; --lg-crit: #983027; --lg-check-bg: #076151; --lg-blur: blur(24px) saturate(180%); --lg-blur-chrome: blur(30px) saturate(180%); --lg-shadow: inset 0 1px 0 rgba(255,255,255,.92), inset 0 0 0 1px rgba(255,255,255,.55), 0 1px 1px rgba(16,26,64,.05), 0 18px 44px -20px rgba(16,26,64,.30); /* --- MODE 4 of 4: DARK + GLASS, deltas only ------------------------------ */ --dg-page: radial-gradient(34vw 34vw at 6% 3%, rgba(124,92,255,.26), transparent 62%), radial-gradient(30vw 30vw at 94% 16%, rgba(240,171,252,.18), transparent 62%), radial-gradient(36vw 36vw at 80% 88%, rgba(94,234,212,.16), transparent 62%), linear-gradient(180deg, #0e0d19, #0b0a14); --dg-page-base: #0b0a14; --dg-sky: radial-gradient(48vw 48vw at 12% 8%, rgba(124,92,255,.58), transparent 60%), radial-gradient(42vw 42vw at 88% 14%, rgba(240,171,252,.38), transparent 60%), radial-gradient(52vw 52vw at 78% 96%, rgba(94,234,212,.34), transparent 60%), linear-gradient(180deg, #0c0b16, #07070c); --dg-chrome: linear-gradient(180deg, rgba(11,10,20,.72), rgba(11,10,20,.46)); --dg-plate: rgba(20,18,32,.62); --dg-inset: rgba(38,34,52,.36); --dg-recess: rgba(8,7,15,.52); --dg-ink3: #b4afb6; --dg-amber: #ddb467; --dg-crit: #e7a9a3; --dg-amber-wash: rgba(203,159,65,.10); --dg-ink2: #c1bcc3; --dg-blur: blur(24px) saturate(180%); --dg-blur-chrome: blur(30px) saturate(180%); --dg-shadow: inset 0 1px 0 rgba(255,255,255,.20), inset 0 0 0 1px rgba(255,255,255,.09), 0 22px 50px -24px rgba(0,0,0,.70); } /* ============================================================================= * LAYER 1 — THE FOUR MODES, ACTIVATED. References only, no values. * ----------------------------------------------------------------------------- * Set data-theme and data-surface on the SAME element (the app root): * `[data-surface="glass"]` reads its theme from the element it is written on, * not from an ancestor. * * Surface has no auto path on purpose. An absent `data-surface` resolves to * SOLID, and glass is the default the app WRITES rather than the default the * cascade assumes — so a screen nobody has uplifted yet keeps opaque plates * until something asks for glass. `prefers-reduced-transparency: reduce` puts a * glass root back on the solid values in LAYER 5. * ========================================================================== */ /* --- MODE 1: light + solid. Also the ground state, and the nested-preview selector: a declaration on the element always beats an inherited value, so this one block serves both the default root and a light island inside a dark one. ---------------------------------------------------------- */ :root, [data-theme="light"] { --page: var(--l-page); --page-base: var(--l-page-base); --sky: var(--l-sky); --chrome: var(--l-chrome); --plate: var(--l-plate); --inset: var(--l-inset); --recess: var(--l-recess); --ink1: var(--l-ink1); --ink2: var(--l-ink2); --ink3: var(--l-ink3); --bell: var(--l-bell); --acc: var(--l-acc); --acc-deep: var(--l-acc-deep); --on-acc: var(--l-on-acc); --tint-acc: var(--l-tint-acc); --acc-quiet: var(--l-acc-quiet); --green: var(--l-green); --green-fill: var(--l-green-fill); --green-tint: var(--l-green-tint); --amber: var(--l-amber); --amber-fill: var(--l-amber-fill); --amber-tint: var(--l-amber-tint); --amber-wash: var(--l-amber-wash); --crit: var(--l-crit); --crit-fill: var(--l-crit-fill); --crit-tint: var(--l-crit-tint); --check-bg: var(--l-check-bg); --check-ink: var(--l-check-ink); --quiet: var(--l-quiet); --track: var(--l-track); --rule: var(--l-rule); --rule-soft: var(--l-rule-soft); --rule-firm: var(--l-rule-firm); --shadow: var(--l-shadow); --blur: var(--l-blur); --blur-chrome: var(--l-blur-chrome); --grad: var(--l-grad); --on-grad: var(--l-on-grad); --frame: var(--l-frame); --stripe-p: var(--l-stripe-p); --stripe-g: var(--l-stripe-g); --stripe-am: var(--l-stripe-am); --stripe-n: var(--l-stripe-n); --stripe-b: var(--l-stripe-b); /* Solid mirrors, so LAYER 5 can put a glass root back without knowing which theme it is in and without a second copy of either palette. */ --solid-page: var(--l-page); --solid-page-base: var(--l-page-base); --solid-sky: var(--l-sky); --solid-chrome: var(--l-chrome); --solid-plate: var(--l-plate); --solid-inset: var(--l-inset); --solid-recess: var(--l-recess); --solid-ink2: var(--l-ink2); --solid-ink3: var(--l-ink3); --solid-green: var(--l-green); --solid-amber: var(--l-amber); --solid-crit: var(--l-crit); --solid-check-bg: var(--l-check-bg); --solid-amber-wash: var(--l-amber-wash); --solid-shadow: var(--l-shadow); --solid-blur-chrome: var(--l-blur-chrome); color-scheme: light; } /* --- MODE 2: dark + solid, chosen explicitly -------------------------------- */ :root[data-theme="dark"], [data-theme="dark"] { --page: var(--d-page); --page-base: var(--d-page-base); --sky: var(--d-sky); --chrome: var(--d-chrome); --plate: var(--d-plate); --inset: var(--d-inset); --recess: var(--d-recess); --ink1: var(--d-ink1); --ink2: var(--d-ink2); --ink3: var(--d-ink3); --bell: var(--d-bell); --acc: var(--d-acc); --acc-deep: var(--d-acc-deep); --on-acc: var(--d-on-acc); --tint-acc: var(--d-tint-acc); --acc-quiet: var(--d-acc-quiet); --green: var(--d-green); --green-fill: var(--d-green-fill); --green-tint: var(--d-green-tint); --amber: var(--d-amber); --amber-fill: var(--d-amber-fill); --amber-tint: var(--d-amber-tint); --amber-wash: var(--d-amber-wash); --crit: var(--d-crit); --crit-fill: var(--d-crit-fill); --crit-tint: var(--d-crit-tint); --check-bg: var(--d-check-bg); --check-ink: var(--d-check-ink); --quiet: var(--d-quiet); --track: var(--d-track); --rule: var(--d-rule); --rule-soft: var(--d-rule-soft); --rule-firm: var(--d-rule-firm); --shadow: var(--d-shadow); --blur: var(--d-blur); --blur-chrome: var(--d-blur-chrome); --grad: var(--d-grad); --on-grad: var(--d-on-grad); --frame: var(--d-frame); --stripe-p: var(--d-stripe-p); --stripe-g: var(--d-stripe-g); --stripe-am: var(--d-stripe-am); --stripe-n: var(--d-stripe-n); --stripe-b: var(--d-stripe-b); --solid-page: var(--d-page); --solid-page-base: var(--d-page-base); --solid-sky: var(--d-sky); --solid-chrome: var(--d-chrome); --solid-plate: var(--d-plate); --solid-inset: var(--d-inset); --solid-recess: var(--d-recess); --solid-ink2: var(--d-ink2); --solid-ink3: var(--d-ink3); --solid-green: var(--d-green); --solid-amber: var(--d-amber); --solid-crit: var(--d-crit); --solid-check-bg: var(--d-check-bg); --solid-amber-wash: var(--d-amber-wash); --solid-shadow: var(--d-shadow); --solid-blur-chrome: var(--d-blur-chrome); color-scheme: dark; } /* --- MODE 2: dark + solid, followed from the OS ---------------------------- This is the `auto` half of center.html's existing three-state control. The guard is `:not([data-theme="light"])` rather than `:not([data-theme])` so an explicit light choice still wins under a dark OS. Identical to the block above, reference for reference; the test asserts it. ---------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --page: var(--d-page); --page-base: var(--d-page-base); --sky: var(--d-sky); --chrome: var(--d-chrome); --plate: var(--d-plate); --inset: var(--d-inset); --recess: var(--d-recess); --ink1: var(--d-ink1); --ink2: var(--d-ink2); --ink3: var(--d-ink3); --bell: var(--d-bell); --acc: var(--d-acc); --acc-deep: var(--d-acc-deep); --on-acc: var(--d-on-acc); --tint-acc: var(--d-tint-acc); --acc-quiet: var(--d-acc-quiet); --green: var(--d-green); --green-fill: var(--d-green-fill); --green-tint: var(--d-green-tint); --amber: var(--d-amber); --amber-fill: var(--d-amber-fill); --amber-tint: var(--d-amber-tint); --amber-wash: var(--d-amber-wash); --crit: var(--d-crit); --crit-fill: var(--d-crit-fill); --crit-tint: var(--d-crit-tint); --check-bg: var(--d-check-bg); --check-ink: var(--d-check-ink); --quiet: var(--d-quiet); --track: var(--d-track); --rule: var(--d-rule); --rule-soft: var(--d-rule-soft); --rule-firm: var(--d-rule-firm); --shadow: var(--d-shadow); --blur: var(--d-blur); --blur-chrome: var(--d-blur-chrome); --grad: var(--d-grad); --on-grad: var(--d-on-grad); --frame: var(--d-frame); --stripe-p: var(--d-stripe-p); --stripe-g: var(--d-stripe-g); --stripe-am: var(--d-stripe-am); --stripe-n: var(--d-stripe-n); --stripe-b: var(--d-stripe-b); --solid-page: var(--d-page); --solid-page-base: var(--d-page-base); --solid-sky: var(--d-sky); --solid-chrome: var(--d-chrome); --solid-plate: var(--d-plate); --solid-inset: var(--d-inset); --solid-recess: var(--d-recess); --solid-ink2: var(--d-ink2); --solid-ink3: var(--d-ink3); --solid-green: var(--d-green); --solid-amber: var(--d-amber); --solid-crit: var(--d-crit); --solid-check-bg: var(--d-check-bg); --solid-amber-wash: var(--d-amber-wash); --solid-shadow: var(--d-shadow); --solid-blur-chrome: var(--d-blur-chrome); color-scheme: dark; } } /* --- MODE 3: light + glass -------------------------------------------------- */ [data-surface="glass"] { --page: var(--lg-page); --page-base: var(--lg-page-base); --sky: var(--lg-sky); --chrome: var(--lg-chrome); --plate: var(--lg-plate); --inset: var(--lg-inset); --recess: var(--lg-recess); --ink3: var(--lg-ink3); --ink2: var(--lg-ink2); --green: var(--lg-green); --amber: var(--lg-amber); --crit: var(--lg-crit); --check-bg: var(--lg-check-bg); --blur: var(--lg-blur); --blur-chrome: var(--lg-blur-chrome); --shadow: var(--lg-shadow); } /* --- MODE 4: dark + glass, chosen explicitly -------------------------------- */ :root[data-theme="dark"][data-surface="glass"], [data-theme="dark"][data-surface="glass"] { --page: var(--dg-page); --page-base: var(--dg-page-base); --sky: var(--dg-sky); --chrome: var(--dg-chrome); --plate: var(--dg-plate); --inset: var(--dg-inset); --recess: var(--dg-recess); --ink3: var(--dg-ink3); --amber: var(--dg-amber); --crit: var(--dg-crit); --amber-wash: var(--dg-amber-wash); --ink2: var(--dg-ink2); --blur: var(--dg-blur); --blur-chrome: var(--dg-blur-chrome); --shadow: var(--dg-shadow); } /* --- MODE 4: dark + glass, followed from the OS ---------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-surface="glass"] { --page: var(--dg-page); --page-base: var(--dg-page-base); --sky: var(--dg-sky); --chrome: var(--dg-chrome); --plate: var(--dg-plate); --inset: var(--dg-inset); --recess: var(--dg-recess); --ink3: var(--dg-ink3); --amber: var(--dg-amber); --crit: var(--dg-crit); --amber-wash: var(--dg-amber-wash); --ink2: var(--dg-ink2); --blur: var(--dg-blur); --blur-chrome: var(--dg-blur-chrome); --shadow: var(--dg-shadow); } } /* ============================================================================= * LAYER 1b — THE ACCENT ON THE DARK GROUND. The held dark palette names one * accent, the violet, so a member who chose gold or green got violet the * moment the landing skin arrived (founder, 2026-09-17: "number 8 should work * with the new theme, gold, green, purple"). On the dark ground the accent * ramp kc-theme.css already carries per data-accent is what the mapped tokens * take: the same slot names the skin reads, filled from --acc-300..700 and * the ramp's own ink. Purple is left to the held palette, whose gradient is * the landing's exact pair. Light keeps the violet: its ramp is the only one * measured on a light ground (SECTION G). * ========================================================================== */ :root[data-theme="dark"][data-accent="gold"], [data-theme="dark"][data-accent="gold"], :root[data-theme="dark"][data-accent="green"], [data-theme="dark"][data-accent="green"] { --acc: var(--acc-300); --acc-deep: var(--acc-500); --grad: linear-gradient(150deg, var(--acc-300), var(--acc-600)); --frame: linear-gradient(135deg, var(--acc-200), var(--acc-600)); } /* the inks and tints are literals (kc-theme.css SECTIONS B and C): LAYER 4 aliases --acc-ink to --on-acc and --acc-tint to --tint-acc, so pointing either back at the ramp would be a cycle */ :root[data-theme="dark"][data-accent="gold"], [data-theme="dark"][data-accent="gold"] { --on-acc: #17120a; --on-grad: #17120a; --tint-acc: rgba(203,159,65,.12); --acc-quiet: rgba(203,159,65,.10); } :root[data-theme="dark"][data-accent="green"], [data-theme="dark"][data-accent="green"] { --on-acc: #0b1a13; --on-grad: #0b1a13; --tint-acc: rgba(82,184,140,.12); --acc-quiet: rgba(82,184,140,.10); } /* ============================================================================= * LAYER 2 — `clear` INVERTS THE MAP * ----------------------------------------------------------------------------- * The new names alias the register's own measured palette. --text, --surface, * --bg and the accent ramp are NOT redeclared here, so `clear` ships exactly the * numbers kc-theme.css SECTION F computed and tests/contrast.test.js still * measures 9.16-19.80:1 from the same three files. * * Two structural notes: * - `clear` has THREE measured grounds and no fourth, so --recess collapses * onto --inset rather than borrowing --ink-900. --ink-900 is the dark slab * that carries the 21 hard-coded `color:#fff` chips in center.html; it stays * dark in every theme and is never a recess in this register. * - GLASS IS NEUTRALISED. Not weakened — removed. A high-legibility register * cannot put text over a variable ground, so in `clear` a glass root gets * opaque plates, no blur, no wash and no shadow. The axis still SET, it just * resolves to the same palette either way, which is why `clear` measures * identically in all four theme x surface modes. * ========================================================================== */ :root[data-presentation="clear"]:not([data-uplift="off"]), [data-presentation="clear"]:not([data-uplift="off"]) { --page: var(--bg); --page-base: var(--bg); --sky: linear-gradient(var(--bg), var(--bg)); --chrome: var(--chrome-bg); --plate: var(--surface); --inset: var(--surface-2); --recess: var(--surface-2); --ink1: var(--text); --ink2: var(--text-2); --ink3: var(--text-3); --bell: var(--text-3); --acc: var(--blue-fg); --acc-deep: var(--blue-600); --on-acc: var(--acc-ink); --tint-acc: var(--blue-100); --acc-quiet: var(--blue-050); --green: var(--teal-500); --green-fill: var(--teal-500); --green-tint: var(--teal-100); --amber: var(--amber-500); --amber-fill: var(--amber-500); --amber-tint: var(--amber-100); --amber-wash: var(--amber-100); --crit: var(--rose-500); --crit-fill: var(--rose-500); --crit-tint: var(--rose-100); /* Ink on the tick disc is the PAGE ground in this register, which is the one value that is guaranteed to be the opposite end of the ramp from any semantic fill in both the dark and the light `clear` palette. */ --check-bg: var(--teal-500); --check-ink: var(--bg); --quiet: var(--surface-2); --track: var(--border); --rule: var(--border); --rule-soft: var(--border); --rule-firm: var(--border-strong); --shadow: none; --blur: none; --blur-chrome: none; /* No luminance ramps in this register: SECTION F's stated invariant. */ --grad: linear-gradient(var(--acc-fill), var(--acc-fill)); --on-grad: var(--acc-ink); --frame: linear-gradient(var(--border-strong), var(--border-strong)); --stripe-p: var(--surface-2); --stripe-g: var(--surface-2); --stripe-am: var(--surface-2); --stripe-n: var(--surface-2); --stripe-b: var(--surface-2); /* A LIVE DEFECT IN THE SHIPPING PRODUCT, found by pointing the new light axis at this register and fixed here because this is where `clear`'s map lives. kc-aurora-skin.css gives `clear` a responsive content panel written as a LITERAL rather than as a derivation: --au-content-plate: color-mix(in srgb, black 91%, white); --au-content-inset: color-mix(in srgb, black 86%, white); Those resolve to #171717 and #242424, which happen to equal `clear`'s dark --surface and --surface-2 — so in dark they are a no-op and nobody noticed. Under kc-theme.css SECTION G's `data-scheme="light"` gate, which SHIPS TODAY, --text becomes #000000 and the panel stays near-black: Ask's primary panel copy measures 1.17:1 and its metadata 1.07:1. This is not caused by data-theme; data-theme is only what made it visible. Derived from the register's own measured grounds, it is correct in both. */ --au-content-plate: var(--surface); --au-content-inset: var(--surface-2); --au-content-tint: var(--blue-100); --au-content-edge: var(--border-strong); --au-content-accent: var(--blue-fg); --au-content-on-accent: var(--acc-ink); --solid-page: var(--bg); --solid-page-base: var(--bg); --solid-sky: linear-gradient(var(--bg), var(--bg)); --solid-chrome: var(--chrome-bg); --solid-plate: var(--surface); --solid-inset: var(--surface-2); --solid-recess: var(--surface-2); --solid-ink3: var(--text-3); --solid-ink2: var(--text-2); --solid-amber-wash: var(--amber-100); --solid-green: var(--teal-500); --solid-amber: var(--amber-500); --solid-crit: var(--rose-500); --solid-check-bg: var(--teal-500); --solid-shadow: none; --solid-blur-chrome: none; } /* ============================================================================= * LAYER 3 — `clear` + `data-theme="light"`, delegated, never re-derived * ----------------------------------------------------------------------------- * SECTION G of kc-theme.css already ships a measured light palette for `clear` * behind `data-scheme="light"`, and calls itself "a fence with one gate open, * not a light mode": only the purple accent has been measured. This block opens * the SAME gate from the new axis by referencing the same --lt-* values. It * invents no colour, so the two axes cannot drift apart, and it keeps the fence * exactly where SECTION G put it — `clear` + light + gold or green stays dark, * because those two combinations have never been measured on a light ground. * * Precedence, stated rather than discovered: this block is (0,3,0) and SECTION * G's `data-scheme` gate is (0,4,0), so if a member somehow has * data-scheme="light" and data-theme="dark" at once, `data-scheme` wins. * data-scheme is the older, narrower, clear-only control; data-theme is the new * app-wide one. kc-boot should write both or neither. * ========================================================================== */ :root[data-presentation="clear"][data-theme="light"][data-accent="purple"], [data-presentation="clear"][data-theme="light"][data-accent="purple"] { --acc-200: var(--lt-acc-200) !important; --acc-300: var(--lt-acc-300) !important; --acc-400: var(--lt-acc-400) !important; --acc-500: var(--lt-acc-500) !important; --acc-600: var(--lt-acc-600) !important; --acc-700: var(--lt-acc-700) !important; --acc-ink: var(--lt-acc-ink) !important; --acc-tint: var(--lt-acc-tint) !important; --acc-tint-2: var(--lt-acc-tint-2) !important; --acc-line: var(--lt-acc-line) !important; --acc-ground: var(--lt-acc-ground) !important; --acc-hero: var(--lt-acc-hero) !important; --sem-good: var(--lt-sem-good) !important; --sem-good-tint: var(--lt-sem-good-tint) !important; --sem-note: var(--lt-sem-note) !important; --sem-note-tint: var(--lt-sem-note-tint) !important; --sem-alert: var(--lt-sem-alert) !important; --sem-alert-tint: var(--lt-sem-alert-tint) !important; } :root[data-presentation="clear"][data-theme="light"][data-accent="purple"], [data-presentation="clear"][data-theme="light"][data-accent="purple"] { --bg: var(--lt-bg) !important; --surface: var(--lt-surface) !important; --surface-2: var(--lt-surface-2) !important; --border: var(--lt-border) !important; --border-strong: var(--lt-border-strong) !important; --text: var(--lt-text) !important; --text-2: var(--lt-text-2) !important; --text-3: var(--lt-text-3) !important; /* SECTION G's map, and the part a palette swap would miss: on a light ground the hover stop goes DARKER, not lighter. */ --blue-500: var(--acc-400) !important; --acc-fill-hover: var(--acc-400) !important; --plate-inset: var(--lt-plate-inset) !important; --plate-rule: var(--lt-plate-rule) !important; --diagram-panel: var(--lt-diagram-panel) !important; color-scheme: light; } /* ============================================================================= * LAYER 4 — THE COMPATIBILITY MAP * ----------------------------------------------------------------------------- * vivid and focused only. `clear` is excluded because LAYER 2 runs the map the * other way for it. `[data-uplift="off"]` disables the whole map and restores * the shipping Aurora palette, which is the escape hatch for a surface that * turns out to need it. * * !important is required and carries no other meaning: kc-theme.css declares * these per register with the flag, and kc-aurora-skin.css re-declares them with * the flag again, so a later sheet at equal specificity does not win on its own. * * FOUR THINGS THAT ARE DELIBERATELY NOT MAPPED, each for a reason that would * cost legibility if it were ignored: * * --ink-900 / --ink-800 / --ink-700 the dark slab. 21 chips in center.html * and m.html hard-code `color:#fff` on it. It stays dark in LIGHT theme * too, because a #f1f2fe recess under white text is a blank chip. * --au-on-grad maps to --on-grad, NOT to --acc-ink. * kc-aurora-skin.css defines it as var(--acc-ink), and --acc-ink becomes * #ffffff in light theme — white ink on the fixed lilac-to-mint gradient * is 1.16:1. The gradient is identical in every mode, so its ink must be * too, and it is pinned here. * --border stays transparent. Aurora's borderless * treatment keeps the pixel so nothing reflows; definition comes from * --shadow, which in glass mode IS the luminous edge. * --acc-ring / --ring re-pointed at --acc-deep rather than * the accent ramp, because the ramp is solved for a dark ground and a * dark-ground ring on a light page is the one control a member cannot * find when they need it most. * ========================================================================== */ :root:not([data-presentation="clear"]):not([data-uplift="off"]), :not([data-presentation="clear"]):not([data-uplift="off"])[data-theme], :not([data-presentation="clear"]):not([data-uplift="off"])[data-surface] { /* --- grounds --------------------------------------------------------- */ --bg: var(--page-base) !important; --bg-warm: var(--page-base) !important; --surface: var(--plate) !important; --surface-2: var(--inset) !important; /* --- ink ------------------------------------------------------------- */ --text: var(--ink1) !important; --text-2: var(--ink2) !important; --text-3: var(--ink3) !important; /* --- structure -------------------------------------------------------- */ --border: transparent !important; --border-strong: var(--rule-firm) !important; --shadow-sm: var(--shadow) !important; --shadow-md: var(--shadow) !important; --shadow-lg: var(--shadow) !important; --ring: 0 0 0 2px var(--plate), 0 0 0 5px var(--acc-deep) !important; --acc-ring: var(--acc-deep) !important; /* The lesson-cover plate. A white alpha lift is the one paint a light ground cannot use, so it becomes the recess token, which is a real value in both themes. */ --plate-inset: var(--recess) !important; --plate-rule: var(--rule-soft) !important; /* --- accent ----------------------------------------------------------- */ /* --acc-tint is the ONE handoff name that could not be kept: kc-theme.css already owns it as the accent ramp's OPAQUE tint panel (#2f1d48 on purple), a different value shape for a similar role, declared !important per accent. The uplift's translucent tint is therefore --tint-acc, and --acc-tint is re-pointed at it here so any sheet that already reads the old name follows. Left alone, --au-sel resolved to #2f1d48 under a light theme and primary ink on a selected answer row measured 1.17:1. */ --acc-tint: var(--tint-acc) !important; --acc-tint-2: var(--acc-quiet) !important; --blue-600: var(--acc-deep) !important; --blue-500: var(--acc) !important; --blue-fg: var(--acc) !important; --blue-100: var(--tint-acc) !important; --blue-050: var(--acc-quiet) !important; --violet-500: var(--acc) !important; --violet-100: var(--tint-acc) !important; --acc-fill: var(--acc-deep) !important; --acc-fill-hover: var(--acc) !important; --acc-ink: var(--on-acc) !important; /* --- semantics: the -500 stops are FILLS, the semantic tokens are INK --- */ --teal-500: var(--green-fill) !important; --teal-100: var(--green-tint) !important; --amber-500: var(--amber-fill) !important; --amber-100: var(--amber-tint) !important; --rose-500: var(--crit-fill) !important; --rose-100: var(--crit-tint) !important; /* --- chrome ----------------------------------------------------------- */ --chrome-bg: var(--chrome) !important; --hero-grad: var(--sky) !important; --amber-grad: var(--sky) !important; --diagram-wash: transparent !important; --diagram-panel: linear-gradient(180deg, var(--inset), var(--plate)) !important; /* --- Aurora component tokens ------------------------------------------ The five member surfaces read these directly. Re-pointing them is what lets a screen that has not been uplifted yet render correctly in all four modes; tools/contrast_audit.mjs re-measures the ENTIRE legacy PAIRS manifest through this map in every mode to prove it. */ --au-ground: linear-gradient(var(--page-base), var(--page-base)) !important; --au-sky: var(--sky) !important; --au-plate: var(--plate) !important; --au-recess: var(--recess) !important; --au-ink-1: var(--ink1) !important; --au-ink-2: var(--ink2) !important; --au-ink-3: var(--ink3) !important; --au-acc-300: var(--acc) !important; --au-acc-500: var(--acc-deep) !important; --au-green-500: var(--green-fill) !important; --au-green-300: var(--green) !important; --au-critical: var(--crit) !important; --au-critical-tint: var(--crit-tint) !important; --au-caution: var(--amber) !important; --au-caution-wash: linear-gradient(transparent, transparent) !important; --au-caution-ground: var(--amber-wash) !important; --au-grad: var(--grad) !important; --au-grad-text: var(--grad) !important; --au-grad-frame: var(--frame) !important; --au-on-grad: var(--on-grad) !important; /* pinned — see the note above */ --au-wash-purple: linear-gradient(var(--acc-quiet), var(--acc-quiet)) !important; --au-wash-green: linear-gradient(var(--green-tint), var(--green-tint)) !important; --au-tint: var(--tint-acc) !important; --au-tint-sel: var(--tint-acc) !important; --au-tint-quiet: var(--quiet) !important; --au-tint-hover: var(--quiet) !important; --au-idle: var(--quiet) !important; --au-sel: var(--tint-acc) !important; --au-lilac: var(--acc) !important; --au-ring: var(--rule-firm) !important; --au-dot: var(--acc-deep) !important; --au-input-rule: var(--rule-firm) !important; --au-meter-off: var(--track) !important; --au-rule: linear-gradient(90deg, transparent, var(--rule) 20%, var(--rule) 80%, transparent) !important; --au-rule-firm: linear-gradient(90deg, transparent, var(--rule-firm) 20%, var(--rule-firm) 80%, transparent) !important; --au-rule-bar: linear-gradient(90deg, transparent, var(--rule) 15%, var(--rule) 85%, transparent) !important; /* The responsive content panel. Its shipping definition is a color-mix of --surface with the accent; through glass that would mix a translucent plate and produce a ground nothing can be measured against. Pointed straight at the uplift grounds instead. */ --au-content-plate: var(--plate) !important; --au-content-inset: var(--inset) !important; --au-content-tint: var(--tint-acc) !important; --au-content-edge: var(--rule-firm) !important; --au-content-accent: var(--acc) !important; --au-content-on-accent: var(--on-acc) !important; /* --- radii, kept as the handoff specifies ----------------------------- */ --au-r-frame: 19px; --au-r-card: 18px; --au-r-small: 14px; --au-r-pill: 99px; } /* ============================================================================= * LAYER 5 — prefers-reduced-transparency * ----------------------------------------------------------------------------- * Solid mode is the same design with opaque plates, --blur:none and the plain * shadow. Wiring it as an override of --solid-* references rather than a second * palette means there is exactly one place each value is written, so the two * modes cannot drift. * * The @media wrapper is invisible to tools/contrast_audit.mjs, which is correct * and deliberate: the audit measures the GLASS path, which is the stricter of * the two, and LAYER 1 measures the solid palettes on their own. There is no * third palette here to leave unmeasured — this block restores the same * --solid-* references the solid modes are built from, and a test asserts that * every token a glass block overrides appears here. * ========================================================================== */ @media (prefers-reduced-transparency: reduce) { /* !important, and it is the only place in this file where the flag means something other than "beat kc-theme.css". A glass block reaches (0,3,0) — :root:not([data-theme="light"])[data-surface="glass"] — and this block cannot outrank that on specificity without becoming unreadable. A user who has asked their operating system for less transparency outranks a design decision, so it says so. */ [data-surface="glass"] { --page: var(--solid-page) !important; --page-base: var(--solid-page-base) !important; --sky: var(--solid-sky) !important; --chrome: var(--solid-chrome) !important; --plate: var(--solid-plate) !important; --inset: var(--solid-inset) !important; --recess: var(--solid-recess) !important; --ink3: var(--solid-ink3) !important; --ink2: var(--solid-ink2) !important; --amber-wash: var(--solid-amber-wash) !important; --green: var(--solid-green) !important; --amber: var(--solid-amber) !important; --crit: var(--solid-crit) !important; --check-bg: var(--solid-check-bg) !important; --shadow: var(--solid-shadow) !important; --blur: none !important; --blur-chrome: var(--solid-blur-chrome) !important; } } /* ============================================================================= * LAYER 6 — the one paint, and the reason it is here rather than in --bg * ----------------------------------------------------------------------------- * kc-theme.css:992 sets `html, body { background: var(--bg) !important }`. * --bg has to stay a COLOUR (it is a gradient colour stop at kc-theme.css:1196 * and a box-shadow layer at kc-theme.css:573), so the canvas wash is painted * from --page here instead, at equal specificity and later in the cascade. * `background-color` is set from --page-base underneath so a browser that * cannot paint the gradient still gets the right ground rather than white. * ========================================================================== */ html, body { background: var(--page-base) !important; /* fallback: a browser that cannot parse the wash still gets the right ground, never white */ background: var(--page) !important; color: var(--ink1) !important; }