/* ==========================================================================
   ottica.ablavoro.com — TOKENS
   Fondazioni della demo: font, palette, scala tipografica, spazi, raggi,
   ombre, durate, z-index.
   Fonte di verita': render Figma a scala 1 su frame largo 1440 e schede
   geometria in materiali/figma-ref/geometria/.
   Nessun file di sezione deve scrivere un hex a mano: tutto passa da qui.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONT — Archivo self-hosted (nessuna CDN)
   Cinque pesi, due sottoinsiemi. I 5 pesi sono tutti usati dal design:
   400 corpo · 500 riserva · 600 titoli e occhielli · 700 grassetti e hero
   800 etichette dei pulsanti.
   -------------------------------------------------------------------------- */

/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/archivo-400-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;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/archivo-400-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;
}

/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/archivo-500-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;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/archivo-500-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;
}

/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/archivo-600-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;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/archivo-600-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;
}

/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/archivo-700-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;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/archivo-700-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;
}

/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/archivo-800-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;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/archivo-800-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;
}

:root {
  /* ------------------------------------------------------------------------
     2. COLORE
     2a. Palette di marca — valori verbatim dal Figma.
     Usali per fondi, bordi, riempimenti e icone: sono la verita' del design.
     ---------------------------------------------------------------------- */
  --blu:            #244861; /* blu istituzionale: bande scure, pulsanti, icone */
  --accento:        #2D79C5; /* accento: occhielli su fondo chiaro (fill decorativi) */
  --azzurro:        #74AEE8; /* azzurro chiaro: occhielli su banda scura (fill decorativi) */
  --azzurro-tratto: #4A90D4; /* tratto delle frecce decorative (Vector 4, 3.16px) */
  --fondo-chiaro:   #F4F7F9; /* fondo delle bande alternate */
  --bianco:         #FFFFFF;
  --nero:           #000000; /* titoli di sezione e filetto */
  --quasi-nero:     #1F2423; /* testo del consenso privacy */
  --testo:          #333333; /* testo corrente forte (titoli di riga, elenchi) */
  --testo-soft:     #55595C; /* testo secondario: quasi tutta la prosa */
  --testo-tenue:    #7A7A7A; /* grigio tenue del Figma — vedi --testo-etichetta */

  /* 2b. Bordi e filetti (verbatim dal Figma) */
  --bordo-campo:  #C0C0C0; /* input, select, checkbox */
  --bordo-riga:   #E8E8E8; /* righe elenco numerato (sez. 07) */
  --bordo-tenue:  #E4EBF0; /* accordion (sez. 11) e box mailing list nella hero */
  --bordo-footer: #235486; /* filetto sopra il footer, dentro la banda blu */

  /* ------------------------------------------------------------------------
     2c. Derivati sicuri per il TESTO.
     Tre colori del Figma non raggiungono 4,5:1 quando fanno da testo.
     Qui stanno le varianti minime che passano: lo scarto e' impercettibile
     (3-11 unita' di luminanza) e il colore di marca resta intatto sopra.
     REGOLA: se un colore diventa testo, usa la variante -ink.
     ---------------------------------------------------------------------- */
  --accento-ink:  #2A72BA; /* era #2D79C5 (4,20:1 su fondo chiaro = FUORI NORMA) */
  --azzurro-ink:  #85B8EB; /* era #74AEE8 (4,12:1 su blu = FUORI NORMA) */
  --testo-etichetta: #6F6F6F; /* era #7A7A7A (4,29:1 su bianco = FUORI NORMA) */
  --testo-placeholder: #55595C; /* placeholder dei campi: 7,07:1 su bianco */

  /* ------------------------------------------------------------------------
     2c-bis. Derivati sicuri per il NON TESTO (WCAG 1.4.11, soglia 3:1).
     Stessa logica di sopra, applicata ai due casi in cui il colore del Figma
     non e' decorazione ma l'unica cosa che DISEGNA un comando:
     - i pallini del carosello sono l'unico indicatore «ci sono altre schede»,
       e a #F4F7F9 su bianco fanno 1,08:1, cioe' non si vedono affatto;
     - input, select e checkbox hanno appearance:none, quindi il bordo da 1px
       e' il loro unico contorno, e a #C0C0C0 fa 1,82:1.
     I valori sono i piu' vicini all'originale che raggiungono 3:1, calcolati
     e non stimati.
     NON toccati, perche' sono separatori decorativi e non comandi (1.4.11 li
     esclude): --bordo-riga (1,23:1), --bordo-tenue (1,20:1) e --bordo-footer
     (1,23:1 sul blu). Restano una deviazione da dichiarare al cliente. */
  --pallino-spento: #8095A3; /* era #F4F7F9 (1,08:1 su bianco); ora 3,11:1.
                                E' --blu schiarito al 42%, quindi resta nella
                                famiglia cromatica del marchio. */
  --bordo-comando:  #949494; /* era #C0C0C0 (1,82:1 su bianco); ora 3,03:1:
                                il grigio neutro PIU' CHIARO che passa 3:1,
                                cioe' la deviazione minima possibile. */

  /* 2d. Stati derivati (hover / premuto / focus) */
  --blu-hover:        #1C3A4E;
  --blu-premuto:      #16303F;
  --chiaro-hover:     #E7EEF3; /* hover del pulsante bianco su banda scura */
  --chiaro-premuto:   #D8E3EC;
  --velo-blu:         rgba(36, 72, 97, .07);  /* hover del pulsante a contorno su chiaro */
  --velo-bianco:      rgba(255, 255, 255, .14); /* hover del pulsante a contorno su scuro */
  --focus:            #2A72BA; /* anello di focus su fondo chiaro */
  --focus-su-scuro:   #FFFFFF; /* anello di focus dentro .banda--scura */

  /* 2f. Segnale di errore dei form — NON viene dal Figma.
     Il design non prevede stati di errore, ma i due form devono poter dire in
     italiano che cosa manca: serve un colore che non sia il blu di marca (un
     messaggio di errore blu non si legge come un errore). Rosso minimo che
     resta leggibile: 6,53:1 su bianco e 6,07:1 su --fondo-chiaro.
     Aggiunto in fase di assemblaggio (js/main.js + css/parts/99-interazioni). */
  --errore: #B3261E;

  /* 2e. Contesto — le sezioni NON riassegnano questi valori a mano:
     li ribalta .banda--scura (vedi base.css). */
  --superficie:       var(--bianco);   /* fondo corrente */
  --ink-titolo:       var(--nero);     /* colore dei titoli di sezione */
  --ink-corpo:        var(--testo-soft);
  --ink-occhiello:    var(--accento-ink);
  --filetto-colore:   var(--nero);
  --contorno-colore:  var(--blu);      /* bordo+testo di .btn--contorno */
  --contorno-velo:    var(--velo-blu);
  --focus-colore:     var(--focus);

  /* ------------------------------------------------------------------------
     3. TIPOGRAFIA
     Scala presa dal Figma (Archivo). I quattro corpi grandi sono fluidi:
     l'espressione in vw vale esattamente il valore Figma a 1440px e si ferma
     li' (max), quindi a 1440 il render coincide con l'oracolo.
     Le interlinee sono senza unita' (rapporto reale del Figma) cosi'
     sopravvivono al ridimensionamento fluido.
     ---------------------------------------------------------------------- */
  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Corpi fluidi. L'espressione in mezzo e' scritta come
     «100vw * <valore Figma> / 1440»: a 1440px vale ESATTAMENTE il valore
     del Figma (nessun arrotondamento), sopra si ferma al massimo. */
  --fs-hero:     clamp(36px, calc(100vw * 60 / 1440), 60px); /* Figma 60/57 ls -1.5 w700 */
  --fs-h2:       clamp(30px, calc(100vw * 44 / 1440), 44px); /* Figma 44/48 w600 */
  --fs-hero-sub: clamp(26px, calc(100vw * 36 / 1440), 36px); /* Figma 36/40 w400 */
  --fs-h3:       clamp(26px, calc(100vw * 32 / 1440), 32px); /* Figma 32/38 w600 */

  /* corpi fissi */
  --fs-24: 24px; /* titolo card recensione (w600, centrato) */
  --fs-22: 22px; /* titolo accordion (w700) */
  --fs-20: 20px; /* titolo di riga elenco (w700), paragrafo CTA (w400) */
  --fs-18: 18px; /* prosa, etichetta pulsanti (w800) */
  --fs-16: 16px; /* valore dei campi, occhiello (w600) */
  --fs-14: 14px; /* testo recensione, nota fonte */
  --fs-12: 12px; /* etichetta campo, consenso, riga legale del footer */

  /* interlinee (rapporto = lh Figma / corpo Figma) */
  --lh-hero:     .95;    /* 57/60 */
  --lh-h2:       1.090909; /* 48/44 */
  --lh-hero-sub: 1.111111; /* 40/36 */
  --lh-h3:       1.1875; /* 38/32 */
  --lh-24:       1.25;   /* 30/24 */
  --lh-22:       1.454545; /* 32/22 */
  --lh-20:       1.4;    /* 28/20 */
  --lh-20-corto: 1.2;    /* 24/20 — «Inserisci i tuoi dati» */
  --lh-18:       1.555556; /* 28/18 — prosa */
  --lh-18-corto: 1.444444; /* 26/18 — elenco vantaggi sez. 06 */
  --lh-18-titolo:1.333333; /* 24/18 — testo introduttivo del form hero */
  --lh-18-largo: 1.777778; /* 32/18 — elenco domande sez. 03 */
  --lh-16:       1.5;    /* 24/16 */
  --lh-16-corto: 1.25;   /* 20/16 — occhiello */
  --lh-14:       1.571429; /* 22/14 */
  --lh-14-corto: 1.428571; /* 20/14 — nota fonte */
  --lh-12:       1.666667; /* 20/12 — consenso e footer */
  --lh-12-corto: 1;      /* etichetta campo: nel Figma il box e' 14px, non 16 */

  /* crenatura: solo il titolo hero ne ha (Figma -1.5px su 60px = -.025em) */
  --ls-hero: -.025em;
  --ls-occhiello: 0; /* il Figma dichiara ls 0.0: NON aggiungere tracking finto */

  /* pesi */
  --w-normale: 400;
  --w-medio:   500;
  --w-semi:    600;
  --w-forte:   700;
  --w-extra:   800;

  /* ------------------------------------------------------------------------
     4. LARGHEZZE E SPAZI
     ---------------------------------------------------------------------- */
  --w-largo:   1080px; /* colonna larga: x=180 su frame 1440 */
  --w-stretto: 896px;  /* colonna stretta: x=272 su frame 1440 */
  --gutter: 24px;      /* margine laterale minimo */
  --gutter-mobile: 20px;

  --sp-05: 2px;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  48px;
  --sp-10: 56px;
  --sp-11: 64px;
  --sp-12: 80px;
  --sp-13: 96px;
  --sp-14: 120px;

  /* respiro verticale di una banda: default prudente, ogni sezione lo
     sovrascrive con la misura presa dalla sua scheda geometria */
  --pad-banda: clamp(56px, 7vw, 100px);
  /* distanza fra il blocco titolo e il filetto (Figma: 18px nella maggior
     parte delle sezioni, 30px nella sez. 03) */
  --filetto-gap: 18px;
  --filetto-spessore: 2px; /* misurato sul render: 2px pieni, non 1px */

  /* ------------------------------------------------------------------------
     5. RAGGI — letti dalle schede e verificati sul render
     ---------------------------------------------------------------------- */
  --raggio-btn:       2px;   /* misurato sull'angolo del pulsante nel render */
  /* FIRMA DI DESIGN: nel Figma i pulsanti hanno SOLO l'angolo in basso a
     destra arrotondato di 16px, gli altri tre restano a 2px. La scheda
     geometria non lo dice perche' l'estrattore stampa il raggio solo quando e'
     uguale sui quattro angoli. Misurato sul render (full.png) risalendo dal
     bordo inferiore: il rientro del pieno vale 14 10 8 7 6 5 4 3 2 2 1 1 1 1 0,
     che e' il profilo di un raggio 16 (un raggio 2 darebbe 0 gia' al secondo
     pixel). Stesso profilo su tutti e cinque i pulsanti pieni (nav 1124,24 ·
     form hero 964,573 · sez.06 177,3236 · sez.08 732,4662 · sez.11 912,7079) e
     sui due a contorno (sez.09 e sez.14, dove il tratto rientra di 13px). */
  --raggio-btn-br:   16px;   /* angolo basso-destra dei pulsanti */
  --raggio-campo:     8px;   /* input e select */
  --raggio-checkbox:  4px;
  --raggio-nota:      2px;   /* riquadro nota fonte (sez. 07 e 11) */
  --raggio-pastiglia: 999px; /* dischi icona 52x52 e 44x44 (Figma radius 40) */
  --raggio-tondo:     50%;   /* ritratto circolare (sez. 14) */

  /* ------------------------------------------------------------------------
     6. OMBRE — ricavate misurando la caduta del colore sul render
     ---------------------------------------------------------------------- */
  --ombra-barra:   0 2px 16px rgba(36, 72, 97, .10); /* header fisso */
  --ombra-morbida: 0 4px 16px rgba(36, 72, 97, .14); /* dischi icona */
  --ombra-card:    0 10px 40px rgba(36, 72, 97, .16); /* card bianca della hero */

  /* ------------------------------------------------------------------------
     7. MOVIMENTO E PIANI
     ---------------------------------------------------------------------- */
  --dur-veloce: .15s;
  --dur:        .25s;
  --dur-lenta:  .4s;
  --ease: cubic-bezier(.2, .6, .2, 1);

  --z-sfondo:   0;
  --z-contenuto:1;
  --z-fluttua: 10;  /* card sovrapposte, immagini sconfinanti */
  --z-barra:  100;  /* header */
  --z-overlay:200;  /* menu mobile, lightbox */
  --z-skip:   300;  /* skip-link, sempre sopra tutto */
}