/* ============================================================================
   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 —————————————————————————————————————————————————————————————
     Dal logo reale (@de_leo_pasticceria): wordmark panna su fondo
     caramello/terracotta. --accento è una tonalità più scura dello stesso
     terracotta del logo — il colore del logo usato com'è (#B8703A) come
     testo/bottone passava solo 3.6:1, sotto l'AA; scurito a #9A5A2A passa
     5:1 in entrambi i versi (verificato, vedi DA-CONFERMARE.md). Niente
     rosso-verde-bianco da trattoria: la palette è quella del marchio. */
  --fondo: #fbf6ee;             /* crema, non bianco puro */
  --fondo-alt: #f1e4d0;         /* sabbia — sezioni alternate, superfici */
  --fondo-scuro: #2e1d12;       /* espresso — sezione laboratorio, footer */
  --testo: #2e1d12;
  --testo-tenue: #6b5645;       /* didascalie, metadati — mai testo corrente */
  --testo-chiaro: #fbf6ee;      /* testo su --fondo-scuro */
  --testo-tenue-chiaro: #c9ae8f;/* metadati su --fondo-scuro */
  --accento: #9a5a2a;           /* CTA, link, il colore che si ricorda */
  --accento-decorativo: #e4a05f;/* badge, bordi, dettagli — non per testo su crema */
  --su-accento: #fbf6ee;        /* testo sopra --accento */
  --bordo: #e4d4bc;

  /* ——— TIPOGRAFIA ————————————————————————————————————————————————————————
     Fraunces (titoli, caldo e organico) + Work Sans (testo). Riga Google
     Fonts già in index.html — se si cambia qui va cambiata anche lì. */
  --font-titoli: 'Fraunces', ui-serif, Georgia, serif;
  --font-testo: 'Work Sans', system-ui, -apple-system, sans-serif;

  --t-corpo: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --t-piccolo: clamp(0.8125rem, 0.79rem + 0.12vw, 0.9375rem);
  --t-h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --t-h3: clamp(1.375rem, 1.2rem + 0.8vw, 2rem);
  --t-h2: clamp(1.875rem, 1.5rem + 1.7vw, 3rem);
  --t-h1: clamp(2.5rem, 1.6rem + 4vw, 5.5rem);

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

  /* ——— RESPIRO — ampio ———————————————————————————————————————————————————
     Sezioni molto distanziate, una cosa alla volta. Le sezioni dense di dati
     (orari, FAQ) usano .u-sezione--fitta per non annacquare l'informazione
     con troppo spazio vuoto attorno. */
  --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 — mista ——————————————————————————————————————————————————————
     Contenitori (card, riquadri prodotto, immagini) squadrati: il bancone è
     un piano di lavoro, non un salotto. Elementi interattivi (bottoni, tag,
     nav, orari) a pillola: il contrasto fra i due è il segno della forma. */
  --raggio: 2px;
  --raggio-interattivo: 999px;
  --bordo-spessore: 1px;
  --ombra: 0 1px 2px rgba(46, 29, 18, 0.06);

  /* ——— MOVIMENTO ——————————————————————————————————————————————————————————
     Tempi di base per transizioni e reveal; lo scrub della sezione
     laboratorio e del hero si scrivono con GSAP in site.js. */
  --durata: 400ms;
  --durata-breve: 180ms;
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
}