/* ============================================================================
   TOKENS — l'identità di QUESTA azienda
   ----------------------------------------------------------------------------
   Questi valori sono volutamente anonimi: bianco, nero, font di sistema,
   spigolo vivo. Sono un punto di partenza tecnico, non una proposta di design.

   **Se la bozza esce con questi valori, non è stata progettata.**

   Vanno riscritti tutti, seguendo gli assi assegnati nel BRIEF (palette,
   font, respiro, forma) e quello che hai scoperto sull'azienda. La palette
   la comanda il logo del cliente, non i gusti di chi scrive.
   ========================================================================= */

:root {
  /* ——— COLORE —————————————————————————————————————————————————————————————
     Logo non reperito (vedi DA-CONFERMARE.md): palette dedotta dal prodotto,
     non dal logo né dai luoghi comuni del settore (niente rosso-verde-bianco
     da trattoria). Semola di grano duro, crosta del pane cotto a pietra,
     legno del forno. Contrasto AA verificato su ogni accoppiata in uso. */
  --fondo: #FBF5EA;            /* semola, crema calda */
  --fondo-tenue: #F1E1BF;      /* crosta dorata — alternanza chiara, tra --fondo e --fondo-alt */
  --fondo-alt: #2B1B12;        /* legno bruciato del forno — sezioni scure alternate */
  --testo: #2B1B12;
  --testo-tenue: #7A6552;      /* didascalie, metadati — mai testo corrente */
  --testo-su-scuro: #F2E6D3;
  --testo-tenue-su-scuro: #C9AF93;
  --accento: #A84A24;          /* crosta del pane, terracotta — 5.3:1 su --fondo */
  --su-accento: #FBF5EA;       /* testo sopra --accento */
  --bordo: #E4D5BD;

  /* ——— TIPOGRAFIA ————————————————————————————————————————————————————————
     Instrument Serif nei titoli (assegnato nel BRIEF, impianto manifesto) +
     Hanken Grotesk nel testo. La riga <link> è già aggiornata in index.html. */
  --font-titoli: 'Instrument Serif', Georgia, serif;
  --font-testo: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  --t-corpo: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --t-piccolo: clamp(0.8125rem, 0.79rem + 0.12vw, 0.9375rem);
  --t-h4: clamp(1.25rem, 1.15rem + 0.5vw, 1.625rem);
  --t-h3: clamp(1.625rem, 1.35rem + 1.2vw, 2.5rem);
  --t-h2: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  --t-h1: clamp(3rem, 1.2rem + 8vw, 9rem);

  --interlinea: 1.6;
  --interlinea-titoli: 1.02;
  --spaziatura-titoli: -0.02em;

  /* ——— RESPIRO ————————————————————————————————————————————————————————————
     Alternato: valore ampio come base, le sezioni dense usano
     .u-sezione--fitta. Il vuoto delle sezioni "quasi vuote" dà peso a quelle
     dense che seguono. */
  --spazio-sezione: clamp(5rem, 4rem + 7vw, 12rem);
  --spazio-blocco: clamp(1.5rem, 1rem + 2vw, 3rem);
  --gronda: clamp(1.25rem, 4vw, 4rem);   /* margine laterale della pagina */

  --larghezza-max: 76rem;      /* contenitore largo */
  --larghezza-lettura: 38rem;  /* colonna di testo: 60-75 caratteri, non di più */

  /* ——— FORMA ——————————————————————————————————————————————————————————————
     Morbida: raggi generosi, nessun bordo, superfici piene — la separazione
     tra sezioni la fa il colore (--fondo / --fondo-alt), non una linea. */
  --raggio: 2rem;
  --raggio-interattivo: 999px;
  --bordo-spessore: 0px;
  --ombra: 0 1.5rem 3rem -1.5rem rgb(43 27 18 / 0.35);

  /* ——— MOVIMENTO ——————————————————————————————————————————————————————————
     Asse assegnato nel BRIEF. Questi sono i tempi di base per transizioni e
     reveal; le animazioni su scroll si scrivono con GSAP in app.js. */
  --durata: 400ms;
  --durata-breve: 180ms;
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
}