/* ============================================================================
 * Design tokens — SITO PUBBLICO «Bacheca digitale»
 *
 * Fonte di verita: il prototipo Figma `Figma/BACHECADIGITALE.fig` e le sette
 * schermate esportate in `Figma/*.png`. Ogni valore qui dentro e' stato
 * MISURATO da quei file, non scelto a occhio:
 *
 *  - i colori campionando i pixel dei mockup (`#002052` e' il colore piu'
 *    frequente in tutte e quattro le pagine, dopo il bianco);
 *  - la griglia scandendo le righe dei PNG per trovare i bordi del contenuto;
 *  - i nomi delle famiglie leggendo il canvas decodificato del `.fig`
 *    (Open Sans in cinque pesi, da Light a ExtraBold).
 *
 * ── Perche' un secondo file di token ────────────────────────────────────────
 * `design-tokens.css` descrive la DASHBOARD di redazione: palette AGID, Blu
 * Italia #0066CC, Titillium Web. Il sito pubblico e' un altro prodotto, con
 * un'altra identita' visiva, e sovrascrivere quei token significherebbe
 * ridipingere anche la redazione a ogni ritocco del pubblico.
 *
 * I due insiemi convivono percio' senza toccarsi: tutto qui dentro ha prefisso
 * `--sito-`, e nessuna regola di questo file scrive su una variabile dell'altro.
 *
 * REGOLA: nessun componente del sito pubblico scrive un colore o una misura in
 * chiaro. Se un valore serve e non e' qui, si aggiunge qui.
 * ========================================================================== */

/* ── Open Sans, self-hosted ────────────────────────────────────────────────
 * Nessuna richiesta verso fonts.googleapis.com: vale anche per il sito
 * pubblico il vincolo AGID 4.5 Az.2 (font serviti dal proprio dominio).
 * I file sono stati scaricati una volta e vivono in `public/fonts/`.
 */

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/opensans-300.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: "Open Sans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/opensans-300-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: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/opensans-400.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: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/opensans-400-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: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/opensans-600.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: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/opensans-600-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: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/opensans-700.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: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/opensans-700-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: "Open Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/opensans-800.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: "Open Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/opensans-800-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;
}

