/* tokens.css — design genome canine_center. Centro cinofilo (pensione + asilo + addestramento): base calda
   crema/sabbia, il VERDE BOSCO del marchio e l'ORO-campione come SUPERFICI, una banda espresso come episodio
   di forza. Registro della categoria Animali/cinofilo (riferimento BePet) portato sullo scheletro-servizi:
   restano i contatori, il badge campione, la sezione storia, il mosaico su banda scura, l'avatar del referente.
   Vocabolario CHIUSO di token semantici: la sorgente da cui deriva theme.json. Niente valori fuori da qui.

   Contratto palette (a11y, MISURATO — verde e oro sono superfici, non inchiostri):
   - --brand (#33501F, verde bosco) e --accent-fill (#C08A2E, oro) NON portano MAI testo su fondo chiaro
     (l'oro fa 2.63 su crema). Vivono come campiture: sul verde va --on-dark (crema, 7.87) o --accent-lt
     (oro chiaro, 4.86); sull'oro va --ink (5.53). Il bianco pieno sul verde NON si usa (è già coperto da crema).
   - il testo-accento su chiaro è --accent-text (#2C4A18, verde-inchiostro): 8.65 su crema, 7.63 su sabbia;
     l'occhiello in oro-inchiostro --gold-ink (#875812): 5.29 su crema, 4.66 su sabbia.
   - su fondo scuro l'accento è --accent-lt (#E6B65C, oro chiaro): 9.38 su --ink.
   - --ink-muted (#5C5238) vale su entrambi i fondi chiari (6.68 su crema, 5.89 su sabbia). */
:root {
  /* --- Colore (crema + sabbia + verde bosco + oro + espresso) --- */
  --paper:    #F4EEE1;  /* crema: fondo dominante */
  --surface:  #EAE0CB;  /* sabbia: sezioni alternate */
  --ink:      #241C12;  /* espresso near-black: testo (14.5:1 su crema) e bande di forza */
  --ink-soft: #4A4133;  /* corpo dei paragrafi lunghi (8.67:1 su crema) */
  --ink-muted:#5C5238;  /* testo secondario su fondo chiaro (6.68:1 su crema, 5.89:1 su sabbia) */
  --line:     #E2D7BD;  /* filetto caldo: bordi e divisori (non-testo) */
  --brand:    #33501F;  /* verde bosco del marchio: SUPERFICIE (bande, blob, hover) — mai testo su chiaro */
  --brand-deep:#20340F; /* verde profondo: fondo pieno col testo chiaro sopra */
  --accent-text:#2C4A18; /* verde-inchiostro: eyebrow, parola accentata, link su fondo chiaro (8.65:1) */
  --gold-ink: #875812;  /* oro-inchiostro: occhiello su fondo chiaro (5.29:1) */
  --accent-fill:#C08A2E; /* oro campione: fondo della CTA e del badge (testo --ink, 5.53:1) */
  --accent-lt: #E6B65C; /* oro chiaro: accento SU FONDO SCURO/VERDE (9.38 su --ink, 4.86 sul verde) */
  --accent-tint:#EFE6D0; /* crema-oro tenue: campiture leggere e badge */
  --on-dark:  #F4EEE1;  /* crema sulle bande espresso/verde (14.5:1 e 7.87:1) */
  --on-dark-muted:#C9BE9E; /* testo secondario su fondo scuro (9.49:1) */

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

  /* --- Tipografia: display grottesco caldo (Bricolage Grotesque) + testo umanista (Figtree), OFL --- */
  /* Bricolage ha carattere e calore senza freddezza: l'energia da «campione» resta amichevole, giusta per
     un centro cinofilo di famiglia. Su provino con la copy vera ha battuto Archivo (neutro) e Fraunces 400
     (troppo quieto). Figtree è il corpo amichevole e leggibile. */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Figtree", 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.32rem;    /* H3 */
  --text-xl:  clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem);     /* titoli minori */
  --text-2xl: clamp(1.85rem, 1.4rem + 1.9vw, 2.9rem);    /* H2 — titoli di sezione */
  --text-3xl: clamp(2.4rem, 1.5rem + 3.6vw, 4.2rem);     /* display della testata */

  --lh-tight: 1.04;
  --lh-snug: 1.12;
  --lh-body: 1.62;
  --tracking-label: 0.16em;
  --tracking-display: -0.015em;

  /* --- 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.5rem);

  /* --- Layout --- */
  --container: 1200px;
  --container-narrow: 62ch;
  --gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
  /* l'altezza dell'intestazione è FISSATA in border-box, non dedotta dalle metriche del font: così
     sopravvive a un cambio di carattere senza spostare di un pixel ciò che le sta sotto */
  --header-h: 76px;

  /* --- Forma --- */
  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-card: 0 12px 28px rgba(36, 28, 18, .10);
  --shadow-panel: 0 20px 50px rgba(36, 28, 18, .22);
  --shadow-disc: 0 24px 60px rgba(36, 28, 18, .24);
}