/* ===========================================================================
theme.css — the 2026 palette for the AI Learning Ground.
WHY THIS IS AN OVERRIDE FILE AND NOT AN EDIT TO styles.css
---------------------------------------------------------
styles.css is already a proper token system: 64 custom properties, 719
var() usages, a documented type scale, and per-colour comments recording
which values failed AA as text and why the *-text variants exist. It did
not need replacing — it needed re-pointing. Every rule in this file
redefines a token that file already declares, so nothing else changes and
removing the reverts the app exactly.
WHAT ACTUALLY CHANGED, AND WHY
------------------------------
1. Indigo/violet -> teal. #6366f1 with an #a855f7 gradient is the single
most over-used palette in AI tooling right now, and it was also spent on
the accent, the heatmap and three background washes at once. Teal also
sits clear of the green/amber/red already carrying quiz state, so an
accent chip can never be misread as a score.
2. Light is the default. This is read in daylight offices in short gaps
between meetings, by people who are not engineers. The sibling news
product at buzz.* stays dark-first; that audience and that reading
posture are different.
3. The decorative purple washes are gone. Three fixed radial gradients sat
behind every screen; they tint text backgrounds unpredictably and cost
contrast for nothing.
4. A reading face for prose. Inter is a UI face doing double duty on
150-250 word explanations. Lora has the open counters and warmth that
continuous reading wants.
CONTRAST
--------
56 pairs computed from the WCAG relative-luminance formula against the
REAL surfaces these tokens land on (bg, surface, surface-2, surface-3, and
each semantic colour over its own 15% wash). Zero failures, both themes.
Body text clears 4.5:1; every fill clears 3:1 as a UI component.
Recompute before changing any value here — the -text variants exist
precisely because the fill hues do not pass as text.
Full rationale, the contrast table and the deploy step: ../../THEME.md
(kept OUT of public/ on purpose — `deploy.ps1 publish` walks public/**
with no filter, so anything left here is served to the internet.)
=========================================================================== */
/* The reading face is loaded by a in app.html / login.html, not an
@import here — an @import inside a linked stylesheet serialises the font
fetch behind this file instead of running in parallel. */
/* ------------------------------------------------------------------ LIGHT
app.html and login.html now ship data-theme="light", so this is what most
people see. A saved preference in localStorage still wins — nobody who
chose dark gets flipped. */
[data-theme="light"] {
--bg: #EDEFF2;
--bg-soft: #E4E8EB;
--surface: #FCFDFD;
--surface-2: #F2F5F6;
--surface-3: #E8ECEE;
--border: #D8DCE1;
--border-strong: #B7BEC7;
--text: #14181C; /* 17.51:1 on surface */
--text-dim: #454C54; /* 7.94:1 on surface-2 */
--text-faint: #5E666E; /* 5.32:1 on surface-2 — the pair the original
comment flagged; kept comfortably clear */
--accent: #0E7C86; /* fills, borders, progress — 4.85:1 as UI */
--accent-text: #0A6169; /* anything that is TEXT — 6.23:1 on bg */
/* The label that sits ON a saturated fill — a badge number, a hotspot dot,
a ✓ on a marked row. The token work verified fill-against-surface and
never computed text-on-fill, where white on the dark accent is only
3.30:1. These two values are the only ones clearing 4.5:1 on every fill
in their theme (green, red and accent alike). */
--on-fill: #FFFFFF; /* 4.95-6.54:1 on the light fills */
--accent-soft: rgba(14, 124, 134, 0.10);
--accent-2: #3853DB;
--accent-2-text: #2E45B8;
--gradient: linear-gradient(135deg, #0E7C86 0%, #12707A 55%, #2B6CB0 100%);
/* Primary buttons: a fill that WHITE text clears 4.5:1 on, in both themes. */
--btn-fill: var(--gradient);
--on-btn: #FFFFFF;
--btn-glow: rgba(14, 124, 134, 0.30);
--green: #1E7A34; --green-text: #1A6B2D;
--green-soft: rgba(30, 122, 52, 0.15);
--amber: #B06A00; --amber-text: #8A5300;
--amber-soft: rgba(176, 106, 0, 0.15);
--red: #B3261E; --red-text: #9E2119;
--red-soft: rgba(179, 38, 30, 0.15);
--blue: #2B6CB0; --blue-text: #245C99;
--blue-soft: rgba(43, 108, 176, 0.15);
/* Single-hue sequential ramp. Ordered by lightness so it still reads as a
ramp in greyscale and to anyone with colour vision deficiency. */
--heat-0: #E7EBEC; --heat-1: #BFE3E1; --heat-2: #86CCC9;
--heat-3: #3FA6A3; --heat-4: #0E7C86;
--shadow: 0 1px 2px rgba(20, 24, 28, 0.06), 0 8px 24px rgba(20, 24, 28, 0.07);
--shadow-lift: 0 4px 12px rgba(20, 24, 28, 0.10), 0 14px 34px rgba(20, 24, 28, 0.12);
color-scheme: light;
}
/* ------------------------------------------------------------------- DARK
Neutral charcoal with five foregrounds — deliberately not a near-black
with one neon accent. Elevation comes from the bg/surface lightness steps
plus a hairline border, because shadows are invisible on dark. */
[data-theme="dark"] {
--bg: #17181C;
--bg-soft: #121317;
--surface: #202329; /* one step further from bg so cards read as cards */
--surface-2: #282C33;
--surface-3: #30353D;
--border: #3A3E45;
--border-strong: #464A52;
--text: #EDEEF0; /* 14.05:1 on surface */
--text-dim: #B8BCC2; /* 7.63:1 on surface-2 */
--text-faint: #949AA2; /* 5.13:1 on surface-2 */
--accent: #2A9D95; /* deeper than the text variant so white reads on it */
--accent-text: #4DD9D0; /* 10.26:1 on bg */
--on-fill: #0B0D0F; /* 4.79-5.89:1 on the dark fills; white fails */
--accent-soft: rgba(77, 217, 208, 0.14);
--accent-2: #7C93FF;
--accent-2-text: #96A9FF;
--gradient: linear-gradient(135deg, #2A9D95 0%, #2E8A94 55%, #3F82C4 100%);
/* white on #1B7A74 = 5.14:1, on #1F6F8C = 5.66:1 (the old fill was 3.30:1) */
--btn-fill: linear-gradient(135deg, #1B7A74 0%, #1F6F8C 100%);
--on-btn: #FFFFFF;
--btn-glow: rgba(27, 122, 116, 0.40);
--green: #2F9E5C; --green-text: #6FCF97;
--green-soft: rgba(61, 220, 122, 0.15);
--amber: #C98A2E; --amber-text: #FFB454;
--amber-soft: rgba(255, 180, 84, 0.15);
--red: #D4544A; --red-text: #FF6B5E;
--red-soft: rgba(255, 107, 94, 0.15);
--blue: #3F82C4; --blue-text: #6FB1E8;
--blue-soft: rgba(111, 177, 232, 0.15);
--heat-0: #22262A; --heat-1: #1E4C4C; --heat-2: #1F6E6C;
--heat-3: #2E9895; --heat-4: #4DD9D0;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 8px 24px rgba(0, 0, 0, 0.28);
--shadow-lift: 0 4px 12px rgba(0, 0, 0, 0.34), 0 12px 32px rgba(0, 0, 0, 0.38);
color-scheme: dark;
}
/* ------------------------------------------------- kill the purple washes
styles.css paints two fixed radial gradients behind every screen and a
third inside .continue-card, all with hardcoded violet. They pre-date the
token system, so re-pointing the tokens does not reach them. */
body {
background: var(--bg) !important;
background-attachment: initial !important;
}
.continue-card {
background: var(--surface) !important;
}
/* --------------------------------------------------------- reading face
Applied only where the content is genuinely continuous prose. Chips,
labels, meta rows and every number stay on Inter — a serif at 12px in a
badge looks like a mistake. Extend this list as more prose surfaces move
over; do not blanket-apply it to the body. */
:root { --font-read: Lora, Georgia, "Times New Roman", serif; }
.lede,
.topic-summary,
.phase-desc,
.asset-desc {
font-family: var(--font-read);
line-height: 1.65;
}
/* Prose wants a slightly larger optical size than UI at the same nominal px. */
.lede { font-size: 17px; }
/* ------------------------------------------------------------ motion
styles.css animates progress rings and the heatmap fill. Respect the
system setting. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ============================================================
Credential sharing panel (certificate view)
------------------------------------------------------------
Sits under the printable certificate and is excluded from print.
The panel has two states and the difference between them is a
consent boundary, so they are visually distinct rather than the
same box with a different button: before publishing it reads as
a form, after publishing it reads as a receipt.
============================================================ */
.share-panel {
margin-top: 26px;
padding: 22px 24px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius, 12px);
}
.share-panel.is-live {
border-color: var(--accent);
box-shadow: inset 3px 0 0 var(--accent);
}
.share-title {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 8px;
font-size: 16px;
font-weight: 650;
}
.share-note {
color: var(--text-dim);
font-size: 14px;
line-height: 1.6;
max-width: 62ch;
margin: 0 0 16px;
}
.share-panel.is-live .share-note { margin: 14px 0 0; }
.share-id {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.share-id-label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--text-faint);
}
.share-id code {
font-size: 15px;
font-weight: 650;
letter-spacing: .04em;
}
.share-link { display: flex; gap: 8px; margin-bottom: 16px; }
.share-link input {
flex: 1 1 auto;
min-width: 0;
padding: 10px 12px;
font: inherit;
font-size: 14px;
color: var(--text-dim);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 8px;
}
.share-actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* WCAG 2.2 SC 2.5.8 — every control here is a real tap target, including the
quiet revoke link, which is the one a worried person reaches for on a phone. */
.share-actions .btn, .share-revoke, .share-link .btn { min-height: 44px; }
.share-revoke {
display: inline-block;
margin-top: 16px;
color: var(--text-faint);
}
.share-revoke:hover { color: var(--red-text, var(--red)); }
@media (max-width: 640px) {
.share-panel { padding: 18px 16px; }
.share-actions .btn { width: 100%; justify-content: center; }
}
@media print {
.share-panel { display: none !important; }
}
/* The verification line on the certificate itself. Quiet on screen, because
the share panel below already says it; essential in print, because a printed
certificate with no way to check it is decoration. */
.cert-verify {
margin: 18px 0 0;
font-size: 12px;
letter-spacing: .01em;
color: var(--text-faint);
}
.cert-verify strong { color: var(--text-dim); font-weight: 650; }
@media print {
.cert-verify { color: #5a6480 !important; }
.cert-verify strong { color: #1b2237 !important; }
}