/* ================================================================ Reading-aid colour palettes — 8 in total. Each palette overrides the semantic surface/text/accent/border tokens defined as defaults in tokens.css. CSS files consume only semantic tokens for surfaces & text, so swapping `[data-theme]` on repaints every section consistently. Choice rationale: Paper (the default — cream, BDA-recommended) plus two dark options (Charcoal, Dark Grey) and five soft tinted backgrounds drawn from BDA / Irlen reading colour overlay research. The light tints mirror the colour-overlay options some dyslexic readers find calmest for sustained reading, and match the slide-out panel pattern Eli's existing site uses. Every value below has been audited against WCAG 2.1 AA — see `/tmp/wcag-check-7palette.py`. New palettes: keep the audit green by checking text-on-surface, accent-on-surface, and the focus ring on every surface a focusable element appears on. ================================================================ */ /* ----- Charcoal — deep ink + ink-blue-deep ----- */ html[data-theme="charcoal"] { --surface-base: #1A1814; --surface-section: #0E5A75; --surface-soft: #DCE3E8; --surface-card: #FAF7EE; --text-base: #FAF7EE; --text-section: #FAF7EE; --text-soft: #1A1814; --text-card: #1A1814; --text-base-muted: #C9C6BE; --text-section-muted: #C6D4D3; --accent-primary: #3FB5D6; --accent-deep: #1F8FB0; --accent-warm-text: #FF7A45; --border-subtle: rgba(250, 247, 238, 0.10); --border-medium: rgba(250, 247, 238, 0.20); --border-strong: rgba(250, 247, 238, 0.30); } /* ----- Dark Grey — softer dark default, ~20% lighter than Charcoal's near-black (#1A1814 → #423F39). Some dyslexic and light-sensitive readers find a true-black page too high-contrast; this keeps the dark look with a gentler base. White text on #423F39 = 8.9:1 — clears AA. ----- */ html[data-theme="dark-grey"] { --surface-base: #423F39; --surface-section: #0E5A75; --surface-soft: #DCE3E8; --surface-card: #FAF7EE; --text-base: #FAF7EE; --text-section: #FAF7EE; --text-soft: #1A1814; --text-card: #1A1814; --text-base-muted: #D2CFC8; --text-section-muted: #C6D4D3; --accent-primary: #3FB5D6; --accent-deep: #1F8FB0; --accent-warm-text: #FF7A45; --border-subtle: rgba(250, 247, 238, 0.10); --border-medium: rgba(250, 247, 238, 0.20); --border-strong: rgba(250, 247, 238, 0.30); } /* ----- Paper — the default palette. Cream bg, dark text (BDA-recommended). Cream rather than pure white per BDA; dark ink-blue-deep accent to keep AA contrast on the lighter background. ----- */ html[data-theme="paper"] { --surface-base: #FAF1DF; --surface-section: #E8DEC8; --surface-soft: #F2E9D5; --surface-card: #FFFFFF; --text-base: #1A1814; --text-section: #1A1814; --text-soft: #1A1814; --text-card: #1A1814; --text-base-muted: #4B4841; --text-section-muted: #47443C; --accent-primary: #0E5A75; --accent-deep: #0E5A75; --accent-warm-text: #9F3D14; --border-subtle: rgba(26, 24, 20, 0.10); --border-medium: rgba(26, 24, 20, 0.20); --border-strong: rgba(26, 24, 20, 0.30); } /* ----- Soft Blue — pale blue tint (popular dyslexia-friendly). Accent darkened to #0A4658 so the cta-em pairing on the lighter surface-section clears AA 4.5:1. ----- */ html[data-theme="soft-blue"] { --surface-base: #DCE6EE; --surface-section: #B8C8D6; --surface-soft: #ECF1F6; --surface-card: #FFFFFF; --text-base: #1A1814; --text-section: #1A1814; --text-soft: #1A1814; --text-card: #1A1814; --text-base-muted: #454544; --text-section-muted: #3D3F3F; --accent-primary: #0A4658; --accent-deep: #0A4658; --accent-warm-text: #9F3D14; --border-subtle: rgba(26, 24, 20, 0.10); --border-medium: rgba(26, 24, 20, 0.20); --border-strong: rgba(26, 24, 20, 0.30); } /* ----- Pale Yellow — soft warm cream-yellow (Irlen-style overlay). Deep brown accent (#5C3A12) clears AA on yellow surfaces. ----- */ html[data-theme="pale-yellow"] { --surface-base: #FBF6E2; --surface-section: #F2EAC4; --surface-soft: #F8F1D5; --surface-card: #FFFFFF; --text-base: #1A1814; --text-section: #1A1814; --text-soft: #1A1814; --text-card: #1A1814; --text-base-muted: #494238; --text-section-muted: #3F3A30; --accent-primary: #5C3A12; --accent-deep: #5C3A12; --accent-warm-text: #7A2A0C; --border-subtle: rgba(26, 24, 20, 0.10); --border-medium: rgba(26, 24, 20, 0.20); --border-strong: rgba(26, 24, 20, 0.30); } /* ----- Pale Green — soft sage tint (Irlen-style overlay). Deep forest accent (#244D26) clears AA on green surfaces. ----- */ html[data-theme="pale-green"] { --surface-base: #E5EFDD; --surface-section: #CFE0C2; --surface-soft: #EEF5E7; --surface-card: #FFFFFF; --text-base: #1A1814; --text-section: #1A1814; --text-soft: #1A1814; --text-card: #1A1814; --text-base-muted: #3F4A37; --text-section-muted: #33402C; --accent-primary: #244D26; --accent-deep: #244D26; --accent-warm-text: #7A2A0C; --border-subtle: rgba(26, 24, 20, 0.10); --border-medium: rgba(26, 24, 20, 0.20); --border-strong: rgba(26, 24, 20, 0.30); } /* ----- Lavender — soft pale purple tint (Irlen-style overlay). Deep aubergine accent (#4A2A75) clears AA on lavender surfaces. ----- */ html[data-theme="lavender"] { --surface-base: #ECE5F0; --surface-section: #D4C8DC; --surface-soft: #F1ECF4; --surface-card: #FFFFFF; --text-base: #1A1814; --text-section: #1A1814; --text-soft: #1A1814; --text-card: #1A1814; --text-base-muted: #473F50; --text-section-muted: #3E3645; --accent-primary: #4A2A75; --accent-deep: #4A2A75; --accent-warm-text: #7A2A0C; --border-subtle: rgba(26, 24, 20, 0.10); --border-medium: rgba(26, 24, 20, 0.20); --border-strong: rgba(26, 24, 20, 0.30); } /* ----- Peach — soft warm peach tint (Irlen-style overlay). Warm brown accent (#7A2A0C) holds AA on peach surfaces. ----- */ html[data-theme="peach"] { --surface-base: #FBE8DA; --surface-section: #F4D0B5; --surface-soft: #FCEEDF; --surface-card: #FFFFFF; --text-base: #1A1814; --text-section: #1A1814; --text-soft: #1A1814; --text-card: #1A1814; --text-base-muted: #4D3F33; --text-section-muted: #3F3328; --accent-primary: #7A2A0C; --accent-deep: #7A2A0C; --accent-warm-text: #7A2A0C; --border-subtle: rgba(26, 24, 20, 0.10); --border-medium: rgba(26, 24, 20, 0.20); --border-strong: rgba(26, 24, 20, 0.30); }