/* ============================================================================
   TOKENS — l'identità di Juras Food & Drink
   ----------------------------------------------------------------------------
   Palette, tipografia, respiro e forma assegnati nel BRIEF, applicati a
   quello che la ricerca ha trovato su questa azienda (vedi fonti.json).
   ========================================================================= */

:root {
  /* ——— COLORE —————————————————————————————————————————————————————————————
     Logo non recuperabile in alta qualità (vedi identita.json): il file
     ufficiale è solo il marchio bianco a bassa risoluzione. La palette viene
     dalla sala e dal piatto — foto reali del locale (vedi fonti.json):
     facciata e insegna nere con lettering/neon ambrato, crosta del pane e
     formaggio fuso color ambra, salsa BBQ rosso-ruggine, luci a bulbo calde.
     --accento è usato sia come riempimento (con --su-accento sopra) sia come
     colore di testo/bordo/focus-ring "nudo" su qualunque sfondo del sito
     (chiaro o scuro, vedi RESPIRO/sezioni scure sotto): per questo è un oro
     più profondo dell'ambra dell'insegna, non l'ambra pura — quella resta
     nello shader della hero (site.js), dove è solo atmosfera e non deve
     reggere un contrasto. Ogni coppia qui sotto è verificata: ≥ 3:1 (bordi,
     focus-ring, componenti non testuali) e ≥ 4.5:1 dove il colore porta
     testo piccolo. */
  --fondo: #f6eee1;            /* crema carta forno — sezioni chiare */
  --fondo-alt: #efe2cc;        /* superfici/card nelle sezioni chiare */
  --testo: #241c15;
  --testo-tenue: #6b5a47;      /* 5.7:1 su --fondo — didascalie, metadati */
  --accento: #a8761f;          /* oro profondo — 3.5:1 su --fondo, 4.8:1 su --notte */
  --su-accento: #14100c;       /* 4.8:1 su --accento */
  --accento-2: #9a431c;        /* ruggine — badge e dettagli sulle sezioni chiare */
  --su-accento-2: #f6eee1;     /* 5.7:1 su --accento-2 */
  --bordo: color-mix(in srgb, var(--testo) 20%, transparent);

  /* Sezioni scure ("la sala di sera"): stesso locale, luce spenta. */
  --notte: #14100c;
  --notte-alt: #1e1810;
  --su-notte: #f6eee1;         /* 16.4:1 su --notte */
  --su-notte-tenue: #b7a48c;   /* 7.8:1 su --notte */
  --bordo-notte: color-mix(in srgb, var(--su-notte) 18%, transparent);

  /* ——— TIPOGRAFIA ————————————————————————————————————————————————————————
     Assegnata nel BRIEF: Fraunces (titoli, caldo/organico) + Work Sans
     (corpo). Il <link> Google Fonts è già in index.html. */
  --font-titoli: 'Fraunces', 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.6rem + 5vw, 6.5rem);

  --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);   /* margine laterale della pagina */

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

  /* ——— FORMA: mista —————————————————————————————————————————————————————
     Contenitori squadrati (raggio 0) contro elementi interattivi a pillola
     (999px): il contrasto fra i due è il segno assegnato. */
  --raggio: 0;
  --raggio-interattivo: 999px;
  --bordo-spessore: 1px;
  --ombra: 0 30px 70px -35px rgba(20, 16, 12, 0.45);

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