/* ─────────────────────────────────────────────────────────────────────────── theme.css — shared theme tokens + accessibility, driven by prefs.js Light/dark colours are semantic CSS variables. Dark mode + accessibility are applied centrally here (keyed off the data-attributes prefs.js sets on ) so individual pages don't each need bespoke dark styles for their shared chrome (nav, cards, panels, chips…). ─────────────────────────────────────────────────────────────────────────── */ /* OpenDyslexic for the dyslexia-friendly option (system fonts as resilient fallback if the CDN is unavailable — these are also easier to read). */ @import url('https://fonts.cdnfonts.com/css/opendyslexic'); :root { --bg: #F4F6FB; --surface: #FFFFFF; --surface-2: #F1F3F8; --text: #111827; --text-2: #4B5563; --text-3: #5B6472; /* was #9CA3AF — failed WCAG AA (~2.5:1) on white/cards */ --border: #EAECF4; --p: #B31B1B; --p-dk: #991414; --p-soft: #FFF0F0; --shadow: rgba(16,24,40,.08); } html[data-theme="dark"] { --bg: #0F1217; --surface: #181C23; --surface-2: #232A33; --text: #E7EAF0; --text-2: #B6BECB; --text-3: #99A2B0; --border: #2A313B; --p: #E45E5B; /* lifted red so it stays legible on dark */ --p-dk: #C8423F; --p-soft: #2C1B1C; --shadow: rgba(0,0,0,.55); } /* ── Dark mode: shared chrome across pages ── */ .paper-ref { color: #6B7280; } /* light base; dark override lifts it below */ html[data-theme="dark"] body { background: var(--bg) !important; color: var(--text); } /* The logo PNG has a white background — against the dark nav it reads as a harsh square. Round it into a tidy white badge so it looks intentional. */ html[data-theme="dark"] .nav-logo-img { background: #fff; border-radius: 50%; padding: 5px; object-fit: contain; box-shadow: 0 0 0 1px rgba(255,255,255,.12); } html[data-theme="dark"] nav, html[data-theme="dark"] .card, html[data-theme="dark"] .panel, html[data-theme="dark"] .cal, html[data-theme="dark"] .side, html[data-theme="dark"] .highlight, html[data-theme="dark"] .stats, html[data-theme="dark"] footer, html[data-theme="dark"] .user-chip, html[data-theme="dark"] .save-bar { background: var(--surface) !important; border-color: var(--border) !important; } html[data-theme="dark"] .cell, html[data-theme="dark"] .subj-chip, html[data-theme="dark"] .tier-row, html[data-theme="dark"] .field input, html[data-theme="dark"] .pw-field input, html[data-theme="dark"] .cal-btn { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text); } html[data-theme="dark"] .pw-field label { color: var(--text-2) !important; } html[data-theme="dark"] .cell.empty { background: transparent !important; border: none !important; } /* Primary headings / body text → brightest foreground */ html[data-theme="dark"] .nav-name, html[data-theme="dark"] .card-title, html[data-theme="dark"] .card-text, html[data-theme="dark"] .page-title, html[data-theme="dark"] .panel-title, html[data-theme="dark"] .section-title, html[data-theme="dark"] .cal-month, html[data-theme="dark"] .cal-num, html[data-theme="dark"] .cell-num, html[data-theme="dark"] .prog-name, html[data-theme="dark"] .tier-name, html[data-theme="dark"] .side-head, html[data-theme="dark"] .setting-name, html[data-theme="dark"] .brand h1, html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3 { color: var(--text) !important; } /* Secondary text → mid foreground */ html[data-theme="dark"] .nav-sub, html[data-theme="dark"] .card-desc, html[data-theme="dark"] .page-sub, html[data-theme="dark"] .panel-sub, html[data-theme="dark"] .section-sub, html[data-theme="dark"] .user-email, html[data-theme="dark"] .prog-pct, html[data-theme="dark"] .ev-meta, html[data-theme="dark"] .nav-links a, html[data-theme="dark"] .paper-ref, html[data-theme="dark"] .brand p, html[data-theme="dark"] .ev-title, html[data-theme="dark"] .tier-opt, html[data-theme="dark"] .seg-opt { color: var(--text-2) !important; } /* Muted text (#9CA3AF / #6B7280) → lifted so it's still readable on dark */ html[data-theme="dark"] .stat-l, html[data-theme="dark"] .hint, html[data-theme="dark"] .demo-note, html[data-theme="dark"] .step-label, html[data-theme="dark"] .count-note, html[data-theme="dark"] .setting-desc, html[data-theme="dark"] .side-sub, html[data-theme="dark"] .ev-date, html[data-theme="dark"] .ev-empty, html[data-theme="dark"] .dow span, html[data-theme="dark"] .subj-group-note, html[data-theme="dark"] .page-label, html[data-theme="dark"] .section-label, html[data-theme="dark"] .req, html[data-theme="dark"] .prog-pct { color: var(--text-3) !important; } /* Soft red surfaces (chips, active states, announcement) */ html[data-theme="dark"] .nav-links a.active, html[data-theme="dark"] .logout-btn, html[data-theme="dark"] .announcement, html[data-theme="dark"] .subj-chip.on, html[data-theme="dark"] .highlight-tag { background: var(--p-soft) !important; } /* Segmented controls (text size + tiers): dark track, lighter active pill */ html[data-theme="dark"] .tier-seg, html[data-theme="dark"] .seg { background: var(--surface-2) !important; } html[data-theme="dark"] .subj-chip.on, html[data-theme="dark"] .tier-opt.on, html[data-theme="dark"] .seg-opt.on { color: var(--p) !important; } html[data-theme="dark"] .tier-opt.on, html[data-theme="dark"] .seg-opt.on { background: var(--surface) !important; } html[data-theme="dark"] .save-bar { background: rgba(24,28,35,.92) !important; } /* Brand-red text that's hardcoded #B31B1B → use the lifted red so it stays legible on dark surfaces (stat numbers, announcement, tags, etc.). */ html[data-theme="dark"] .stat-n, html[data-theme="dark"] .highlight-tag, html[data-theme="dark"] .logout-btn, html[data-theme="dark"] .ann-text, html[data-theme="dark"] .ann-text strong, html[data-theme="dark"] .subj-group-label, html[data-theme="dark"] .highlight-tag span { color: var(--p) !important; } html[data-theme="dark"] .ann-dot, html[data-theme="dark"] .highlight-tag span { background: var(--p) !important; } /* ── Accessibility: text size (whole-page zoom) ── */ html[data-text-size="small"] body { zoom: 0.92; } html[data-text-size="large"] body { zoom: 1.12; } /* ── Accessibility: dyslexia-friendly font ── */ html[data-font="dyslexic"], html[data-font="dyslexic"] * { font-family: 'OpenDyslexic', 'Comic Sans MS', Verdana, sans-serif !important; letter-spacing: .2px; } /* ── Accessibility: reduce motion ── */ html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }