/* 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) */

  /* ⚠ I tre che seguono erano CABLATI in components.css, quindi fuori dalla portata di un preset: ogni
     cliente di questo verticale si ritrovava addosso il verde del marchio del primo, il suo arancio al
     passaggio del mouse e il suo bordeaux dietro le fotografie. Il default e' il valore che era gia' a
     terra: chi non dichiara un preset non si muove di un byte. */
  --wordmark-ink: #58a55a;      /* colore del marchio in testata */
  --accent-fill-hover: #EEA45E; /* CTA accento al passaggio del mouse */
  --media-mat: #691b20;         /* fondo dietro le foto incorniciate (object-fit: contain) */

  /* Superfici DICHIARATE: default piatti, identici a prima. Un preset puo' sostituirli con sfumature
     senza che nessun sito gia' costruito cambi di un byte. */
  --alt-bg: var(--surface);          /* banda di sezione alternata */
  --head-bg: var(--surface);         /* testata di pagina */
  --head-border: var(--border);      /* filetto sotto la testata di pagina */
  --head-radius: 0;                  /* raggio inferiore della testata di pagina */
  --section-bg: transparent;         /* fondo delle sezioni non alternate */
  --card-bg: var(--paper);           /* fondo delle schede informative (trust)      */
  --storia-align: start;             /* allineamento verticale dei due campi della storia */
  --pstep-stagger: 1200ms;           /* passo fra un passo del metodo e il successivo */

  /* --- Banda fotografica a tutta larghezza: forma e corsa della parallasse -----------------------------
     ⚠ I tre valori vanno INSIEME: piu' corsa senza piu' sovradimensionamento scopre il fondo sopra o sotto
       la fotografia. Il default e' il terzetto di prima (21:7, 132%, -16%), quindi inerte. */
  --band-wide-ratio: 21 / 7;
  --band-oversize: 132%;
  --band-offset: -16%;
  --band-mask-da: 0;                 /* quanto la tendina copre PRIMA di aprirsi (0 = nessuna tendina) */
  --band-drift-da: 1;                /* scala della fotografia a banda chiusa */
  --band-drift-a: 1;                 /* scala a banda aperta (uguale = nessuna deriva) */
  --band-fissa-h: 170vh;             /* altezza della sezione col pannello inchiodato */
  --band-ferma-ratio: 16 / 9;        /* rapporto della fotografia incorniciata e immobile */
  --band-parallasse-h: 62vh;         /* altezza della banda col fondo ancorato alla finestra */

  /* --- Trattamento delle fotografie e dell'occhiello ---------------------------------------------
     Tutti col DEFAULT copiato dal valore cablato di prima: chi non li ridichiara non vede nulla cambiare. */
  /* Velatura dell'hero fotografico. Il verticale la fa col colore di marca su TUTTA la larghezza: sotto
     una fotografia di cibo quel velo si porta via i colori naturali del soggetto. Chi ha fotografie che
     devono restare vere ridichiara questo token con una velatura LOCALE e neutra. */
  --hero-scrim:
    linear-gradient(90deg, color-mix(in srgb, var(--brand-deep) 92%, transparent) 0%, color-mix(in srgb, var(--brand-deep) 70%, transparent) 45%, color-mix(in srgb, var(--brand-deep) 30%, transparent) 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--brand-deep) 55%, transparent), transparent 55%);
  --header-tel: inline-flex;         /* recapito in testata: `none` lo toglie dalla riga */
  --wordmark-size-sm: var(--wordmark-size);  /* misura del marchio sotto i 640px */
  --emblem-size-sm: 66px;            /* misura dell'emblema sotto i 640px */
  --wordmark-min-sm: 0;              /* pavimento di larghezza del nome sotto i 640px */
  --header-gap-sm: var(--space-5);   /* spaziatura della riga di testata sotto i 640px */
  /* Velatura dell'hero sotto i 760px: stessa geometria per default, perche' un sito che non la ridichiara
     non deve cambiare. Esiste separata perche' su una colonna stretta il testo occupa TUTTA la larghezza. */
  --hero-scrim-sm: var(--hero-scrim);
  --eyebrow-rule: block;             /* filetto decorativo dell'occhiello: `none` lo toglie */
  --eyebrow-on-photo: var(--on-dark-muted);  /* occhiello sull'hero fotografico */
  --eyebrow-tracking: var(--tracking-label);
  --eyebrow-size: var(--text-sm);
  --jar-media-bg: var(--media-mat);  /* fondo dietro la foto di prodotto */
  --jar-media-fit: contain;
  --jar-radius: var(--radius);       /* raggio della scheda di prodotto */
  --jar-border: var(--border);
  --jar-shadow: none;                /* rilievo a riposo della scheda */

  /* ⚠ Rapporti d'inquadratura delle foto di prodotto. Erano cablati sul parco del primo cliente, che
     fotografa BARATTOLI (verticali, e il tappo non si taglia): a un cliente che fotografa spicchi
     orizzontali il riquadro verticale lascia due bande di fondo sopra e sotto ogni scheda. Default =
     i valori di prima. */
  --jar-ratio: 4 / 5;    /* riquadro delle schede prodotto */
  --spec-ratio: 1 / 1;   /* riquadro delle specialita' */

  --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;
  /* ⚠ La testata ha una larghezza PROPRIA. Un cliente one-page ha tre voci di menu e sta in 1180px;
     uno con sei voci piu' telefono e CTA no, e il menu va a capo su due righe. Default = il contenitore,
     quindi chi non lo cambia non si muove di un pixel. */
  --header-container: var(--container);
  --wordmark-size: 1.95rem;   /* marchio in testata: con molte voci di menu conviene piu' contenuto */
  --container-narrow: 62ch;
  --container-lettura: 78ch;         /* colonna di lettura delle pagine-documento */
  --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);
  --shadow-sm: 0 6px 18px rgba(42,23,18,.07), 0 1px 4px rgba(42,23,18,.05);  /* rilievo appena accennato */

  /* --- 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; } }