/* tokens.css — design genome childcare_nursery. Asilo nido / prima infanzia: base PANNA calda che accoglie
   le fotografie degli ambienti (legno e beige), la SALVIA del marchio come superficie, una banda BOSCO come
   episodio di forza e il CORALLO come unico accento. Registro della categoria Infanzia: struttura dal
   riferimento Daycare (testata a pillola, bordi a nuvola, bande piene), direzione creativa da Kidla
   (rotondità, tinte piene, tessere colorate). Vocabolario CHIUSO: la sorgente da cui deriva theme.json.

   Contratto palette (a11y MISURATO su 19 coppie — la salvia e il corallo sono superfici, non inchiostri):
   - --sage (#AFC7C3) NON porta MAI testo chiaro: è campitura. Sopra ci va --ink (9.00).
   - --coral (#E2674F) è il fondo della CTA e porta --ink (4.80). Il testo PANNA sul corallo fa 3.11
     ⇒ non si usa mai: è la trappola in cui cade chi copia i bottoni dei template.
   - il testo-accento su fondo chiaro è --coral-ink (#B0442E, 5.27 su panna) o --coral-deep (#8E3624, 7.24).
   - su fondo BOSCO l'accento esiste solo schiarito: --coral-lt (#F2A08B, 4.67 sul bosco, 6.22 sul bosco
     profondo). Il corallo pieno sul bosco fa 2.89 ⇒ vietato anche come filetto.
   - --ink-muted (#5C5A55) vale su entrambi i fondi chiari (6.42 su panna, 5.55 su salvia tenue). */
:root {
  /* --- Colore (panna + salvia + bosco + corallo) --- */
  --paper:      #FDF6EC;  /* panna calda: fondo dominante, scelta sulla tinta misurata delle foto (h 18-43) */
  --surface:    #EFF3EF;  /* salvia chiarissima: sezioni alternate */
  --sage-tint:  #DFE9E4;  /* salvia tenue: bande e pannelli */
  --sage:       #AFC7C3;  /* salvia del marchio: SUPERFICIE (tessere, cornici) — mai testo */
  --sage-light: #C6D8D4;  /* salvia chiara: filetti e campiture leggere */
  --brand:      #2F4A42;  /* verde bosco: la banda scura del sito */
  --brand-deep: #22362F;  /* bosco profondo: piè di pagina e fondi pieni */
  --brand-mid:  #4A6B60;  /* bosco medio: superfici secondarie su scuro (--on-dark fa 5.49) */
  --coral:      #E2674F;  /* corallo dalle foglioline del marchio: fondo CTA, testo --ink (4.80) */
  --coral-ink:  #B0442E;  /* corallo-inchiostro: occhiello, link e parola accentata su chiaro (5.27) */
  --coral-deep: #8E3624;  /* corallo forte: testo d'accento ad alto contrasto (7.24) */
  --coral-lt:   #F2A08B;  /* corallo schiarito: l'UNICO ammesso sopra la banda bosco (4.67) */
  --ink:        #23211F;  /* grafite del tratto del marchio: testo (14.95 su panna) */
  --ink-soft:   #3D3A36;  /* corpo dei paragrafi lunghi */
  --ink-muted:  #5C5A55;  /* testo secondario su fondo chiaro */
  --line:       #E4DCCD;  /* filetto caldo: bordi e divisori (non-testo) */
  --on-dark:    #FDF6EC;  /* panna sulle bande bosco (8.98) e sul bosco profondo (11.96) */
  --on-dark-muted: #C3D2CC; /* testo secondario su fondo bosco (6.15) */

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

  /* --- Tipografia: display scritto a mano (Shadows Into Light) + testo geometrico (Jost),
     OFL self-hosted --- */
  /* ⚠ Il marchio è disegnato a MANO — lettere diritte e staccate, tratto SOTTILE e uniforme, spaziatura
     larga. Due tentativi prima di questo: Fredoka (respinta il 2026-09-16: «troppo tondeggiante»), poi
     Architects Daughter, che ne ripeteva la mano ma restava «grassottella» (cliente, 2026-09-18: serve
     «più snello, caratteri più allungati»). Shadows Into Light risponde a ENTRAMBE le richieste, misurato
     sullo stesso corpo: asta di 9px contro 15 (−59% rapportata alla x-height) e lettere più strette del
     19%. ⚠ Gaegu Light era ancora più vicino al marchio ma è stato SCARTATO: il suo sottoinsieme latino
     non porta gli accenti, e «Attività / è / più / così» uscivano in un font di sistema in mezzo alla
     parola. Su un sito italiano la copertura degli accenti è un requisito, non un dettaglio.
     ⚠⚠ UN SOLO PESO (400). Per questo `headingWeight` è 400 e non 600: con un peso solo il browser
     sintetizzerebbe un finto grassetto, che su un carattere a mano si impasta. Vale anche per i sette
     pesi dei FOGLI (base.css, components.css): 400 ovunque il display sia in uso. Se un titolo deve pesare
     di più si alza il CORPO, non il peso.
     ⚠ Si era provata anche IBM Plex Sans Condensed: prendeva le PROPORZIONI del marchio (stretto, alto,
     terminali netti) ma non la mano, e a confronto diretto restava lontana.
     Jost resta al corpo: non è in discussione. */
  --font-display: "Shadows Into Light", system-ui, sans-serif;
  --font-body: "Jost", 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.3rem;     /* H3 */
  --text-xl:   clamp(1.4rem, 1.2rem + 0.9vw, 1.95rem);    /* titoli minori e titoli in colonna */
  --text-2xl:  clamp(1.9rem, 1.45rem + 1.9vw, 2.95rem);   /* H2 — titoli di sezione */
  --text-3xl:  clamp(2.4rem, 1.5rem + 3.5vw, 4.1rem);     /* display della testata */

  --lh-tight: 1.06;
  --lh-snug: 1.16;
  --lh-body: 1.65;
  --tracking-label: 0.14em;
  --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.5rem);

  /* --- Layout --- */
  --container: 1200px;
  --container-narrow: 62ch;
  --gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
  /* altezza dell'intestazione FISSATA in border-box: sopravvive a un cambio di carattere senza
     spostare di un pixel ciò che le sta sotto */
  --header-h: 96px;
  --header-gap: 14px;   /* stacco della pillola dal bordo superiore */
  /* respiro della testata: la stessa aria sopra e sotto il contenuto dell'hero */
  --hero-respiro: clamp(2rem, 1rem + 3.4vw, 4rem);

  /* --- Forma: nulla è a spigolo vivo, la rotondità è il messaggio della categoria --- */
  --radius: 14px;
  --radius-lg: 26px;
  --radius-pill: 999px;
  --scallop: 30px;      /* passo del bordo a nuvola fra le bande */
  /* la fogliolina del marchio come MASCHERA: qui url() risolve rispetto al foglio, mentre in uno stile
     inline dentro il post_content il percorso non verrebbe riscritto e resterebbe un segno vuoto */
  --leaf-mask: url("../assets/img/leaf.svg");

  --shadow-card: 0 14px 32px rgba(35, 33, 31, .09);
  --shadow-panel: 0 22px 54px rgba(35, 33, 31, .18);
  --shadow-pill: 0 10px 28px rgba(35, 33, 31, .16);
}