/* ============================================================================ tokens.css — THE THEMES (layer 1 of 3) ---------------------------------------------------------------------------- The single source of truth for how Dreamy looks. Defines ONLY design tokens (CSS custom properties). Paints nothing itself (no element/class rules). TWO AXES — keep them separate: • THEME (data-theme) — a WHOLE fresh look: its own palette, fonts, shape. The outer axis. e.g. "storybook" (today), "ocean"… • MODE (data-mode) — LIGHTING only: light / sepia / dark. The inner axis. Each theme supplies its OWN colours for its three modes (mode = the same theme at a different brightness, never a different brand). Tokens live at the intersection: - a theme's PERSONALITY (fonts, type scale, shape) is the same across its 3 modes → defined once on [data-theme="X"] - a theme's COLOUR (bg, surface, ink, accent, shadows) changes with lighting → defined on [data-theme="X"][data-mode="light|sepia|dark"] Truly global, theme-independent structure (page max-widths) lives in :root. THE THREE-LAYER SYSTEM (each a separate unit): 1. THEMES → this file 2. COMPONENTS → dreamy.css (.ds-* library) — built only on var(--token) 3. PAGE/AREA → each page's {% block head %} — layout only, token-only THE RULE: layers 2 & 3 reference colour ONLY as var(--token) — never raw hex. ---------------------------------------------------------------------------- HOW TO ADD A NEW THEME (no page or component is ever touched): 1. If it uses new fonts, add their @import below. 2. Copy the whole "THEME: storybook" section, rename to your theme, and retune every value. You MUST define the FULL token contract (every key listed under THE TOKEN CONTRACT) for the personality block AND all three mode blocks — a theme is an all-or-nothing skin; a missing key would let another theme's value leak through. 3. Register the theme name in DREAMY_THEMES in base.html (for the switcher / admin default). That's it — components recolour automatically. HOW TO SWITCH: • mode → set ; the top-bar switch does this and persists localStorage "dreamy_mode". • theme → set ; persisted as "dreamy_theme". Precedence (in base.html): user choice → admin/site default → hard default "storybook". (An admin site-default + a user picker are a small future add — the mechanism is already wired here.) THE TOKEN CONTRACT (every theme must define all of these): personality : --font-display --font-prose --font-ui --text-hero --text-h1 --text-h2 --text-h3 --text-title --text-body --text-prose --text-sm --text-xs --radius-chip --radius-input --radius-card --radius-frame per mode : --bg --bg-deep --surface --surface-2 --fg1 --fg2 --fg3 --accent --accent-ink --accent-deep --accent-soft --accent-grad --secondary --secondary-soft --magic --magic-soft --magic-deep --teach --teach-soft --teach-ink --rule --rule-soft --rule-strong --danger --success --shadow-sm --shadow-md --shadow-lg --shadow-warm color-scheme ACCESSIBILITY — WCAG AA CONTRAST RULE (added 2026-07-05): --accent / --magic / --teach are BRAND tones, tuned for fills, icons and borders (3:1 non-text minimum) — never use them as text colour directly. Where a role colour must render as actual TEXT (links, active labels, small-print), use its "-ink" companion instead: --accent-ink (new) or --teach-ink (existing). Both are darkened/lightened per mode to clear 4.5:1 against --bg/--surface/--surface-2. --danger and --fg3 are tuned to pass 4.5:1 directly since they're read as text far more than as fills. ============================================================================ */ /* Global, theme-independent structure (layout only — never colour/feel). */ :root { --maxw-app:1180px; --maxw-read:720px; } /* ---- FACET PALETTE (library filter/facet redesign) ------------------------- Notion/Airtable-style TAG colours for the faceted /library — medium-saturated pastels used AS-IS (a dark-ink label rides on top like a highlighter), so they stand off the cream in every mode. DELIBERATELY theme/mode-independent and fixed: a language/age keeps ONE identity everywhere it appears (filter pill + the tiny bubble on a story card). This is the ONE place they're defined; a future admin "facet colours" screen overrides these per deployment. Consumed by templates/library_filtered.html (.lf-page) and its card strip. */ :root { --tag-red:#F2A29B; --tag-orange:#F5A24F; --tag-amber:#EFCB63; --tag-green:#9FD597; --tag-teal:#84D3C3; --tag-blue:#93C1EA; --tag-indigo:#AEB2EF; --tag-purple:#C9A2E2; --tag-pink:#F0A0CB; --tag-brown:#CBA079; --tag-gray:#C7CDCB; --tag-gold:#F0C86F; --tag-sage:#A6D29B; /* AGE — the app's 1–3 / 3–5 / 6–8 / 9–12 identity (blue·green·amber·purple) */ --f-age-1to3:var(--tag-blue); --f-age-3to5:var(--tag-green); --f-age-6to8:var(--tag-amber); --f-age-9to12:var(--tag-purple); /* LANGUAGE — one maximally-distinct hue per SUPPORTED_LANGUAGES story language; the popular four (English/French/German/Spanish) pinned to blue / red / gold / green so they're unmistakable. */ --f-lang-English:#6FA8E0; --f-lang-French:#E88A80; --f-lang-German:#E6C15C; --f-lang-Spanish:#8FCB8A; --f-lang-Italian:#59C6BE; --f-lang-Portuguese:#EDA45C; --f-lang-Dutch:#6FC0DA; --f-lang-Russian:#9E93E4; --f-lang-Polish:#BFCE6E; --f-lang-Turkish:#66C8A2; --f-lang-Arabic:#CA8FD9; --f-lang-Hindi:#E48FC8; --f-lang-Mandarin:#EC8FA8; --f-lang-Japanese:#B592E2; --f-lang-Korean:#96A0E4; /* FEATURES — gold = voice-over, sage = words-teaching, teal = concept-teaching, pink = rhyming (a distinctive, playful hue for the rare verse format) */ --f-narration:var(--tag-gold); --f-words:var(--tag-sage); --f-concept:var(--tag-teal); --f-rhyme:var(--tag-pink); } /* ############################################################################ THEME: storybook — the warm cream-parchment storybook look (the default, and the reference implementation: copy this whole section to add a theme). "A book, not an app." Coral = the one loud action; gold = magic/credits; sage = teaching only; plum = secondary. ############################################################################ */ /* storybook fonts */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500;1,9..144,600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&family=Nunito:wght@400;500;600;700;800&display=swap'); /* ---- storybook · PERSONALITY (fonts, type scale, shape — same in all modes) ---- */ [data-theme="storybook"] { --font-display:'Fraunces',Georgia,'Times New Roman',serif; --font-prose:'Source Serif 4',Georgia,serif; --font-ui:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif; --text-hero:clamp(2.0rem,4vw,2.8rem); --text-h1:clamp(1.5rem,2.6vw,1.8rem); --text-h2:1.3rem; --text-h3:1.12rem; --text-title:1.05rem; /* object titles: card / story-tile / child-name */ --text-body:1rem; --text-prose:1.18rem; --text-sm:.9rem; --text-xs:.78rem; --radius-chip:999px; --radius-input:14px; --radius-card:20px; --radius-frame:28px; } /* ---- storybook · LIGHT (cream parchment — the source of truth) ---- bg is a deliberately deeper warm cream (not near-white) so the pure-white cards/surfaces lift off it — same satisfying surface↔bg step as sepia/dark. Cards stay #FFFFFF; the contrast comes from moving the background. */ [data-theme="storybook"][data-mode="light"] { --bg:#F4EAD6; --bg-deep:#EADEC6; --surface:#FFFFFF; --surface-2:#FBF5EA; /* fg3 darkened from #8A839E (2026-07-05) — 3.0:1 vs bg/surface failed AA for the small real text (eyebrows/hints/placeholders) that uses it */ --fg1:#2A2540; --fg2:#5A5470; --fg3:#6D6682; --accent:#E87A5D; /* accent-ink (new, 2026-07-05) — AA-safe deep coral for TEXT use (links, active nav labels); base --accent stays vivid for fills/icons/borders */ --accent-ink:#BE3D1B; /* accent-deep darkened so it's white-text-safe as the PRIMARY BUTTON FILL (ds-btn--primary/--glow), not just a hover tint — was #D96D51 (2.85:1 with white text, failed AA) */ --accent-deep:#CB4D2C; --accent-soft:#F4B8A4; /* gentle coral wash for soft CTAs (.ds-btn--glow) — ends in accent-deep (not accent) so a centred white label actually clears 4.5:1 */ --accent-grad:linear-gradient(100deg, var(--accent-soft) 0%, var(--accent-deep) 60%); --secondary:#7A5A8C; --secondary-soft:#C9B6D6; /* magic darkened from #E8B563 (1.57:1 vs bg) to clear 3:1 as an icon/border tone (sparkle, star, quiz-option accents) — still reads as gold */ --magic:#B67A1B; --magic-soft:#F5DDA8; --magic-deep:#D68A3D; /* teach darkened from #7FA88A (2.23:1 vs bg) to clear 3:1 as an icon/border tone (dot indicators, quiz icons); --teach-ink stays the text-safe sage */ --teach:#63916F; --teach-soft:#C2DCC9; --teach-ink:#355E3F; /* translucent highlighter-yellow for in-story vocab pills (decision 172) */ --mark:rgba(240,212,66,0.55); --mark-strong:rgba(240,212,66,0.72); --rule:rgba(42,37,64,0.10); --rule-soft:rgba(42,37,64,0.05); /* rule-strong (2026-07-19): border for INTERACTIVE outlines (choice pills) — the hairline --rule washed out against the white card in this mode */ --rule-strong:rgba(42,37,64,0.26); /* danger darkened from #D9534F (3.32:1 vs bg) to pass 4.5:1 both as text (ds-btn--danger label) and as a white-text fill (hover state) */ --danger:#C62F2B; --success:#3E9E63; --shadow-sm:0 1px 2px rgba(42,37,64,.08),0 3px 8px rgba(42,37,64,.06); --shadow-md:0 5px 14px rgba(42,37,64,.10),0 14px 34px rgba(42,37,64,.08); --shadow-lg:0 10px 28px rgba(42,37,64,.12),0 24px 64px rgba(42,37,64,.12); --shadow-warm:0 8px 24px rgba(232,122,93,.30); /* locked library tile: how visible the art stays under the "sign up to read" veil. Light/sepia keep it airy (only a whisper of dim) so the carefully made cards still tempt; dark dims a touch more but stays translucent. */ --lock-art-opacity:.85; --lock-art-opacity-hover:.94; color-scheme: light; } /* ---- storybook · SEPIA (a gently dimmed parchment between light and dark) ---- */ [data-theme="storybook"][data-mode="sepia"] { --bg:#F1E4C7; --bg-deep:#E9DAB8; --surface:#F8EFD8; --surface-2:#F3E7C9; /* fg3 darkened (2026-07-05) — was #947F60, 3.05:1 vs bg, failed AA text */ --fg1:#3A2E1F; --fg2:#6B5A42; --fg3:#75644C; --accent:#C06A45; /* accent-ink (new, 2026-07-05) — AA-safe text tone for links/active labels */ --accent-ink:#9A5334; --accent-deep:#A9583a; --accent-soft:rgba(192,106,69,.18); /* ends in accent-deep (already white-safe here) so a centred white label clears 4.5:1 */ --accent-grad:linear-gradient(100deg, #D98E6E 0%, var(--accent-deep) 60%); --secondary:#7A5A8C; --secondary-soft:rgba(122,90,140,.18); /* magic darkened (2026-07-05) — was #B98A38, 2.47:1 vs bg, failed 3:1 icon/border use */ --magic:#A67C32; --magic-soft:rgba(185,138,56,.18); --magic-deep:#A8702A; --teach:#5E8268; --teach-soft:rgba(94,130,104,.18); --teach-ink:#3A5A45; --mark:rgba(230,198,64,0.50); --mark-strong:rgba(230,198,64,0.66); --rule:rgba(58,46,31,0.14); --rule-soft:rgba(58,46,31,0.07); --rule-strong:rgba(58,46,31,0.24); /* danger darkened (2026-07-05) — was #C0524A, 3.66:1 vs bg, failed AA text */ --danger:#AD443C; --success:#3F8757; --shadow-sm:0 1px 2px rgba(58,46,31,.08),0 2px 6px rgba(58,46,31,.05); --shadow-md:0 4px 12px rgba(58,46,31,.10),0 12px 32px rgba(58,46,31,.07); --shadow-lg:0 8px 24px rgba(58,46,31,.12),0 24px 64px rgba(58,46,31,.12); --shadow-warm:0 8px 24px rgba(192,106,69,.26); --lock-art-opacity:.85; --lock-art-opacity-hover:.94; color-scheme: light; } /* ---- storybook · DARK (warm-dim sepia, NOT black/OLED) ---- */ [data-theme="storybook"][data-mode="dark"] { --bg:#2A2218; --bg-deep:#221B12; --surface:#352B20; --surface-2:#3E3324; /* fg3 lightened (2026-07-05) — was #9D917A, 3.97:1 vs surface-2, failed AA text */ --fg1:#EDE2C8; --fg2:#C9BCA0; --fg3:#A79C87; --accent:#E0876B; /* accent already reads fine as TEXT on the dark bg (5.85:1) — accent-ink is just an alias so the "-ink = text" rule holds across all 3 modes */ --accent-ink:var(--accent); /* accent-deep now genuinely darker than --accent (was an alias of it) — a light pastel coral can't carry white button text (2.68:1); this can */ --accent-deep:#C9502A; --accent-soft:rgba(224,135,107,.18); --accent-grad:linear-gradient(100deg, #C26F56 0%, var(--accent-deep) 60%); --secondary:#A98BB8; --secondary-soft:rgba(169,139,184,.18); --magic:#D6B068; --magic-soft:rgba(214,176,104,.16); --magic-deep:#E0A458; --teach:#9BC4AD; --teach-soft:rgba(155,196,173,.14); --teach-ink:#B6D9C2; --mark:rgba(232,206,96,0.34); --mark-strong:rgba(232,206,96,0.48); --rule:rgba(237,226,200,.12); --rule-soft:rgba(237,226,200,.06); /* dark pills already read clearly — rule-strong keeps the exact same look */ --rule-strong:rgba(237,226,200,.12); /* danger nudged (2026-07-05) — was #E0726B, 4.47:1 vs surface, just under AA */ --danger:#E0746D; --success:#74C48E; --shadow-sm:0 1px 2px rgba(0,0,0,.30),0 2px 6px rgba(0,0,0,.22); --shadow-md:0 4px 12px rgba(0,0,0,.40),0 12px 32px rgba(0,0,0,.30); --shadow-lg:0 8px 24px rgba(0,0,0,.45),0 24px 64px rgba(0,0,0,.45); --shadow-warm:0 8px 24px rgba(224,135,107,.22); /* warm-dim: a gentler veil than before (.6 → .72) so covers stay readable */ --lock-art-opacity:.72; --lock-art-opacity-hover:.85; color-scheme: dark; } /* ############################################################################ ADD FURTHER THEMES BELOW (after storybook so equal-specificity wins by order). Copy the four storybook blocks, rename "storybook" → your theme, retune every value, and register the name in base.html's DREAMY_THEMES. Define the FULL token contract in each block. Nothing else in the app changes. ############################################################################ */