/* ============================================================================
   Design token
   Unico punto in cui vivono colori, caratteri, ritmo verticale e raggi.
   Nessun componente deve contenere un valore letterale: si aggiunge un token
   qui e lo si referenzia.
   ========================================================================= */

:root {
    /* La palette della cliente è di quattro colori: #ECEBE7, #5C5C5C, #A46072
       e #A3BEC5. Sono usati tali e quali ovunque il contrasto lo consente.
       Dove non basta c'è una variante della stessa tinta, più scura quanto
       basta a superare la soglia WCAG e non di più: 4.5:1 per il testo, 3:1
       per gli elementi grafici. I rapporti annotati qui accanto li ricalcola
       Docs/verifica.py. */

    /* --- Superfici chiare ------------------------------------------------- */
    --carta: #ECEBE7;                   /* palette */
    --carta-alternata: #F4F3F0;
    --velo: #DFE8EB;                    /* --azzurro al 35% su bianco */
    --filetto: #D9D8D2;

    /* --- Superficie scura ------------------------------------------------- */
    /* Il grigio della palette scurito. Intestazione, banda e piè di pagina
       non usano il grigio pieno perché gli archi del marchio sono dello
       stesso grigio: su #5C5C5C si fermano a 1.1:1 e il segno perde metà del
       disegno. È anche il colore dei veli sopra le fotografie: al 78% su una
       fotografia bianca tiene il titolo dell'hero sopra 7:1. */
    --grafite: #282828;

    /* --- Testo su fondo chiaro -------------------------------------------- */
    /* Il grigio della palette è l'inchiostro, e a 5.6:1 lascia poco spazio
       sotto di sé: l'attenuato ne è appena distinguibile, perché più chiaro
       di così scenderebbe sotto 4.5:1 sul velo. La gerarchia del testo la
       fanno corpo e peso, non il colore. */
    --inchiostro: #5C5C5C;              /* palette; 5.6:1 su --carta, 5.4:1 su --velo */
    --inchiostro-attenuato: #666666;    /* 4.8:1 su --carta, 4.6:1 su --velo */

    /* --- Testo su fondo scuro --------------------------------------------- */
    /* Valori pieni e non bianco trasparente: il contrasto così è verificabile
       una volta sola e non cambia al variare del fondo sottostante. */
    --su-scuro: #FFFFFF;                /* 14.7:1 su --grafite, 4.7:1 su --rosa-antico */
    --su-scuro-attenuato: #C8C8C8;      /*  8.8:1 su --grafite */
    --su-scuro-quieto: #9A9A9A;         /*  5.2:1 su --grafite, per la riga legale */

    /* --- Accenti ---------------------------------------------------------- */
    --rosa-antico: #A46072;             /* palette; 3.9:1 su --carta: superfici piene e grafica */
    --rosa-antico-scuro: #915364;       /* 4.9:1 su --carta, 4.7:1 su --velo: testo, e :hover delle superfici piene */

    /* L'azzurro della palette è chiaro: sulla carta si ferma a 1.6:1, quindi
       sul chiaro compare pieno solo nella linea del tracciato, che è
       decorazione, e come tinta del velo. Sul fondo scuro invece è pieno
       anche per il testo. */
    --azzurro: #A3BEC5;                 /* palette; 7.5:1 su --grafite: testo e segni su scuro */
    --azzurro-scuro: #496B74;           /* 4.8:1 su --carta, 4.6:1 su --velo: testo e grafica su chiaro */

    /* --- Caratteri -------------------------------------------------------- */
    --font-testo: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* --- Ritmo verticale -------------------------------------------------- */
    /* Due sole misure, usate in tutto il sito: la distanza tra sezioni e la
       distanza tra blocchi interni a una sezione. Averne solo due è ciò che
       tiene coerente la spaziatura da una pagina all'altra. */
    --spazio-sezione: clamp(64px, 9vw, 112px);
    --spazio-blocco: clamp(32px, 4vw, 56px);

    /* --- Geometria -------------------------------------------------------- */
    --raggio-grande: 56px;              /* motivo del raggio asimmetrico, ereditato dal sito attuale */
    --raggio-medio: 26px;
    --raggio-piccolo: 4px;
    --raggio-pulsante: var(--raggio-piccolo) 18px var(--raggio-piccolo) 18px;

    --larghezza-massima: 1180px;
    --larghezza-lettura: 62ch;          /* misura di riga leggibile per il testo corrente */

    --altezza-intestazione: 74px;

    /* --- Transizioni ------------------------------------------------------ */
    --transizione: .15s ease;
}