/* tokens.css — design genome herbal_boutique. Erboristeria / negozio di prodotti naturali brand-forward:
   base CREMA calda, il VERDE SMERALDO del marchio come identità e superficie, il verde FOREST per testo/CTA,
   una banda verde SCURO come episodio di forza, un accento TERRACOTTA caldo e l'oro per micro-accenti su scuro.
   Registro della categoria Farmacie/erboristerie (riferimento BeTea3): apothecary botanico contemporaneo.
   Vocabolario CHIUSO di token semantici: la sorgente da cui deriva theme.json. Niente valori fuori da qui.

   Contratto palette (a11y, MISURATO — smeraldo e terracotta-fill sono SUPERFICI, non inchiostri):
   - --brand (#10A35C, smeraldo) NON porta testo su chiaro (2.95 su crema) né bianco-normale come bottone
     (3.27): vive come SUPERFICIE (emblema, spunte, filetti, hover, marquee, sipario del wipe).
   - la CTA primaria è il FOREST --brand-deep (#0B5C34) con testo chiaro --on-dark (7.3:1); i titoli su chiaro
     sono in --brand-deep (7.29 su crema).
   - il testo-accento caldo su chiaro è --accent-ink (#A84826, terracotta): 5.23 su crema; l'accento SUPERFICIE
     è --accent (#C4622D, terracotta) per badge/large.
   - su fondo scuro l'accento è --gold (#E9C46A): 6.73 su --brand-dark; il testo è --on-dark (crema, 10.1).
   - --ink (#26312A) corpo (12.2 su crema); --ink-muted (#556356) secondario (5.73 su crema, 4.93 su sage). */
:root {
  /* --- Colore (crema + sage + smeraldo + forest + terracotta + oro) --- */
  --paper:     #F6F3EA;  /* crema calda: fondo dominante */
  --surface:   #E7F0E6;  /* sage tint: sezioni alternate */
  --ink:       #26312A;  /* verde-nero: testo (12.2:1 su crema) */
  --ink-soft:  #3E4A40;  /* corpo dei paragrafi lunghi (9.3:1 su crema) */
  --ink-muted: #556356;  /* testo secondario (5.73:1 su crema, 4.93:1 su sage) */
  --line:      #E4DDC9;  /* filetto caldo: bordi e divisori (non-testo) */
  --brand:     #10A35C;  /* smeraldo del marchio: SUPERFICIE (emblema, spunte, filetti, hover) — mai testo su chiaro */
  --brand-mid: #0E7C46;  /* verde medio: superficie con testo chiaro (bianco 5.26) */
  --brand-deep:#0B5C34;  /* forest: titoli su chiaro (7.29) e CTA primaria (testo chiaro 7.3) */
  --brand-dark:#14432B;  /* verde profondo: banda scura di forza (crema 10.1) */
  --accent:    #C4622D;  /* terracotta: SUPERFICIE (badge, filetto occhiello) */
  --accent-ink:#A84826;  /* terracotta inchiostro: occhiello, parola accentata, link su chiaro (5.23) */
  --gold:      #E9C46A;  /* oro: accento SU FONDO SCURO (6.73 sul verde profondo) */
  --on-dark:   #F6F3EA;  /* crema sulle bande verdi scure (10.1:1 su brand-dark) */
  --on-dark-muted:#C6D3C4; /* testo secondario su fondo scuro (5.9:1 su brand-dark) */

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

  /* --- Tipografia: display serif caldo (Fraunces) + testo sans rotondo (Poppins), OFL self-hosted --- */
  /* Fraunces porta il calore botanico-apothecary (la body di riferimento BeTea3 è Poppins). Display peso 400
     (opsz drammatica alle grandi misure), UI/body Poppins 400/500/600. */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --text-sm:   0.82rem;   /* eyebrow/meta, uppercase tracked */
  --text-base: 1.0625rem; /* 17 corpo */
  --text-md:   clamp(1.06rem, 1rem + 0.3vw, 1.2rem);      /* lead */
  --text-lg:   1.34rem;   /* H3 */
  --text-xl:   clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem);     /* titoli minori */
  --text-2xl:  clamp(1.9rem, 1.45rem + 1.9vw, 2.9rem);    /* H2 — titoli di sezione */
  --text-3xl:  clamp(2.5rem, 1.7rem + 3.4vw, 4.15rem);    /* display della testata */

  --lh-tight: 1.06;
  --lh-snug: 1.14;
  --lh-body: 1.65;
  --tracking-label: 0.16em;
  --tracking-display: -0.01em;

  /* --- 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.4rem + 4.4vw, 6.25rem);

  /* --- Layout --- */
  --container: 1180px;
  --container-narrow: 64ch;
  --gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
  /* altezza intestazione FISSATA in border-box: sopravvive a un cambio font senza spostare nulla */
  --header-h: 76px;

  /* --- Forma --- */
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-card: 0 14px 34px rgba(20, 67, 43, .10);
  --shadow-panel: 0 24px 56px rgba(20, 67, 43, .20);
}