/* ============================================================================
   PortaleAgenti — Token dell'identita' visiva pubblica ("Atto notarile")
   ----------------------------------------------------------------------------
   Fonte: blueprint _globale/03-design-handoff.md + pagine Claude Design.
   Caricato SOLO dalle pagine pubbliche (head-public.php).
   L'area privata continua a usare css/design-tokens.css (identita' legacy).

   Breakpoint del progetto, mobile-first: 360 / 600 / 900 / 1200 / 1440.
   Ogni media query nuova deve usare uno di questi valori.
   ========================================================================== */

:root {
  /* --- Colore ------------------------------------------------------------
     Rapporto d'uso 70/22/6/2: avorio, inchiostro, superficie bianca, terra. */
  --avorio: #FAF7F1;   /* sfondo primario, carta d'archivio */
  --avorio2: #F2EDE3;  /* sfondo alternato per bandeggiare le sezioni */
  --white: #FFFFFF;    /* superfici "foglio": tabelle di calcolo, card, form */
  --ink: #16202E;      /* testo primario */
  --ink2: #12283F;     /* hover bottoni, bande piene, footer */
  --blu: #1B3A5C;      /* primario di marca */
  --sec: #5A6472;      /* testo secondario, didascalie, metadati */
  --terra: #B0472F;    /* accento ceralacca: max un elemento per schermata */
  --verde: #2F6B5E;    /* dato positivo, contabile */
  --err: #A32C1E;
  --filo: #D9D2C4;     /* filetto 1px: il vero elemento strutturale del sito */

  /* --- Tipografia -------------------------------------------------------- */
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Monaco, monospace;

  /* Scala modulare 1.25 su base 17px. I valori mobile stanno in base.css. */
  --t-display: 56px;
  --t-h2: 40px;
  --t-h3: 26px;
  --t-h4: 15px;   /* occhiello, small caps, letter-spacing .08em */
  --t-body: 17px;
  --t-body-sm: 15px;
  --t-caption: 13px;
  --t-figure: 44px;  /* importi e prezzi in mono tabulare */

  --lh-display: 1.08;
  --lh-h2: 1.15;
  --lh-h3: 1.25;
  --lh-body: 1.65;

  /* --- Forma -------------------------------------------------------------
     Raggio documentale: 2px ovunque. Nessuna eccezione salvo avatar circolari.
     Nessuna box-shadow: la profondita' si fa con i filetti. */
  --r-doc: 2px;
  --r-pill: 9999px;

  --filetto: 1px solid var(--filo);
  --filetto-ink: 1px solid var(--ink);
  --filetto-accento: 2px solid var(--terra);

  /* La "tacca": segmento d'accento che apre il filetto di sezione. */
  --tacca-h: 12px;
  --tacca-w: 2px;

  /* --- Layout ------------------------------------------------------------ */
  --container: 1180px;
  --container-pad: 32px;
  --container-pad-sm: 20px;
  --nav-h: 72px;
  --ritmo: 88px;      /* respiro verticale tra macro-sezioni, desktop */
  --ritmo-sm: 72px;   /* mobile */

  /* --- Movimento ---------------------------------------------------------
     Meccanico, mai elastico: niente rimbalzi, niente molle. */
  --dur-1: 180ms;
  --dur-2: 240ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}