/* ============================================================================
   TOKENS — l'identità di Casina Calò
   ----------------------------------------------------------------------------
   Modalità `redesign`: la palette la comanda il marchio.

   Da dove vengono i colori (niente è stato scelto a gusto):
     · #ffffff  fondo, MISURATO sul loro sito renderizzato
                (riferimento/loro-comportamento.json → colori.fondo)
     · #333333  testo, MISURATO allo stesso modo (colori.testo)
     · #ae8549  l'oro dei loro pulsanti, MISURATO (colori.pulsante), ed è lo
                stesso oro del lettering del logo (loghi/logo.png)
     · #8a6534  quell'oro portato a 5,3:1 su bianco, perché #ae8549 su bianco
                misura 3,36:1 — sui LORO pulsanti bianco-su-oro è una delle
                quindici violazioni di contrasto elencate nel loro
                -comportamento.json. L'oro resta identico dove fa il grafico
                (filetti, numeri, cornici); dove fa inchiostro si scurisce.
     · #2b2620  la pietra in ombra delle loro fotografie notturne: la sezione
                che spezza il ritmo e il piede.

   Il fondo NON è stato scaldato verso il panna: è il bianco puro misurato.
   `--fondo-alt` è l'oro del marchio all'8% su quel bianco, non un panna scelto
   a mano.
   ========================================================================= */

:root {
  /* ——— COLORE ————————————————————————————————————————————————————————————— */
  --fondo: #ffffff;
  --fondo-alt: #f7f2ea;        /* --oro all'8% su bianco: le sezioni alternate */
  --testo: #333333;
  --testo-tenue: #6b6259;      /* 5,97:1 su bianco, 5,36:1 su --fondo-alt */
  --accento: #8a6534;          /* 5,26:1 su bianco · bianco sopra: 5,26:1 */
  --su-accento: #ffffff;
  --bordo: #e6ddd0;

  /* L'oro esatto del marchio. Su bianco misura 3,36:1: si usa per filetti,
     cornici, numeri grandi e superfici — MAI come inchiostro di un paragrafo.
     È il difetto che sul loro sito colpisce sette testi su quindici. */
  --oro: #ae8549;
  --oro-chiaro: #d4ab6a;       /* 7,02:1 sul fondo scuro — solo dentro .su-scuro */

  --scuro: #2b2620;
  --su-scuro: #f6f1e9;         /* 13,3:1 sul fondo scuro */
  --su-scuro-tenue: #c3b7a5;   /* 7,59:1 sul fondo scuro */

  /* ——— TIPOGRAFIA ————————————————————————————————————————————————————————
     Coppia assegnata nel BRIEF; il <link> in index.html è già allineato. */
  --font-titoli: 'Familjen Grotesk', 'Helvetica Neue', sans-serif;
  --font-testo: 'Figtree', 'Helvetica Neue', sans-serif;

  --t-corpo: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  --t-piccolo: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
  --t-h4: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --t-h3: clamp(1.375rem, 1.15rem + 1.1vw, 2.25rem);
  --t-h2: clamp(2.25rem, 1.5rem + 3.4vw, 4.5rem);
  --t-h1: clamp(3.25rem, 1.5rem + 8vw, 9rem);

  --interlinea: 1.58;
  --interlinea-titoli: 0.95;
  --spaziatura-titoli: -0.04em;

  /* ——— RESPIRO — asse `ampio` ————————————————————————————————————————————— */
  --spazio-sezione: clamp(5rem, 4rem + 7vw, 12rem);
  --spazio-blocco: clamp(1.5rem, 1rem + 2vw, 3rem);
  --gronda: clamp(1.25rem, 4vw, 4rem);

  --larghezza-max: 78rem;
  --larghezza-lettura: 36rem;

  /* ——— FORMA — asse `mista` ——————————————————————————————————————————————
     Contenitori squadrati come i conci di pietra, elementi interattivi a
     pillola: il contrasto fra i due è il segno di questa pagina. */
  --raggio: 0;
  --raggio-interattivo: 999px;
  --bordo-spessore: 1px;
  --ombra: none;

  /* ——— MOVIMENTO — asse `parallasse` ——————————————————————————————————— */
  --durata: 420ms;
  --durata-breve: 180ms;
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
}