/* ============================================================================
   TOKENS — Margót Gourmet, Lecce
   ----------------------------------------------------------------------------
   Palette dalla sala e dal piatto (logo non reperibile: dominio ufficiale
   irraggiungibile, vedi DA-CONFERMARE.md): forno a legna, impasto lievitato,
   pietra leccese calda al tramonto. Contrasto verificato in
   site-loop/03-design-scelto.md — ogni coppia testo/fondo usata supera 4.5:1.
   ========================================================================= */

:root {
  /* ——— COLORE ————————————————————————————————————————————————————————————— */
  --fondo: #faf3e7;            /* crema, impasto lievitato */
  --fondo-alt: #f3e4cf;        /* crema più densa, per riquadri/callout su sezioni chiare */
  --fondo-scuro: #231710;      /* bruno quasi nero, il forno — unica sezione scura */
  --testo: #2a1b12;
  --testo-tenue: #6b5847;
  --testo-chiaro: #f3e4cf;     /* testo su --fondo-scuro */
  --testo-tenue-chiaro: #c9b8a0;
  --accento: #c2410c;          /* terracotta bruciata, pietra leccese */
  --accento-chiaro: #e2793d;   /* stesso accento, per uso su --fondo-scuro */
  --su-accento: #faf3e7;
  --bordo: #e3d2b8;
  --bordo-scuro: #3a2a1e;

  /* ——— TIPOGRAFIA ————————————————————————————————————————————————————————— */
  --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.75rem, 1.7rem + 4.6vw, 6rem);

  --interlinea: 1.6;
  --interlinea-titoli: 1.05;
  --spaziatura-titoli: -0.01em;

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

  --larghezza-max: 76rem;
  --larghezza-lettura: 38rem;

  /* ——— FORMA — mista: contenitori squadrati, interattivi a pillola ————————— */
  --raggio: 0;
  --raggio-interattivo: 999px;
  --bordo-spessore: 1px;
  --ombra: 0 20px 60px -25px rgba(35, 23, 16, 0.45);

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