/* tokens.css — design genome language_school. Scuola di lingue e centro culturale: fondo CHIARO con
   episodi di banda scura piena, display CONDENSATO maiuscolo e fotografia a piena pagina. Il registro
   nasce dall'incrocio di due riferimenti con compiti separati: la STRUTTURA da un template di scuola di
   lingue (testata a pillola galleggiante, schede-categoria con tessera-icona, chip, fondo a carta
   millimetrata, accordion), il REGISTRO da un template editoriale d'arte (condensato maiuscolo, bande
   fotografiche a piena pagina con occhiello e contatore, elenchi a filetti, asimmetria).
   Vocabolario CHIUSO di token semantici: la sorgente da cui deriva theme.json. Niente valori fuori da qui.

   La palette NON viene da un catalogo: è MISURATA sui pixel del marchio del primo cliente — un globo
   rosso dentro un anello di bandiere del mondo, con la dicitura in arancio. I bucket dominanti dei pixel
   opachi non bianchi sono grafite #1e1916, rossi #d14436/#ad1219/#ec3120 e aranci #e87716/#f25f1b; il
   blu istituzionale #2f3d9c e l'arancio #dd631a escono identici dai computed style del suo sito vivo.
   ⚠ Il rosso di marca #d53832 col bianco caldo fa 4,31: sotto AA per il corpo. --accent è lo stesso rosso
   scurito del MINIMO che serve per passare CON MARGINE (4,86) — un margine appena sopra soglia si consuma
   al primo ritocco, e questo verticale ha già visto quel film in famiglia.

   Contratto palette (a11y, MISURATO su 24 coppie — non stimato):
   ink su paper 17,76 · ink su surface 15,77 · ink su sage-tint 16,16 · ink-muted su paper 6,39 ·
   brand su paper 9,26 · accent-ink su paper 6,16 · on-dark su accent 4,86 · on-dark su brand 8,44 ·
   on-dark su brand-dark 15,98 · on-dark-muted su brand-dark 9,52 · sage-light su brand-dark 7,61.

   ⚠⚠ REGOLE D'USO NON NEGOZIABILI (nascono dai numeri, non dal gusto):
   - --sage (arancio #DD631A) NON PORTA TESTO PICCOLO: fa 3,26 col bianco caldo. È superficie, filetto,
     segno e testo GRANDE. L'arancio che parla su fondo scuro è --sage-light (7,61);
   - --brand (blu) vive SOLO su fondo chiaro: sulla banda notte fa 2,02 ed è invisibile. Sul buio i ruoli
     che parlano sono --on-dark, --on-dark-muted e --sage-light;
   - per la stessa ragione l'anello di FOCUS cambia colore sul buio: --focus è il blu, e components.css lo
     ridichiara a --sage-light dentro le bande scure. Un focus invisibile è un focus assente;
   - --ink-muted vale SOLO su fondo chiaro; su fondo scuro si usa --on-dark-muted;
   - un testo sopra una FOTO non è coperto da questi rapporti: va misurato dal pixel renderizzato. La
     testata fotografica porta perciò un velo tarato sul fotogramma più chiaro dello slideshow. */
