/* ============================================================================
   tema.css — la palette del prodotto, una sola per il sito e per le aree riservate.

   Approvata dal titolare il 23/09/2026 guardandola in /dev/proposta. Prima i due fogli dichiaravano **70 tinte
   diverse**, 33 delle quali magenta, alcune indistinguibili a occhio (#fbeef6 e #fdeef6, #f7c0d6 e #f7c1d7), e i
   nomi dicevano da dove venivano invece che a cosa servivano (`--bd-btn2-h-fondo`).

   Due piani, e vanno tenuti distinti:

   1. LA SCALA — le tinte che esistono, numerate per luminosità. Fuori da qui non c'è nessun colore. Una regola
      non dovrebbe usarle quasi mai: servono ai ruoli.
   2. I RUOLI — i nomi che le regole scrivono, e che un giorno si cambieranno da un pannello. Un ruolo dice a cosa
      serve un colore, non che colore è. Ogni ruolo prende un passo della scala in tema chiaro e un altro in tema
      scuro: il tema scuro non è più una seconda lista da tenere allineata a mano, è una colonna della stessa
      tabella.

   Una fascia con un fondo suo (la sezione delle badanti, il filtro delle province) NON si scrive con colori
   propri: ridichiara i ruoli al suo interno, e tutto quello che ci sta dentro continua a funzionare.

   I contrasti di ogni coppia sono misurati da `tests/test_accessibilita.py`, in tutti e due i temi: testo 4,5:1
   (WCAG 1.4.3), forme e contorni che vogliono dire qualcosa 3:1 (1.4.11).
   ============================================================================ */
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:200 900;font-display:swap;src:url(/static/brand/fonts/SourceSans3-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:200 900;font-display:swap;src:url(/static/brand/fonts/SourceSans3-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Sans 3";font-style:italic;font-weight:200 900;font-display:swap;src:url(/static/brand/fonts/SourceSans3-corsivo-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Sans 3";font-style:italic;font-weight:200 900;font-display:swap;src:url(/static/brand/fonts/SourceSans3-corsivo-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Phinster";font-style:normal;font-weight:400;font-display:swap;src:url(/static/brand/fonts/Phinster.ttf) format("truetype")}
@font-face{font-family:"Phinster";font-style:normal;font-weight:700;font-display:swap;src:url(/static/brand/fonts/PhinsterBold.ttf) format("truetype")}

/* ---------------------------------------------------------------- 1. LA SCALA (non cambia col tema) */
:root{
  --facebook:#1877f2;   /* il blu del marchio di Facebook, solo sul suo logo nel pulsante d'accesso (21/10) */
  /* Magenta: il colore del marchio. Il 600 è il viola del logo, il 700 è quello che regge il contrasto sul bianco. */
  --mg-100:#fdeef6;--mg-200:#f7c0d6;--mg-300:#f0a1d4;--mg-400:#d65cb0;--mg-500:#b3308a;
  --mg-600:#9d0d72;--mg-700:#7c0a5a;--mg-800:#5c0b44;--mg-900:#3a0a2d;
  /* Neutri: fondi e testi, dal bianco al quasi nero. Tirano al violetto, non al grigio freddo. */
  --ne-0:#ffffff;--ne-50:#f4f3f8;--ne-200:#dcd8e6;--ne-300:#c9c2d6;--ne-400:#9c94ab;
  --ne-600:#5b646e;--ne-700:#3f444b;--ne-800:#2b2f36;--ne-900:#221c2e;--ne-950:#171320;
  /* Lilla: il secondo colore, dal kit del sito. Regge il grado «verificata». */
  --li-1:#ded5f7;--li-2:#7a6fac;--li-3:#3a2a8c;
  /* il viola del logo (#7b6ead) per i pulsanti pieni: appena scurito perché il bianco sopra arrivi a 4,9:1, e un passo
     più scuro, stessa tinta, per il passaggio del mouse (28/09) */
  --lg-600:#7568a8;--lg-700:#5b5090;
  /* Celeste: il fondo delle schede dei badanti uomini, chiaro in tema chiaro e notte in tema scuro (titolare, 2/10). */
  --ce-100:#e6f2fb;--ce-300:#a9cdea;--ce-700:#2f5f86;--ce-900:#0f2a3f;
  /* Oro: il grado più alto, «con referenze». */
  --oro-1:#fbf0d3;--oro-2:#a8760a;--oro-3:#6b4a06;
  /* La mappa delle regioni ha bisogno di un tono medio che si stacchi dalla fascia rosa: nessun passo della scala
     magenta ci arriva (il 400 sul 100 fa 2,1:1), quindi queste tre tinte restano sue. */
  --mp-fondo:#b56ea3;--mp-linea:#fdeef6;--mp-attiva:#4a0836;
  --disp:"Phinster",Georgia,"Times New Roman",serif;
  /* Colori del vecchio kit del sito pubblico (R-10, 19/10): erano scritti a mano in sito.css e app.css. Stanno qui
     perché fuori dalla scala non c'è nessun colore; nel rifacimento grafico si decide quali tenere e quali portare
     al passo della scala più vicino. Il numero è la luminosità (0 nero, 100 bianco); «a18» è la trasparenza. */
  --kit-arancio-31:#8a5a12;--kit-arancio-39:#b84a0e;--kit-arancio-59:#f0803c;--kit-arancio-68:#f2a06b;--kit-arancio-95:#fdf1e9;
  --kit-blu-11:#111a26;--kit-blu-12:#0b1b33;--kit-blu-12b:#0f1b2d;--kit-blu-14:#182230;--kit-blu-17:#1c2a3d;--kit-blu-20:#243044;--kit-blu-21:#173156;--kit-blu-22:#1d3352;--kit-blu-28:#34445c;--kit-blu-28b:#33445c;--kit-blu-30:#3a4a5e;--kit-blu-34:#1f4e8c;--kit-blu-35:#48566a;--kit-blu-48:#6b7789;--kit-blu-52:#0866ff;--kit-blu-62:#8f9bab;--kit-blu-63:#8fa0b4;--kit-blu-65:#8ea3bf;--kit-blu-71:#9fb2cc;--kit-blu-72:#9bb4d6;--kit-blu-74:#a9bace;--kit-blu-79:#b7c6dd;--kit-blu-81:#bccbe0;--kit-blu-82:#c3cfdd;--kit-blu-83:#c9d2de;--kit-blu-83b:#c3d0e2;--kit-blu-84:#cfd6de;--kit-blu-87:#cfdaeb;--kit-blu-91:#e3e8ef;--kit-blu-91b:#dce6f3;--kit-blu-91bb:#dbe6f4;--kit-blu-93:#e2eaf6;
  --kit-grigio-0:#000000;
  --kit-oro-46:#d4a017;
  --kit-prugna-10:#241021;--kit-prugna-10b:#2e0622;--kit-prugna-17:#36202f;--kit-prugna-18:#4a1240;--kit-prugna-26:#6b1a5a;--kit-prugna-31:#5c4455;--kit-prugna-32:#5e4455;--kit-prugna-33:#8a1f3d;--kit-prugna-51:#a35f92;--kit-prugna-55:#9b7f94;--kit-prugna-79:#e0b3d0;--kit-prugna-8:#25061c;--kit-prugna-81:#dcc0d4;--kit-prugna-91:#f6dcec;--kit-prugna-95:#f6edf3;
  --kit-rosso-44:#b4322a;--kit-rosso-92:#f8e0dd;--kit-rosso-93:#ffe1dd;
  --kit-verde-26:#1a6b43;--kit-verde-90:#ddf0e5;--kit-verde-91:#e2f0e8;
  --bianco-a15:rgba(255,255,255,.15);--bianco-a25:rgba(255,255,255,.25);--bianco-a40:rgba(255,255,255,.4);--bianco-a50:rgba(255,255,255,.5);--kit-arancio-39-a55:rgba(184,74,14,.55);--kit-arancio-49-t-a16:rgba(226,96,26,.16);--kit-blu-11-t-a86:rgba(10,23,44,.86);--kit-blu-12-a10:rgba(11,27,51,.10);--kit-blu-12-a35:rgba(11,27,51,.35);--kit-blu-12-a50:rgba(11,27,51,.5);--kit-blu-12-a55:rgba(11,27,51,.55);--kit-blu-12-a82:rgba(11,27,51,.82);--kit-blu-14-a14:rgba(24,34,48,.14);--kit-blu-9-t-a95:rgba(9,20,38,.95);--kit-prugna-10-a35:rgba(36,16,33,.35);--kit-prugna-10-a45:rgba(36,16,33,.45);--kit-prugna-14-t-a45:rgba(61,10,47,.45);--kit-prugna-14-t-a50:rgba(61,10,47,.5);--mg-700-a16:rgba(124,10,90,.16);--ne-800-a14:rgba(43,47,54,.14);--ne-800-a16:rgba(43,47,54,.16);--nero-a08:rgba(0,0,0,.08);--nero-a10:rgba(0,0,0,.10);--nero-a12:rgba(0,0,0,.12);--nero-a14:rgba(0,0,0,.14);--nero-a18:rgba(0,0,0,.18);--nero-a25:rgba(0,0,0,.25);--nero-a28:rgba(0,0,0,.28);--nero-a35:rgba(0,0,0,.35);--nero-a45:rgba(0,0,0,.45);--nero-a50:rgba(0,0,0,.5);--nero-a60:rgba(0,0,0,.6);--nero-a65:rgba(0,0,0,.65);
}

/* ---------------------------------------------------------------- 6. LE FORME (R-10, 19/10): angoli e ombre
   Prima c'erano 28 raggi diversi (da 2 a 28 px) e 35 ombre: ora cinque raggi, due forme fisse e cinque ombre. Gli
   anelli e i fili (box-shadow senza sfocatura, «inset 3px 0 0 …») non sono ombre ma linee, e restano nelle regole. */
:root{
  --raggio-1:4px;          /* campi piccoli, pastiglie squadrate */
  --raggio-2:8px;          /* pulsanti, campi, riquadri piccoli */
  --raggio-3:12px;         /* schede */
  --raggio-4:16px;         /* riquadri grandi, il modulo della richiesta */
  --raggio-5:24px;         /* fasce e finestre */
  --raggio-pillola:999px;  /* pastiglie e pulsanti tondi ai lati */
  --raggio-cerchio:50%;    /* tondi: avatar, pallini, icone */
  --ombra-1:0 8px 24px var(--nero-a10);              /* schede che si staccano dal fondo */
  --ombra-2:0 12px 32px var(--nero-a18);             /* tendine e menu aperti */
  --ombra-3:0 20px 60px var(--nero-a28);             /* finestre sopra la pagina */
  --ombra-vetrina:0 30px 60px -30px var(--nero-a45); /* le schede grandi della home: ombra solo sotto */
  --ombra-su:0 -8px 22px var(--nero-a10);            /* barre fisse in fondo allo schermo */
  --ombra-cta:0 6px 16px var(--kit-arancio-39-a55);  /* il pulsante arancione del vecchio kit */
}
/* ---------------------------------------------------------------- 7. LE LARGHEZZE DELLO SCHERMO (R-10, 19/10)
   Il CSS non legge le variabili dentro @media, quindi le larghezze in cui la pagina cambia aspetto sono un elenco
   fisso, controllato da tests/test_regole_grafiche.py: max-width 340, 380, 420 (telefoni dal più stretto), 480,
   600, 760 (tablet), 900, 1100 (computer piccolo), 1440; min-width 601, 761, 901 (subito sopra). Erano 17: si sono
   unite solo larghezze fra le quali non cade nessuno schermo comune (360, 375, 390, 414, 430, 768, 820, 1024, 1280). */

/* ---------------------------------------------------------------- 2. I RUOLI — tema chiaro */
:root{
  --fondo:var(--ne-0);              /* il fondo della pagina */
  --fascia-cta:#b36ea1;             /* la fascia «Chiedi una badante» in fondo a home e agenzie (titolare, 29/09); col bianco fa 3,7:1, basta solo al testo grande */
  --fascia-cta-2-fondo:var(--ne-0);--fascia-cta-2-testo:var(--mg-700);--fascia-cta-2-bordo:var(--ne-0);   /* il secondo pulsante della fascia */
  --superficie:var(--ne-50);        /* schede, fasce, riquadri */
  --testo:var(--ne-800);
  --testo-tenue:var(--ne-600);      /* note, didascalie, etichette */
  --bordo:var(--ne-200);            /* righe di separazione: un filo */
  --campo-bordo:var(--ne-600);      /* il contorno di un campo da compilare: deve vedersi (3:1) */
  --campo-rosa:#fff4f9;             /* fisso, per i riquadri bianchi anche nel tema scuro (.rc) */
  --campo-su-bianco:var(--campo-rosa);   /* R-12: un campo da compilare su fondo bianco è rosa, mai grigio (il grigio è «bloccato») */
  --campo-fondo:var(--campo-su-bianco);   /* i riquadri colorati lo rimettono bianco (--fondo) per i loro campi */
  --marchio:var(--mg-600);          /* segni grafici del marchio */
  --titolo:var(--mg-700);
  --link:var(--mg-700);
  --tenue:var(--mg-100);            /* il fondo delle fasce rosa */
  /* I pulsanti sono due, e nessuno dei due è trasparente: sotto ci sono tre fondi diversi (pagina, scheda, fascia),
     e un pulsante senza fondo suo sparisce su almeno uno. Il principale è pieno con la scritta bianca; il
     secondario ha un fondo suo e un contorno, e col mouse sopra diventa pieno. */
  --btn-fondo:var(--mg-700);--btn-testo:var(--ne-0);
  --btn-fondo-over:var(--mg-800);--btn-testo-over:var(--ne-0);
  /* R-50 (Mattia, 29/10): il secondario ha un fondo suo, rosa pieno, col contorno magenta; il bianco col contorno
     sul fondo bianco era tono su tono («Collabora con noi»). Il muto, grigio pieno, per le azioni minori (Annulla,
     Torna su, il tema). Nessuno trasparente; misurati sui tre fondi nei due temi in app/dominio/palette.py. */
  --btn2-fondo:var(--mg-200);--btn2-bordo:var(--mg-700);--btn2-testo:var(--mg-900);
  --btn2-fondo-over:var(--mg-700);--btn2-testo-over:var(--ne-0);
  --btn4-fondo:var(--ne-300);--btn4-testo:var(--ne-900);--btn4-fondo-over:var(--ne-400);--btn4-testo-over:var(--ne-950);
  /* Il terzo, «Lavora come badante» nel menu: pieno come il principale, nel viola del logo, uguale nei due temi. */
  --btn3-fondo:var(--lg-600);--btn3-fondo-over:var(--lg-700);--btn3-testo:var(--ne-0);
  /* Stati: solo nelle aree riservate. È l'unica famiglia che cambia tinta col tema invece di cambiare passo. */
  --ok:#1a6b43;--ok-fondo:#ddf0e5;--avviso:#8a5a12;--avviso-fondo:#fbf0d6;--errore:#b4322a;--errore-fondo:#f8e0dd;
  /* I segni che dicono «badante.it» dentro i moduli (24/09): spunte violette invece del blu del browser, barra del
     profilo magenta invece del verde, riquadri con un filo rosa invece del grigio. */
  --spunta:var(--li-2);--progresso:var(--mg-600);--riquadro-bordo:var(--mg-300);
  /* La testata del backoffice (titolare, 12/10): più intensa, uguale nei due temi, perché chi lavora dentro capisca
     a colpo d'occhio che non è nell'area di una famiglia, di una badante o di un'organizzazione. */
  --ops-fondo:var(--mg-800);--ops-testo:var(--ne-0);--ops-bordo:var(--mg-400);
  /* il pannello del menu del sito (Mattia, 5/11): prugna nei due temi, voci bianche, così il rosa della voce aperta
     risalta; sul grigio chiaro non si staccava */
  --menu-fondo:var(--mg-800);--menu-voce:var(--ne-0);--menu-voce-over:var(--mg-200);--menu-riga:var(--bianco-a25);--menu-bordo:var(--mg-400);
  --pericolo-testo:var(--ne-0);     /* la scritta del pulsante rosso (recedere dal Pro), bianca su --errore */
}

/* ---------------------------------------------------------------- 2b. I RUOLI — tema scuro
   In tema scuro il pulsante pieno NON può essere magenta: qualunque magenta della scala su un fondo scuro sta
   sotto il 3:1 (il 600 sul 950 fa 2,38), quindi la forma del pulsante si perderebbe. Lì il pieno è chiaro e la
   scritta scura. È l'unico punto in cui i due temi non si specchiano, e viene dai numeri. */
:root[data-theme="dark"]{color-scheme:dark;
  --fascia-cta:var(--mg-600);--fascia-cta-2-fondo:transparent;--fascia-cta-2-testo:var(--ne-0);--fascia-cta-2-bordo:rgba(255,255,255,.6);
  --fondo:var(--ne-950);--superficie:var(--ne-900);--testo:var(--ne-50);--testo-tenue:var(--ne-300);
  --bordo:var(--ne-700);--campo-bordo:var(--ne-400);--campo-su-bianco:var(--ne-900);--campo-fondo:var(--campo-su-bianco);--marchio:var(--mg-400);--titolo:var(--mg-300);
  --link:var(--mg-300);--tenue:var(--mg-900);
  --btn-fondo:var(--ne-0);--btn-testo:var(--mg-700);
  --btn-fondo-over:var(--mg-200);--btn-testo-over:var(--mg-800);
  --btn2-fondo:var(--mg-800);--btn2-bordo:var(--mg-300);--btn2-testo:var(--mg-100);
  --btn2-fondo-over:var(--mg-200);--btn2-testo-over:var(--mg-800);
  --btn4-fondo:var(--ne-700);--btn4-testo:var(--ne-0);--btn4-fondo-over:var(--ne-600);--btn4-testo-over:var(--ne-0);
  --ok:#6fcf97;--ok-fondo:#12331f;--avviso:#e9b949;--avviso-fondo:#3a2c0d;--errore:#f28b82;--errore-fondo:#3d1512;
  --mp-fondo:#ab6291;--mp-linea:#3a0a2d;--mp-attiva:#ffffff;
  --spunta:var(--li-1);--progresso:var(--mg-300);--riquadro-bordo:var(--mg-800);
  --ops-fondo:var(--mg-800);--ops-testo:var(--ne-0);--ops-bordo:var(--mg-400);--pericolo-testo:var(--ne-950);
  --blue:var(--li-1);--blue-soft:var(--li-3);--viola:var(--li-1);   /* R-14: nel tema scuro il lilla dei link è quello chiaro */
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;
  --fascia-cta:var(--mg-600);--fascia-cta-2-fondo:transparent;--fascia-cta-2-testo:var(--ne-0);--fascia-cta-2-bordo:rgba(255,255,255,.6);
  --fondo:var(--ne-950);--superficie:var(--ne-900);--testo:var(--ne-50);--testo-tenue:var(--ne-300);
  --bordo:var(--ne-700);--campo-bordo:var(--ne-400);--campo-su-bianco:var(--ne-900);--campo-fondo:var(--campo-su-bianco);--marchio:var(--mg-400);--titolo:var(--mg-300);
  --link:var(--mg-300);--tenue:var(--mg-900);
  --btn-fondo:var(--ne-0);--btn-testo:var(--mg-700);
  --btn-fondo-over:var(--mg-200);--btn-testo-over:var(--mg-800);
  --btn2-fondo:var(--mg-800);--btn2-bordo:var(--mg-300);--btn2-testo:var(--mg-100);
  --btn2-fondo-over:var(--mg-200);--btn2-testo-over:var(--mg-800);
  --btn4-fondo:var(--ne-700);--btn4-testo:var(--ne-0);--btn4-fondo-over:var(--ne-600);--btn4-testo-over:var(--ne-0);
  --ok:#6fcf97;--ok-fondo:#12331f;--avviso:#e9b949;--avviso-fondo:#3a2c0d;--errore:#f28b82;--errore-fondo:#3d1512;
  --mp-fondo:#ab6291;--mp-linea:#3a0a2d;--mp-attiva:#ffffff;
  --spunta:var(--li-1);--progresso:var(--mg-300);--riquadro-bordo:var(--mg-800);
  --ops-fondo:var(--mg-800);--ops-testo:var(--ne-0);--ops-bordo:var(--mg-400);--pericolo-testo:var(--ne-950);
  --blue:var(--li-1);--blue-soft:var(--li-3);--viola:var(--li-1);   /* R-14: nel tema scuro il lilla dei link è quello chiaro */
}}

/* ---------------------------------------------------------------- 3. I GRADI DELLA BADANTE
   Decisi col titolare il 22/09: iscritta grigia e senza simbolo, verificata violetta con la spunta, con referenze
   oro con la stella. Sono gli stessi tre sul sito e nel backoffice. */
:root{
  --gr-iscritta-fondo:var(--ne-200);--gr-iscritta-testo:var(--ne-800);
  --gr-verificata-fondo:var(--li-1);--gr-verificata-testo:var(--li-3);
  --gr-referenze-fondo:var(--oro-1);--gr-referenze-testo:var(--oro-3);--gr-referenze-segno:var(--oro-2);
}

/* ---------------------------------------------------------------- 4. I VECCHI NOMI, PER ORA
   I due fogli scrivono ancora i nomi di prima in centinaia di punti. Finché non sono riscritti uno per uno, questi
   alias li fanno puntare ai ruoli: nessuna regola si rompe, e i colori diventano quelli nuovi tutti insieme.
   Vanno via via cancellati; quando questa sezione è vuota, il lavoro è finito. */
:root{
  --ink:var(--testo);--ink2:var(--testo-tenue);--ink3:var(--testo-tenue);
  --line:var(--bordo);--bg:var(--fondo);--bg2:var(--superficie);
  --accent:var(--marchio);--accent-ink:var(--titolo);--accent-testo:var(--titolo);--req:var(--titolo);
  --blue:var(--lg-700);--blue-soft:var(--li-1);--rosa:var(--mg-200);--viola:var(--lg-600);   /* R-14 (19/10): il lilla --li-2 faceva 4,47:1 sul bianco; i link stanno anche sui fondi grigi, quindi il passo più scuro */
  --su-fondo:var(--titolo);--btn-hover:var(--btn-fondo-over);
  --ok-soft:var(--ok-fondo);--warn:var(--avviso);--warn-soft:var(--avviso-fondo);--bad:var(--errore);--bad-soft:var(--errore-fondo);
  --num-fondo:var(--btn-fondo);--num-testo:var(--btn-testo);
  --fi-fondo:var(--tenue);--fi-bordo:var(--mg-200);--fi-testo:var(--titolo);
  --fi-uomo-fondo:var(--ce-100);--fi-uomo-bordo:var(--ce-300);   /* la scheda del badante uomo */
}
:root[data-theme="dark"]{--fi-bordo:var(--mg-800);--fi-uomo-fondo:var(--ce-900);--fi-uomo-bordo:var(--ce-700)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--fi-bordo:var(--mg-800);--fi-uomo-fondo:var(--ce-900);--fi-uomo-bordo:var(--ce-700)}}

/* ---------------------------------------------------------------- 4. LE ANCORE
   Regola del progetto (25/09): ogni ancora porta dolcemente al suo punto, mai con un salto, su tutte le pagine del
   sito e delle aree riservate. Chi ha chiesto al sistema meno movimento ci arriva di colpo. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------------------------------------------------------------- 5. LA SCALA DEI CARATTERI
   Decisa col titolare il 30/09/2026: prima i fogli dichiaravano 38 dimensioni diverse, da 10 a 54 px, e le note
   a 12-13 px non si leggevano sul telefono. Ora il minimo del testo è 16 px; fanno eccezione solo i suggerimenti
   sotto i campi dei moduli, a 14 px con interlinea larga (titolare, 2/10), e le descrizioni brevi del backoffice,
   a 13 px (titolare, 5/10). Nessuna regola scrive un numero, tutte
   usano uno di questi nomi (lo controlla `tests/test_tipografia.py`). Per cambiare la grandezza del testo di tutto
   il sito si cambia un valore qui. */
:root{
  --fs-suggerimento:14px;                       /* solo i suggerimenti sotto i campi dei moduli (titolare, 2/10) */
  --fs-descrizione:14px;                        /* le descrizioni brevi del backoffice, sotto un nome (titolare, 5/10; 14 dal 19/10, R-11) */
  --fs-etichetta:10px;                          /* solo l'etichetta «PRO» accanto al nome della famiglia (titolare, 12/10) */
  --fs-conta:12px;                              /* solo il numero nel pallino della campanella (titolare, 13/10) */
  --fs-nota:16px;                               /* note, didascalie, etichette: il minimo del testo */
  --fs-testo:18px;                              /* il testo normale di sito e aree riservate */
  --fs-grande:20px;                             /* testo in evidenza, titoli di schede e riquadri */
  --fs-titolo-3:22px;                           /* h3 */
  --fs-titolo-2:26px;                           /* h2 */
  --fs-titolo-1:clamp(28px,4vw + 14px,36px);    /* h1: 28 sul telefono, 36 su computer */
  --fs-vetrina:clamp(34px,5vw + 18px,54px);     /* solo i titoli grandi della home */
}
body{font-size:var(--fs-testo)}
h1{font-size:var(--fs-titolo-1)}h2{font-size:var(--fs-titolo-2)}h3{font-size:var(--fs-titolo-3)}
h4,h5,h6{font-size:var(--fs-grande)}
small,sub,sup{font-size:var(--fs-nota)}
button,input,select,textarea{font-size:inherit}