/* tokens.css — design genome restaurant_gourmet. Ristorante-pizzeria gourmet di sala: registro editoriale
   luminoso (fondo crema dominante) con episodi di banda PROFONDA (hero, chiusura, footer) dove vive il marchio.
   Il carattere lo danno i BLOCCHI PIENI di tinta scavalcati dalle foto; il cibo porta il colore, il fondo la luce.
   Vocabolario CHIUSO di token semantici: la sorgente da cui deriva theme.json. Niente valori fuori da qui.

   Contratto palette (a11y, misurato): crema su grafite 13,5:1 · oro su grafite 5,38:1 · rosso su crema 6,53:1 ·
   bianco su rosso 7,19:1 · grafite su oro 5,38:1.
   ⚠ REGOLE D'USO NON NEGOZIABILI:
   - l'ORO (--accent) NON è mai testo su fondo chiaro (2,51:1): filetti, superfici, bottoni su scuro soltanto;
   - su fondo chiaro l'accento-testo è il ROSSO (--accent-ink), preso dal muro a mosaico del locale;
   - --ink-muted vale SOLO su fondo chiaro; su fondo scuro si usa --on-dark-muted;
   - un testo sopra una FOTO non è coperto da questi rapporti: va misurato dal pixel renderizzato. */
:root {
  /* --- Colore (crema editoriale + grafite profondo + oro di marca + rosso del locale) --- */
  --paper:     #F6F4EC;  /* crema calda: fondo dominante */
  --surface:   #EDE9DC;  /* crema profonda: sezioni alternate — TINT DI MARCA */
  --surface-2: #E4DFCE;  /* crema più densa: placeholder e superfici di riposo */
  --ink:       #1E1A16;  /* bruno-nero: testo (15,7:1 su paper) */
  --ink-muted: #5A5248;  /* grigio caldo: testo secondario SOLO su fondo chiaro (7,25:1 su paper) */
  --line:      #DCD5C4;  /* filetto: bordi e righe (non-testo) */
  --accent-ink:#A8231C;  /* ROSSO del muro a mosaico: eyebrow, link, accenti-testo su chiaro (6,53:1) */
  --accent:    #AE9A64;  /* ORO del marchio: filetti, cornici, superfici — MAI testo su chiaro */
  --accent-dark:#8E7C4F; /* oro profondo: SUPERFICI e hover — non regge il testo su chiaro (3,71) */
  --accent-deep:#6E5E31; /* ottone profondo: l'unico oro che porta TESTO su fondo chiaro (5,76) */
  --accent-lt: #C9B27C;  /* oro chiaro: testo e occhielli SU FONDO SCURO (9,0:1 su night) */
  --on-dark:   #F6F4EC;  /* testo su fondi pieni scuri (13,5:1 su night) */
  --on-dark-muted:#C8C0B2; /* testo secondario su fondo scuro */
  --brand:     #A8231C;  /* rosso di marca: bottone primario su chiaro, blocchi pieni */
  --brand-dark:#8C1C16;  /* rosso profondo: hover del bottone */
  --brand-mid: #2A2724;  /* grafite: blocchi pieni alternativi, banda di chiusura */
  --night:     #1B1917;  /* grafite profondo: hero, footer */
  --scrim:     rgba(15,14,13,.72); /* velo dell'hero: la coppia .72→.88 è MISURATA, non stimata */
  --scrim-deep:rgba(15,14,13,.88);

  --bg: var(--paper);
  --fg: var(--ink);
  --focus: var(--accent-ink);

  /* --- Tipografia: display serif didone (Prata) + testo sans geometrica (Jost), OFL self-hosted.
     tokens.css deve definire --font-display e --font-body (tokensOf lancia se un token manca). --- */
  --font-display: "Prata", Georgia, "Times New Roman", serif;
  --font-body: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* scala tipografica editoriale */
  --text-sm:   0.76rem;   /* eyebrow/meta, uppercase molto tracciati */
  --text-base: 1.0625rem; /* 17 corpo */
  --text-md:   clamp(1.05rem, 0.98rem + 0.4vw, 1.2rem);   /* lead */
  --text-lg:   clamp(1.25rem, 1.05rem + 0.8vw, 1.65rem);  /* H3 */
  --text-xl:   clamp(1.7rem, 1.3rem + 1.7vw, 2.4rem);     /* H2 — titoli di sezione */
  --text-2xl:  clamp(1.9rem, 1.4rem + 1.9vw, 3rem);       /* display di sezione */
  --text-3xl:  clamp(2.6rem, 1.7rem + 3.6vw, 4.6rem);     /* display hero */

  --lh-tight: 1.12;
  --lh-snug: 1.18;
  --lh-body: 1.68;
  --tracking-label: 0.28em;   /* gli occhielli di categoria sono MOLTO tracciati */
  --tracking-display: 0;      /* il didone non si stringe */

  /* --- Spaziatura --- */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem;
  --space-6:2rem; --space-7:3rem; --space-8:4.5rem; --space-9:7rem; --space-10:10rem;
  --section-y: clamp(3.5rem, 2.2rem + 4vw, 6.5rem);

  /* --- Layout --- */
  --container: 1200px;
  --container-narrow: 62ch;
  --gutter: clamp(1.1rem, 0.5rem + 2.4vw, 2.2rem);

  /* --- Forma (bottoni pill, superfici squadrate: il taglio editoriale non arrotonda le foto) --- */
  --radius: 2px;
  --radius-lg: 3px;
  --radius-pill: 999px;
  --border: 1px solid var(--line);

  /* sporgenza del blocco pieno che la foto scavalca: è IL segno del verticale */
  --overlap: clamp(1.4rem, 0.8rem + 2vw, 2.6rem);

  /* --- Ombra (sobria: l'editoriale non gonfia) --- */
  --shadow-sm: 0 6px 18px rgba(30,26,22,.07);
  --shadow-md: 0 24px 50px -30px rgba(30,26,22,.35);

  --tile-gap: clamp(0.8rem, 0.4rem + 1.2vw, 1.4rem);

  /* --- Motion --- */
  --ease: cubic-bezier(.2,.6,.2,1);
  --dur: 240ms;
}
@media (prefers-reduced-motion: reduce){ :root{ --dur:0ms; } }