:root {
  /* ── Colori ──────────────────────────────────────────────────────────────
   * Campionati dai mockup. I nomi seguono le variabili del file Figma
   * (`BLU COGEA`, `Accents/Green`) dove esistevano.
   */

  /* Il blu dell'identita': intestazione, titoli, pulsanti pieni, pie' di
   * pagina. È il colore piu' frequente del prototipo dopo il bianco. */
  --sito-blu: #002052;
  --sito-blu-scuro: #001334;
  /* Blu schiarito per gli stati di passaggio del mouse sui pieni. */
  --sito-blu-chiaro: #203c68;

  /* Il verde degli eventi e delle chiamate all'azione positive. */
  --sito-verde: #34c759;
  --sito-verde-scuro: #26a144;
  /* Fondo delle fasce «evento in evidenza» e «hai bisogno di supporto». */
  --sito-verde-tenue: #ebf9ee;

  --sito-sfondo: #ffffff;
  --sito-superficie: #ffffff;
  /* Fondo delle zone alternate e dei segnaposto immagine. */
  --sito-superficie-tenue: #f2f2f2;

  --sito-testo: #313131;
  --sito-testo-tenue: #4b4b4b;
  --sito-testo-debole: #656565;
  /* Testo sopra i fondi scuri (pie' di pagina, pulsanti pieni). */
  --sito-testo-inverso: #ffffff;
  --sito-testo-inverso-tenue: #b9c2d0;

  --sito-bordo: #e5e5e5;
  --sito-bordo-forte: #cbcbcb;

  /* ── Errore ──────────────────────────────────────────────────────────────
   * Il prototipo non disegna stati di errore — nessuna delle sette schermate
   * ne contiene uno — ma la schermata di accesso ne ha bisogno: un link non
   * partito e un indirizzo malscritto vanno detti. Il rosso e' quello di
   * Material 3 (`error` / `on-error-container`), scelto perche' e' l'unico
   * fuori palette che raggiunge 4.5:1 sul bianco e sul proprio fondo tenue
   * senza inventare una tinta che stoni con il blu dell'identita'.
   *
   * Il colore non e' mai l'unico segnale: accanto c'e' sempre il testo, e i
   * riquadri hanno il bordo spesso a sinistra (WCAG 1.4.1).
   */
  --sito-errore: #b3261e;
  --sito-errore-testo: #8c1d18;
  --sito-errore-tenue: #fdf3f2;

  /* ── Colori delle aree tematiche ──────────────────────────────────────────
   * Ogni categoria del prototipo ha il proprio cerchio colorato. Sono cinque
   * e vivono qui perche' compaiono in tre punti diversi — griglia delle
   * categorie, etichetta sul dettaglio, filtro — e devono coincidere.
   */
  --sito-categoria-normativa: #a099f9;
  --sito-categoria-digitale: #ffbb7e;
  --sito-categoria-futuro: #66dbe3;
  --sito-categoria-territorio: #e083ec;
  --sito-categoria-pillole: #ff8199;

  /* ── Le stesse tinte, ma leggibili come TESTO ────────────────────────────
   * I cinque colori qui sopra sono fondi: nascono per stare dietro a
   * un'illustrazione bianca, e infatti sono chiarissimi. Il prototipo del
   * dettaglio li riusa pero' anche per l'occhiello sopra il titolo — la riga
   * «AGGIORNAMENTI NORMATIVI» — dove diventano testo su bianco: #a099f9 su
   * bianco da' 2,4:1, cioe' meta' della soglia WCAG 1.4.3 per un testo
   * piccolo, e quella riga e' l'unica cosa che dice a quale area appartiene
   * il documento che si sta aprendo.
   *
   * Sono percio' le stesse tinte portate in basso di luminosita' a saturazione
   * costante, fino a 4,5:1 esatti sul bianco: stessa famiglia cromatica —
   * il viola resta viola, il magenta resta magenta — ma leggibile.
   *
   * REGOLA: fondo → `--sito-categoria-*`; testo → `--sito-categoria-*-testo`.
   * Non usare mai i primi cinque per scriverci sopra.
   */
  --sito-categoria-normativa-testo: #6f67db;
  --sito-categoria-digitale-testo: #ab6628;
  --sito-categoria-futuro-testo: #20838a;
  --sito-categoria-territorio-testo: #bf37d0;
  --sito-categoria-pillole-testo: #d2415d;

  /* ── Tipografia ──────────────────────────────────────────────────────────
   * Open Sans in tutto il sito. Il prototipo usa cinque pesi e li usa davvero:
   * 800 per i titoli di sezione, 700 per i titoli di card, 600 per le
   * etichette dei pulsanti, 400 per il testo, 300 quasi mai.
   */
  --sito-font: "Open Sans", system-ui, -apple-system, sans-serif;

  /* La scala e' fluida perche' il prototipo e' disegnato a 1440px e il sito
   * deve reggere anche 360px senza che i titoli vadano a capo tre volte. Il
   * valore massimo di ogni `clamp` e' quello misurato nel mockup. */
  --sito-testo-hero: clamp(2.5rem, 1.6rem + 3.8vw, 4.5rem);
  --sito-testo-titolo-sezione: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  --sito-testo-titolo-pagina: clamp(1.75rem, 1.45rem + 1.3vw, 2.375rem);
  --sito-testo-titolo-card: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --sito-testo-guida: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --sito-testo-corpo: 1rem;
  --sito-testo-piccolo: 0.875rem;
  --sito-testo-minuscolo: 0.75rem;

  /* Il blocco data delle card evento: nel prototipo il giorno e il mese sono
     grandi quanto un titolo, ed e' quello che rende l'elenco scorribile con
     l'occhio. Sono token propri e non riusi di `--sito-testo-titolo-*` perche'
     rispondono a una domanda diversa: quanto deve essere grande una data. */
  --sito-testo-giorno: clamp(2rem, 1.7rem + 1.2vw, 2.75rem);
  --sito-testo-mese: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);

  --sito-interlinea-stretta: 1.15;
  --sito-interlinea-titolo: 1.25;
  --sito-interlinea-corpo: 1.6;
  /* I titoli grandi del prototipo sono leggermente serrati. */
  --sito-spaziatura-titolo: -0.02em;
  /* Le etichette maiuscole invece sono aperte, o si impastano. */
  --sito-spaziatura-etichetta: 0.06em;

  /* ── Griglia ─────────────────────────────────────────────────────────────
   * Misurata sui PNG: il contenuto vive fra x=50 e x=1390 su una tela da
   * 1440, cioe' 1340px di larghezza utile con 50px di margine per lato.
   */
  --sito-contenitore: 1340px;
  --sito-margine: 1.25rem;

  /* ── Spaziature ──────────────────────────────────────────────────────────
   * Multipli di 4px, come il resto del progetto.
   */
  --sito-spazio-1: 0.25rem;
  --sito-spazio-2: 0.5rem;
  --sito-spazio-3: 0.75rem;
  --sito-spazio-4: 1rem;
  --sito-spazio-5: 1.25rem;
  --sito-spazio-6: 1.5rem;
  --sito-spazio-8: 2rem;
  --sito-spazio-10: 2.5rem;
  --sito-spazio-12: 3rem;
  --sito-spazio-16: 4rem;

  /* Distanza fra due sezioni della pagina. */
  --sito-sezione: clamp(2.5rem, 1.8rem + 3vw, 4rem);

  /* ── Forme ───────────────────────────────────────────────────────────────
   * Il prototipo usa tre raggi e basta: pieno per le pastiglie, 8px per le
   * card, 12px per i contenitori grandi come l'hero.
   */
  --sito-raggio-pastiglia: 999px;
  --sito-raggio-controllo: 6px;
  --sito-raggio-card: 8px;
  --sito-raggio-grande: 12px;

  /* Ombra delle card: nel prototipo e' appena percettibile, serve a staccare
   * il bianco della card dal bianco della pagina. */
  --sito-ombra-card: 0 1px 2px rgb(0 32 82 / 0.04);
  --sito-ombra-rilievo: 0 4px 16px rgb(0 32 82 / 0.08);

  /* ── Movimento ───────────────────────────────────────────────────────────
   * Stessi valori della dashboard: due superfici diverse possono avere colori
   * diversi, ma un'interfaccia che si muove in due modi diversi si sente.
   */
  --sito-durata: 160ms;
  --sito-curva: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Spessore dell'anello di fuoco. Non scende sotto i 3px: e' il minimo
   * perche' resti visibile su un fondo chiaro (WCAG 2.4.11). */
  --sito-anello-fuoco: 3px;
}

@media (min-width: 48rem) {
  :root {
    --sito-margine: 3.125rem;
  }
}