/* Accessibility options (Settings → Accessibility), applied as classes on <html> by app.js. Loaded after
   future.css so they win over the default look and Pro themes alike. */

@font-face { font-family: "Atkinson Hyperlegible"; src: url("../assets/fonts/atkinson-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("../assets/fonts/atkinson-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* Readable font: Atkinson Hyperlegible (Braille Institute) for text and headings; clear letter shapes help
   low vision and many dyslexic readers. Typing text stays monospaced so letters line up. */
:root.font-readable { --display: "Atkinson Hyperlegible", system-ui, sans-serif; }
:root.font-readable body, :root.font-readable :is(h1, h2, h3, .brand, .btn, .nav a, .stat-value, .metric-value) { font-family: "Atkinson Hyperlegible", system-ui, sans-serif !important; letter-spacing: 0.01em; }
:root.font-readable .typing-text, :root.font-readable .ks-words { letter-spacing: 0.06em; word-spacing: 0.2em; }

/* Larger text: everything sized in rem grows with it. */
:root.large-text { font-size: 118%; }
:root.large-text body { font-size: 1.15rem; }

/* Calm mode: no moving background, glows or animations. */
:root.calm body::before, :root.calm body::after, :root.calm .home-hero::after { display: none !important; }
:root.calm *, :root.calm *::before, :root.calm *::after { animation: none !important; transition: none !important; }

/* High contrast: black and white with yellow accents, no glass, glow or gradient text. */
:root.contrast {
  --bg: #000; --surface: #000; --surface-2: #1a1a1a; --text: #fff; --muted: #e8e8e8; --border: #fff;
  --primary: #ffd400; --primary-text: #000; --good: #3cff6e; --bad: #ff5a5a; --warn: #ffb000; --cursor: #3a3000;
  --hint: #ffd400; --key-target: #ffd400; --on-target: #000; --on-hint: #000; --star: #ffd400; --star-off: #777;
  --hand-line: #fff; --game-bg: #000; --game-bg-2: #000; --game-fg: #fff; --game-accent: #ffd400; --game-accent-2: #ffffff;
}
:root.contrast body { background: #000 !important; }
:root.contrast body::before, :root.contrast body::after, :root.contrast .home-hero::after { display: none !important; }
:root.contrast * { box-shadow: none !important; text-shadow: none !important; backdrop-filter: none !important; filter: none !important; }
:root.contrast :is(.card, .stat, .lesson-card, .typing-area, .results, .home-hero, .pr-card, .pr-top, .gm-card, .today-item, .badge, .test-form, .chart-wrap, .topbar, .kb-key, .ex-tile, .onb-rec, .toast) { background: #000 !important; border: 1px solid #fff !important; }
:root.contrast :is(h1, .brand span, .stat-value, .metric-value, .pr-big-value, .results-cheer, .pr-pot-value) { background: none !important; color: #fff !important; -webkit-text-fill-color: currentColor; }
:root.contrast :is(.btn-primary, .gm-chip.on, .nav a.active, .kp.new, .onb-goal .btn.on) { background: #ffd400 !important; color: #000 !important; border: 1px solid #ffd400 !important; }
:root.contrast :is(a, .eyebrow, .kb-caption) { color: #ffd400; }
:root.contrast :focus-visible { outline: 3px solid #ffd400 !important; outline-offset: 2px; }
:root.contrast .kb-key.kb-target, :root.contrast .kb-key.kb-hint { background: #ffd400 !important; color: #000 !important; }