:root {
  /* --- Colore (carta calda + notte istituzionale + rosso/arancio del marchio) --- */
  --paper:      #FFFFFF;  /* carta: fondo dominante — la fotografia respira sul chiaro */
  --surface:    #F4F1EC;  /* carta calda: sezioni alternate */
  --surface-2:  #E9E4DB;  /* superfici di riposo e placeholder */
  --ink:        #15181F;  /* inchiostro: testo (17,76:1 su paper) */
  --ink-muted:  #5A5F6B;  /* inchiostro tenue: testo secondario SOLO su fondo chiaro (6,39:1) */
  --line:       #E3DFD8;  /* filetto: bordi e righe (non-testo) */
  --brand:      #2F3D9C;  /* BLU del marchio: titoli, link, occhielli su chiaro (9,26:1) */
  --brand-mid:  #4A57B5;  /* blu medio: hover, superfici scure intermedie (bianco caldo 5,76) */
  --brand-dark: #101736;  /* NOTTE: fondo delle bande piene e del piè (bianco caldo 15,98) */
  --sage:       #DD631A;  /* ARANCIO del marchio: superfici, filetti, segni. MAI testo piccolo (3,26) */
  --sage-light: #F0954E;  /* arancio chiaro: l'arancio che porta TESTO sul buio (7,61) */
  --sage-tint:  #FBF3EA;  /* sabbia: la banda alternata calda */
  --accent:     #C9302A;  /* ROSSO del marchio (scurito per AA): bottone primario, testo bianco (4,86) */
  --accent-ink: #B62E28;  /* rosso portato a TESTO su chiaro: occhielli, numerali, link (6,16) */
  --accent-dark:#A5241F;  /* rosso profondo: hover del bottone primario (6,66) */
  --on-dark:    #F7F4EF;  /* testo su fondi pieni (15,98 sulla notte · 4,86 sul rosso) */
  --on-dark-muted: #B9BED6; /* testo secondario su fondo scuro (9,52 sulla notte) */
  /* Velo della fotografia della testata: il titolo ci sta SOPRA, quindi il velo non è decorativo — è
     ciò che tiene il contrasto quando lo slideshow arriva al fotogramma più chiaro (aula luminosa). */
  --scrim:      rgba(16,23,54,.30);
  --scrim-deep: rgba(16,23,54,.68);

  --bg: var(--paper);
  --fg: var(--ink);
  --focus: var(--brand);

  /* --- Tipografia: display CONDENSATO (IBM Plex Sans Condensed) + testo geometrico caldo (Manrope),
     entrambi OFL self-hosted. Il condensato è il segno del riferimento di registro: regge il maiuscolo a
     scala grande senza gridare, e IBM Plex ha una copertura di script ampia — non guasta per una scuola
     che insegna dieci lingue. Manrope è il display del riferimento di struttura, qui portato al corpo. --- */
  --font-display: "IBM Plex Sans Condensed", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* scala tipografica: salto display↔testo molto marcato (il riferimento di registro sta a h1 68px con
     tracking negativo). ⚠ Tarata sulla copy DEMO: sulla copy reale va misurata nel contenitore vero, e
     un titolo che passa da riga piena a colonna scende di un gradino. */
  --text-sm:   0.75rem;   /* occhielli e meta, maiuscoletto tracciato */
  --text-base: 1.0625rem; /* 17 corpo */
  --text-md:   clamp(1.05rem, 0.98rem + 0.4vw, 1.2rem);   /* lead */
  --text-lg:   clamp(1.2rem, 1.04rem + 0.7vw, 1.55rem);   /* H3 */
  --text-xl:   clamp(1.7rem, 1.3rem + 1.7vw, 2.45rem);    /* H2 — titoli di sezione */
  --text-2xl:  clamp(1.95rem, 1.4rem + 2.2vw, 3.1rem);    /* display di sezione e page-head */
  /* ⚠ La page-head NON riusa la size della testata (regola 6): è una testata di pagina, non un hero. */
  --text-3xl:  clamp(2.3rem, 1.5rem + 3.2vw, 4.15rem);    /* display della testata fotografica */

  --lh-tight: 1.02;   /* il condensato maiuscolo si stringe: sotto 1.05 le righe si incastrano */
  --lh-snug: 1.12;
  --lh-body: 1.68;
  --tracking-label: 0.16em;     /* gli occhielli sono tracciati, mai gridati */
  --tracking-display: -0.02em;  /* il condensato a scala grande vuole il tracking negativo */

  /* --- Spaziatura --- */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem;
  --space-6:2rem; --space-7:3rem; --space-8:4.5rem; --space-9:7rem; --space-10:10rem;
  --section-y: clamp(3.4rem, 2.2rem + 4vw, 6.5rem);

  /* --- Layout --- */
  --container: 1240px;
  --container-narrow: 64ch;
  --gutter: clamp(1.1rem, 0.5rem + 2.4vw, 2.4rem);

  /* --- Forma: angolo NETTO sulle superfici editoriali, pillola sui comandi. È la sintesi dei due
     riferimenti: il registro editoriale taglia dritto, la struttura arrotonda ciò che si clicca. --- */
  --radius: 4px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  /* Il raggio dei CAMPI si separa da quello dei bottoni: una casella di testo a pillola non legge come
     moderna ma come sbagliata. */
  --field-radius: var(--radius);

  --border: 1px solid var(--line);

  /* Distanza fra il bordo della pagina e il contenitore: è ciò che un blocco deve recuperare per arrivare
     a filo pagina. ⚠ CRESCE SENZA LIMITE con la finestra (a 2560px vale 660): chi la usa come padding di
     compenso DEVE aggiungerla anche alla propria larghezza massima, altrimenti su un monitor largo il
     padding si mangia il blocco e il testo si riduce a una colonna di una lettera. */
  --bleed: max(var(--gutter), (100vw - var(--container)) / 2);

  /* Rapporto delle figure. Il verticale nasce attorno a fotografia ORIZZONTALE 3/2, perché è ciò che il
     settore produce (scatti di aula e di studio da banca immagini). È un valore, non una struttura: vive
     qui perché un preset possa portarlo al verticale per il sito che ha solo scatti alti. */
  --fig-ratio: 3 / 2;
  --fig-ratio-wide: 16 / 9;
  --fig-object-pos: 50% 50%;

  /* --- Leve di registro per-sito: il default è il comportamento storico del verticale. --- */
  --topbar-display: flex;            /* fascia di servizio: alcune scuole non vogliono recapiti in testata */
  --hero-min-h: clamp(560px, 82vh, 860px);
  --footer-cols: 1.3fr 1fr 1fr;
  --footer-cols-2: 1.3fr 1fr;        /* ⚠ serve a --footer-cols quando una colonna sparisce */
  --contact-fig-h: clamp(230px, 34vw, 420px);
  --griglia-display: block;          /* il fondo a carta millimetrata delle sezioni chiare */

  /* --- Ombra (sobria: il registro editoriale non gonfia) --- */
  --shadow-sm: 0 6px 18px rgba(21,24,31,.07);
  --shadow-md: 0 26px 54px -30px rgba(21,24,31,.34);
  --shadow-pill: 0 10px 30px -12px rgba(16,23,54,.45);

  --tile-gap: clamp(0.9rem, 0.45rem + 1.3vw, 1.6rem);

  /* Altezza del «cromo» in testa alla pagina (fascia di servizio + intestazione a pillola). I valori sono
     le altezze REALI: si FISSANO, non si deducono dalle metriche del font. ⚠ La pillola è staccata dal
     bordo, quindi il cromo include anche il suo margine superiore. */
  --chrome-topbar: 34px;   /* contributo della fascia di servizio: 0 se spenta */
  --chrome-pill: 64px;     /* altezza della barra a pillola */
  --chrome-gap: 14px;      /* stacco della pillola dal bordo pagina */
  --chrome: calc(var(--chrome-pill) + var(--chrome-gap) * 2 + var(--chrome-topbar));
  /* Altezza della pillola CONTRATTA (shrinkHeader): è il «header dinamico» del verticale. */
  --chrome-pill-shrunk: 52px;

  /* --- Sfumature. ⚠ Il punto più CHIARO di ogni sfumatura che porta testo chiaro non sale mai sopra
     --brand-mid (#4A57B5, bianco caldo 5,76): sotto quella soglia il contrasto è garantito lungo TUTTA
     la rampa, non solo al centro. Le sfumature decorative non portano testo e possono schiarire. --- */
  --grad-notte:   linear-gradient(158deg, #1A2350 0%, #101736 55%, #0B1029 100%);
  --grad-banda:   linear-gradient(100deg, #101736 0%, #1C2757 48%, #0D1330 100%);
  --grad-foot:    linear-gradient(180deg, #101736 0%, #090D22 100%);
  --grad-carta:   linear-gradient(180deg, #FFFFFF 0%, #FDFAF6 60%, #F4F1EC 100%);
  --grad-sabbia:  linear-gradient(160deg, #FBF3EA 0%, #FFFFFF 55%, #F6EEE3 100%);
  --grad-accento: linear-gradient(90deg, #C9302A 0%, #DD631A 100%);
  --grad-velo:    linear-gradient(180deg, rgba(16,23,54,0) 32%, rgba(16,23,54,.68) 100%);
  --grad-bagliore: radial-gradient(58% 58% at 80% 10%, rgba(221,99,26,.18) 0%, rgba(221,99,26,0) 70%);
  --grad-nastro:  linear-gradient(90deg, #101736 0%, #2F3D9C 50%, #101736 100%);

  /* Fondo a CARTA MILLIMETRATA: due gradienti ripetuti, nessuna immagine. È il segno di sfondo del
     riferimento di struttura — costa zero richieste e non tocca il contrasto del testo che ci sta sopra. */
  --griglia-size: 45px;
  --griglia-color: rgba(21,24,31,.055);
  --griglia: linear-gradient(var(--griglia-color) 1px, transparent 1px),
             linear-gradient(90deg, var(--griglia-color) 1px, transparent 1px);

  /* --- Motion --- */
  --ease: cubic-bezier(.2,.6,.2,1);
  --dur: 240ms;
}
@media (max-width: 899.98px) { :root { --chrome-pill: 58px; --griglia-size: 34px; } }
@media (max-width: 599.98px) { :root { --chrome-topbar: 0px; --topbar-display: none; } }
@media (prefers-reduced-motion: reduce){ :root{ --dur:0ms; } }