/* ══ public/css/accessibilita.css — LE TRE SCELTE DI ACCESSIBILITÀ (15/10), lette da public/js/accessibilita.js (attributi su <html>) ══
   Un foglio per tutti: gestionale (app-shell/app.html) e portali React (app/layout.tsx). Nessun colore nuovo: il contrasto alto porta i token secondari al valore
   dei primari (testo, bordi) della palette di ciascun tema, quindi chiaro e scuro restano i loro.
   · TESTO: `zoom` sul contenuto della pagina: ingrandisce testo, icone e bersagli insieme e il testo va a capo. Le unità px dei portali non seguirebbero una
     dimensione di carattere radice: per questo zoom e non font-size.
   · MOVIMENTO: oltre a «prefers-reduced-motion» del sistema (che i componenti rispettano già), un interruttore per chi non può cambiarlo nel sistema.
   · CONTRASTO: testo secondario e spento = testo primario; bordo tenue = bordo forte; anello del fuoco più spesso. */
html[data-a11y-testo="grande"] { --a11y-zoom: 1.15; }
html[data-a11y-testo="molto-grande"] { --a11y-zoom: 1.3; }
/* lo zoom va sul CONTENUTO della pagina (.cli-view dei portali React), non su <html>: i gusci alti quanto la finestra (100dvh: barra laterale, testata) ingranditi
   uscivano dallo schermo (provato: barra tagliata in alto, contenuto tagliato a destra). Sul contenuto il testo più grande va a capo e la pagina scorre in verticale
   (provato a 1280 px con «Molto grande»: nessuno scorrimento orizzontale). Il gestionale (docente, ente) non ha ancora questa scheda nelle sue Impostazioni:
   lì vale lo zoom del browser (Ctrl/⌘ +). */
html[data-a11y-testo] .cli-view { zoom: var(--a11y-zoom, 1); }

html[data-a11y-movimento="ridotto"] *,
html[data-a11y-movimento="ridotto"] *::before,
html[data-a11y-movimento="ridotto"] *::after {
  animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important;
}

html[data-a11y-contrasto="alto"],
html[data-a11y-contrasto="alto"] body,
html[data-a11y-contrasto="alto"] .cli-root {
  --testo-secondario: var(--testo-primario) !important; --testo-spento: var(--testo-primario) !important; --bordo-tenue: var(--bordo-forte) !important;
  --t2: var(--t1) !important; --t3: var(--t1) !important; --b1: var(--b2) !important;
}
html[data-a11y-contrasto="alto"] :focus-visible { outline-width: 3px !important; outline-offset: 2px !important; }