/*
 * Token del design system.
 *
 * Origine: direzione visiva "Modern Editorial" prodotta con Google Stitch.
 * I valori vengono dal codice generato (tailwind.config), non dalla prosa del
 * suo DESIGN.md: le due sorgenti erano in conflitto e il codice è ciò che era
 * effettivamente renderizzato.
 *
 * Una correzione rispetto all'originale: il bordo dei campi era #c0c8cb, cioè
 * 1,62:1 sul fondo — sotto il minimo di 3:1 che le WCAG chiedono al contorno di
 * un elemento interattivo. È diventato --bordo-campo (3,14:1). Il vecchio
 * valore resta come --bordo-tenue per i divisori decorativi, dove va bene.
 */

:root {
  /* --- superfici ------------------------------------------------------ */
  --fondo: #fcf9f8;              /* avorio caldo: la pagina */
  --superficie: #ffffff;         /* campi, card in evidenza */
  --superficie-tenue: #f6f3f2;   /* blocchi secondari, righe alternate */
  --superficie-marcata: #eae7e7; /* stati premuti, intestazioni */

  /* --- inchiostro ----------------------------------------------------- */
  --inchiostro: #1c1b1b;         /* 16,4:1 — testo principale */
  --inchiostro-tenue: #41484b;   /*  8,9:1 — testo secondario, etichette */
  --inchiostro-lieve: #71787c;   /*  4,3:1 — solo testo grande o non essenziale */

  /* --- marchio -------------------------------------------------------- */
  --primario: #003442;           /* 12,8:1 — azioni principali, numeri risultato */
  --primario-tenue: #1b4b5a;     /*  9,1:1 — stati attivi, accenti */
  --primario-chiaro: #a0cddf;    /* fondi tenui, evidenziazioni */
  --su-primario: #ffffff;        /* testo sopra il navy pieno */

  /* --- semantica ------------------------------------------------------ */
  --errore: #ba1a1a;             /*  6,2:1 */
  --errore-fondo: #ffdad6;

  /* --- bordi ---------------------------------------------------------- */
  --bordo-campo: #878f93;        /*  3,1:1 — contorno di ciò che è interattivo */
  --bordo-tenue: #c0c8cb;        /*  decorativo: divisori, righe di tabella */

  /* --- tipografia ----------------------------------------------------- */
  --titoli: "Playfair Display", Georgia, "Times New Roman", serif;
  --testo: "Public Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --t-display: 3rem;      /* 48px — h1 desktop */
  --t-titolo: 2rem;       /* 32px */
  --t-sezione: 1.5rem;    /* 24px */
  --t-corpo-lg: 1.125rem; /* 18px */
  --t-corpo: 1rem;        /* 16px */
  --t-piccolo: 0.875rem;  /* 14px */
  --t-minuto: 0.75rem;    /* 12px */
  --t-numero: 2.5rem;     /* 40px — il risultato */

  /* --- ritmo (base 4px) ----------------------------------------------- */
  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;

  --contenuto: 1120px;
  --margine-mobile: 1rem;

  /* --- forme ---------------------------------------------------------- */
  --raggio: 4px;
  --raggio-md: 6px;
  --ombra-premuto: 0 1px 2px rgb(0 0 0 / 0.05);

  /* --- comandi -------------------------------------------------------- */
  --altezza-comando: 48px;   /* mai sotto 44px: è la dimensione minima del tocco */
}

@media (max-width: 640px) {
  :root {
    --t-display: 1.75rem;
    --t-titolo: 1.5rem;
    --t-sezione: 1.25rem;
    --t-numero: 2rem;
  }
}