/* tokens.css — design genome food_producer. Produttore agricolo/food artigianale: crema calda + bordeaux
   del marchio, con l'arancio-zagara come unico accento caldo. Registro editoriale (linguaggio della categoria
   Food + riferimento horizoneur.com): display serif su fondo chiaro, bande piene di colore per il carattere.
   Vocabolario CHIUSO di token semantici: la sorgente da cui deriva theme.json. Niente valori fuori da qui.
   Contratto palette (a11y, VERIFICATO): l'arancio si sdoppia — --accent-text (scurito #A8480E, AA su ogni
   fondo chiaro: 4.8–5.4:1) per il testo, --accent-deco (#C85A17, 3:1 su chiaro) per filetti/bordi NON testo.
   La CTA accento porta fondo --accent-fill (#E08A3C) e testo --ink (6.4:1), MAI su --accent-deco (4.0:1).
   La CTA primaria è bordeaux con testo --on-dark (10.2:1). Su bordeaux il testo secondario è --on-dark-muted
   (crema, 7:1), MAI l'arancio (4.1:1). */
:root {
  /* --- Colore (crema + bordeaux + arancio-zagara) --- */
  --paper:    #FBF6EE;  /* crema: fondo caldo */
  --surface:  #F4E9D6;  /* crema profonda: sezioni alternate — TINT DI MARCA, mai grigio */
  --ink:      #2A1712;  /* inchiostro caldo: testo (15.9:1 su paper) */
  --ink-muted:#6A574B;  /* testo secondario SOLO su fondo chiaro (6.3:1 su paper, 5.7:1 sul tint) */
  --line:     #E3D6C2;  /* filetto: righe e bordi (non-testo) */
  --accent-text:#A8480E; /* arancio testo: eyebrow, link, numerali su chiaro (5.4:1 su paper, 4.9:1 sul tint) */
  --accent-deco:#C85A17; /* arancio decoro: filetti, ::before, dettagli NON testuali (3.5–4.0:1 su chiaro) */
  --accent-fill:#E08A3C; /* arancio chiaro: fondo della CTA accento (testo --ink, 6.4:1) e testo su bordeaux profondo */
  --accent-tint:#F7E7D2; /* arancio tenue: bande/badge caldi */
  --on-dark:  #FBF6EE;  /* testo su bordeaux (10.2:1) */
  --on-dark-muted:#E8C9AF; /* testo secondario su fondo scuro (footer legal, eyebrow su banda, 7:1) */
  --brand:    #7C0237;  /* bordeaux del marchio: bande piene, hero, banda contatti */
  --brand-deep:#5E0129; /* bordeaux profondo: footer (12.9:1 col testo crema) */

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

  /* --- Tipografia: display serif editoriale (DM Serif Display) + testo humanist (Poppins), OFL self-hosted --- */
  /* DM Serif Display ha UN solo peso (400), alto contrasto: sta SOLO in display (>=24px), mai nel corpo. */
  --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-brand: "Pacifico", "Segoe Script", cursive;   /* wordmark d'intestazione, vicino al lettering del logo */

  /* scala editoriale: display generosi (il serif regge), corpo sobrio */
  --text-sm:  0.78rem;    /* eyebrow/meta, uppercase tracked */
  --text-base: 1.0625rem; /* 17 corpo */
  --text-md:  clamp(1.14rem, 1.02rem + 0.5vw, 1.36rem);  /* lead */
  --text-lg:  1.32rem;    /* H3 */
  --text-xl:  clamp(1.85rem, 1.25rem + 2.2vw, 2.75rem);  /* H2 — titoli di sezione */
  --text-2xl: clamp(2.1rem, 1.5rem + 2.6vw, 3.3rem);     /* display sezione / page-head */
  --text-3xl: clamp(2.5rem, 1.7rem + 3.6vw, 4.4rem);     /* display hero */

  --lh-tight: 1.08;   /* display */
  --lh-snug: 1.16;    /* titoli */
  --lh-body: 1.62;
  --tracking-label: 0.16em;   /* eyebrow uppercase */
  --tracking-display: 0em;    /* il serif non va stretto */

  /* --- 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(4rem, 2.5rem + 6vw, 7.5rem);

  /* --- Layout --- */
  --container: 1180px;
  --container-narrow: 62ch;
  --gutter: clamp(1.25rem, 0.4rem + 4vw, 3.5rem);

  /* --- Forma (morbida, da dispensa) --- */
  --radius: 6px;
  --radius-lg: 14px;
  --border: 1px solid var(--line);

  /* --- Ombra (sobria, calda) --- */
  --shadow-md: 0 16px 44px rgba(42,23,18,.12), 0 3px 12px rgba(42,23,18,.07);

  /* --- Griglia foto: gutter obbligatorio (le tessere non si toccano mai) --- */
  --tile-gap: clamp(0.6rem, 0.3rem + 1vw, 1.1rem);

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