/* ════════════════════════════════════════════════════════════════════ SymposiON · contrast-typography.css 1) Global typography tokens + legibility rules (apply to ALL themes). 2) --sym-accent-text fallback + muted contrast bumps for the EXISTING base themes, matching the audited WCAG-AA values used by the new palettes. Load LAST (after palettes.css, reimagined-palettes.css, seasons.css) so the fixes win. ════════════════════════════════════════════════════════════════════ */ /* ─── 1 · TYPOGRAPHY ──────────────────────────────────────────────── Canonical font roles. Themes may override --sym-font-display for character; everything else stays consistent for readability. Ensure these families are loaded once in : Cormorant Garamond · Inter · JetBrains Mono · Cinzel · Raleway ─────────────────────────────────────────────────────────────────────*/ :root { --sym-font-serif: 'Cormorant Garamond', Georgia, serif; /* headings, display numerals */ --sym-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --sym-font-body: 'Raleway', 'Inter', sans-serif; /* long-form body copy */ --sym-font-mono: 'JetBrains Mono', ui-monospace, monospace;/* eyebrows, tags, meta */ --sym-font-display: 'Cinzel', 'Trajan Pro', Georgia, serif; /* all-caps decorative */ /* a contrast-safe accent for text; themes override per-palette */ --sym-accent-text: var(--sym-accent); } /* Default accent for TEXT should use the safe token, not the raw accent. Opt elements in with .on-accent-text or via the rules below. */ a.sym-link, .sym-accent-text, .theme-opt__desc[data-accent] { color: var(--sym-accent-text); } /* Minimum body legibility: never let body copy fall under the muted token */ body { font-family: var(--sym-font-body); color: var(--sym-fg); } .sym-muted, .footer-copy, .page-header p { color: var(--sym-fg-muted); } /* Headings + decorative UI keep their faces regardless of theme */ h1, h2, h3, .page-header h1 { font-family: var(--sym-font-serif); } .eyebrow, .grade-pill, .grid-label, .tag { font-family: var(--sym-font-mono); } /* ─── 2 · EXISTING-THEME CONTRAST FIXES ─────────────────────────────*/ [data-sym-theme="obsidian"] { --sym-accent-text: #D2A24A; } [data-sym-theme="alabaster"] { --sym-fg-muted: #746a5b; /* was below 4.5:1 — bumped to AA */ --sym-accent-text: #bb532b; } [data-sym-theme="hearth"] { --sym-fg-muted: #8a7b65; /* was below 4.5:1 — bumped to AA */ --sym-accent-text: #C4A448; } [data-sym-theme="amphora"] { --sym-fg-muted: #8a7a59; /* was below 4.5:1 — bumped to AA */ --sym-accent-text: #d35228; } [data-sym-theme="aegean"] { --sym-accent-text: #D2B36A; } /* ─── 3 · SEASON OVERLAYS — safe accent-text ───────────────────────── Seasons retint --sym-accent; provide a matching legible text accent. */ .season-halloween, [data-season="halloween"] { --sym-accent-text: #ED7A28; } .season-christmas, [data-season="christmas"] { --sym-accent-text: #B5302A; } /* on the light winter ground */ .season-easter, [data-season="easter"] { --sym-accent-text: #4E8C49; } .season-carnival, [data-season="carnival"] { --sym-accent-text: #C23A8C; }