/* ============================================================
edulab - Colors & Type foundation
Fonts (Outfit, IBM Plex Sans, Roboto Mono) load from Google Fonts
via the tags in tokens/head.html - paste that into .
No @import here: it chains requests and blocks rendering.
============================================================ */
:root {
/* ---- Brand fonts ---- */
--font-display: 'Outfit', 'IBM Plex Sans', system-ui, sans-serif;
--font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
--font-mono: 'Roboto Mono', ui-monospace, 'SF Mono', Menlo, monospace;
/* ============================================================
RAW COLOR TOKENS
============================================================ */
/* Paper - page background is white; the stone steps are bands / wells.
Warm neutral grey (no yellow cast) so yellow and the colour blocks stay the
loudest thing on the page. Stone v2 (2026-10-10) replaced the cream sand
(#FBF7E6 / #F5EDCB), which at 1.07:1 on white did not read as a surface. */
--paper: #FFFFFF; /* page background (white) */
--paper-2: #F5F3F0; /* stone band: alternating sections, card heads */
--paper-3: #EAE6E0; /* deepest stone: wells, table heads, bar tracks */
--surface: #FFFFFF; /* cards & sheets */
/* Ink - warm near-black text & lines */
--ink: #1C1917; /* primary text */
--ink-2: #44403C; /* secondary text, 10.3:1 on white */
--ink-3: #625B53; /* muted / placeholder: >= 4.5:1 on every paper step */
--line: #E0DBD3; /* hairline: dividers, table rows, card heads */
--line-2: #C9C2B7; /* stronger: card contours, section rules */
--line-strong: #857C69;/* control boundaries (inputs, ghost buttons,
answer options): >= 3:1 on paper steps (WCAG 1.4.11) */
/* ---- Brand: Yellow main · Blue + Green secondary · Red danger ----
Plain saturated colours. The base colour (--blue) is for large fills,
illustrations and large text (>= 24px, or 19px bold). "-soft" is the
solid fill for chips and panels that carry small text: it is the
AA shade (= "-600"), so its "-ink" (white; dark ink on yellow) reaches
4.5:1. A colour used AS text goes only on white and uses "-600".
Never colour-on-colour (no green text on green).
Gate: python3 scripts/check-contrast.py */
/* Yellow - primary (buttons, progress, values on dark panels) */
--yellow: #FFD500;
--yellow-600: #F0C800; /* hover / press */
--yellow-soft: #FFD500; /* chip / panel fill */
--yellow-ink: #1C1917; /* text on yellow */
/* Blue - secondary (panels, chips, correct / selected state) */
--blue: #1E8FC2;
--blue-600: #177AA8;
--blue-soft: #177AA8; /* = blue-600, white text 4.8:1 */
--blue-ink: #FFFFFF;
/* Green - secondary support (chips, success) */
--green: #00A651;
--green-600: #078342; /* hover / press, AA text shade */
--green-soft: #078342; /* = green-600, white text 4.9:1 */
--green-ink: #FFFFFF;
/* Red - danger / important / wrong (use sparingly) */
--red: #E5322D;
--red-600: #C92823;
--red-soft: #C92823; /* = red-600, white text 5.5:1 */
--red-ink: #FFFFFF;
/* Legacy role aliases - older edulab apps use these names */
--marigold: var(--yellow); --marigold-600: var(--yellow-600); --marigold-soft: var(--yellow-soft); --marigold-ink: var(--yellow-ink);
--teal: var(--blue); --teal-600: var(--blue-600); --teal-soft: var(--blue-soft); --teal-ink: var(--blue-ink);
--sky: var(--green); --sky-soft: var(--green-soft); --sky-ink: var(--green-ink);
--coral: var(--red); --coral-600: var(--red-600); --coral-soft: var(--red-soft); --coral-ink: var(--red-ink);
/* Play palette - subject/category colours in the kids app */
--play-sun: #FFD500;
--play-grass: #00A651;
--play-berry: #C6478B;
--play-grape: #7A5AC2;
--play-sky: #1E8FC2;
--play-coral: #E5322D;
/* ---- Semantic ---- */
--success: #00A651; --success-soft: #078342; --success-ink: #FFFFFF;
--warning: #FFD500; --warning-soft: #FFD500; --warning-ink: #1C1917;
--danger: #E5322D; --danger-soft: #C92823; --danger-ink: #FFFFFF;
--info: #1E8FC2; --info-soft: #177AA8; --info-ink: #FFFFFF;
/* ---- Functional aliases ---- */
--bg: var(--paper);
--fg: var(--ink);
--fg-muted: var(--ink-2);
--primary: var(--yellow);
--on-primary:#1C1917; /* dark text on yellow */
/* White gap + ink band: >= 3:1 on paper, sand, yellow and every chip fill.
Pair with `outline: 3px solid transparent` so forced-colours mode still shows focus. */
--focus-ring: 0 0 0 2px var(--paper), 0 0 0 5px var(--ink);
/* Range-slider track */
--track: color-mix(in srgb, var(--ink) 24%, transparent);
/* ============================================================
SPACING (4pt base)
============================================================ */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
--sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;
/* ---- Radii (friendly, generous) ---- */
--r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
/* ---- Elevation - warm, low, soft ---- */
--shadow-sm: 0 1px 2px rgba(33,30,26,.10), 0 2px 6px rgba(33,30,26,.06);
--shadow-md: 0 6px 18px rgba(33,30,26,.12), 0 1px 3px rgba(33,30,26,.08);
--shadow-lg: 0 16px 40px rgba(33,30,26,.12), 0 3px 8px rgba(33,30,26,.06);
--shadow-primary: 0 8px 22px color-mix(in srgb, var(--yellow) 30%, transparent);
--shadow-marigold: var(--shadow-primary); /* legacy alias */
/* ============================================================
TYPE SCALE (semantic sizes)
============================================================ */
--display-font: clamp(48px, 6vw, 72px);
--h1: 44px; --h2: 33px; --h3: 25px; --h4: 19px;
--body-lg: 18px; --body: 16px; --body-sm: 14px;
--caption: 13px; --overline: 12px;
}
/* ============================================================
SEMANTIC ELEMENT STYLES
Apply via element selectors or .edu-prose wrapper.
Element defaults are wrapped in :where(.edu) (zero specificity) so any
single class wins: ,
,
keep their own font/size instead of the element default.
============================================================ */
.edu-display, :where(.edu) h1.display {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--display-font);
line-height: 1.02;
letter-spacing: -0.025em;
color: var(--ink);
}
:where(.edu) h1, .edu-h1 {
font-family: var(--font-display);
font-weight: 700; font-size: var(--h1);
line-height: 1.06; letter-spacing: -0.02em; color: var(--ink);
}
:where(.edu) h2, .edu-h2 {
font-family: var(--font-display);
font-weight: 700; font-size: var(--h2);
line-height: 1.12; letter-spacing: -0.015em; color: var(--ink);
}
:where(.edu) h3, .edu-h3 {
font-family: var(--font-display);
font-weight: 700; font-size: var(--h3);
line-height: 1.2; letter-spacing: -0.01em; color: var(--ink);
}
:where(.edu) h4, .edu-h4 {
font-family: var(--font-sans);
font-weight: 700; font-size: var(--h4);
line-height: 1.3; color: var(--ink);
}
:where(.edu) p, .edu-p, .edu-body {
font-family: var(--font-sans);
font-weight: 400; font-size: var(--body);
line-height: 1.6; color: var(--ink-2);
}
.edu-body-lg { font-family: var(--font-sans); font-size: var(--body-lg); line-height: 1.6; color: var(--ink-2); }
.edu-small { font-family: var(--font-sans); font-size: var(--body-sm); line-height: 1.5; color: var(--ink-2); }
.edu-caption{ font-family: var(--font-sans); font-size: var(--caption); line-height: 1.45; color: var(--ink-3); }
/* Overline - mono, tracked; functional labels only (never above page/section titles) */
.edu-overline {
font-family: var(--font-mono);
font-weight: 500; font-size: var(--overline);
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ink);
}
:where(.edu) code, .edu-mono {
font-family: var(--font-mono);
font-size: 0.92em; color: var(--ink);
background: var(--paper-3); padding: 0.12em 0.4em; border-radius: var(--r-xs);
}
/* Solid colour blocks (callouts, stat cards, chips): set background: var(--X-soft) and
color: var(--X-ink) on the block, add .edu-block, and every heading/paragraph inside
inherits that text colour instead of the default ink. */
.edu-block, .edu-block h1, .edu-block h2, .edu-block h3, .edu-block h4, .edu-block p,
.edu-block li, .edu-block small { color: inherit; }
body.edu { background: var(--paper); color: var(--ink); font-family: var(--font-sans); }