/* ==========================================================================
   readable-font.css — self-hosted Atkinson Hyperlegible + the "readable font"
   toggle. Paired with js/font.js (the keycap) and the head.html pre-paint.
   --------------------------------------------------------------------------
   Atkinson Hyperlegible (Braille Institute, SIL OFL 1.1) is designed for low
   vision: letterforms are disambiguated so characters that usually blur
   together (I l 1, O 0, c e, etc.) stay distinct. Self-hosted — the woff2 files
   live in /fonts/, no Google Fonts hotlink. The face only downloads when the
   toggle is on (nothing references the family until [data-font="on"] does).

   Loaded on every page via components/head.html and hand-linked into the
   case-studies/ + talks/ deep dives. User-opt-in only — there is no OS signal
   for "prefers a legible font," so unlike reduced-motion this is never forced.
   ========================================================================== */

@font-face {
    font-family: 'Atkinson Hyperlegible';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/AtkinsonHyperlegible-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Atkinson Hyperlegible';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/AtkinsonHyperlegible-Bold.woff2') format('woff2');
}
@font-face {
    font-family: 'Atkinson Hyperlegible';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/AtkinsonHyperlegible-Italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Atkinson Hyperlegible';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/AtkinsonHyperlegible-BoldItalic.woff2') format('woff2');
}

/* --- The toggle --------------------------------------------------------------
   When on, every text element — body copy, UI, AND the display headings —
   switches to Atkinson Hyperlegible. This is the readable-font mode, so we
   choose maximum legibility over keeping the Bubblegum Sans / Pacifico display
   faces: someone who needs a legible font needs it for the big words too.
   Monospace (code) keeps its family — mono is already disambiguated and
   readers expect it. Decorative SVG icons/art are unaffected (they aren't text
   in these fonts). Spacing is loosened a touch for breathing room. */
:root[data-font="on"] body,
:root[data-font="on"] :not(code):not(pre):not(kbd):not(samp):not(tt):not(.mono) {
    font-family: 'Atkinson Hyperlegible', system-ui, -apple-system, sans-serif !important;
}

:root[data-font="on"] body {
    line-height: 1.7;
    letter-spacing: 0.012em;
}

:root[data-font="on"] p,
:root[data-font="on"] li {
    line-height: 1.75;
}

/* Keep the keycaps themselves in the readable face when active, and give the
   active one a clear pressed state so sighted users see it's on (aria-pressed
   carries it for AT). */
.view-key[aria-pressed="true"]#fontKey {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}