/* tokens.css — design genome home_linen_store. Negozio di biancheria per la casa, tendaggi, intimo e
   accappatoi: base CHIARA e pulita come il lino stirato, il NAVY del marchio come inchiostro e come banda
   di forza, il TURCHESE come superficie fresca (mai inchiostro), una crema calda per le sezioni alternate.
   Registro della categoria Negozi (riferimenti BeOptics + BeGadget): mezzi campi, forme organiche, bande a
   tinta che cambiano lungo la pagina. Vocabolario CHIUSO: la sorgente da cui deriva theme.json.

   Contratto palette (a11y, MISURATO — 21 coppie rese, 0 violazioni, margine minimo 4.58):
   - --brand (#081830) e' il navy CAMPIONATO DAI PIXEL DEL LOGO del primo cliente: inchiostro (17.74 su
     carta, 16.30 su crema) e banda scura di forza (bianco 17.74).
   - ⚠⚠ --accent (#68ccd1, turchese) e' SUPERFICIE E BASTA: bianco sopra fa 1.88, e sopra bianco fa 1.88.
     Non porta testo di nessun colore. Sulla banda turchese il testo e' --ink (9.42).
   - il testo-accento su chiaro e' --accent-ink (#3d787b): 5.03 su carta e 4.63 su crema — ricavato sulla
     superficie PEGGIORE, non sul bianco, perche' un token verificato sull'altra superficie mente.
   - ⚠ --accent-ink NON regge sul navy (3.52): li' l'accento e' --accent (9.42) o --accent-light (12.40).
   - la CTA primaria e' --accent-dark (#2f5e61) con testo chiaro (7.25).
   - --ink-muted (#4a4038, bruno caldo del sito del cliente) secondario: 10.09 su carta, 9.27 su crema. */
:root {
  /* --- Colore (carta + crema + navy + turchese) --- */
  --paper:     #ffffff;  /* carta: fondo dominante, il bianco del lino */
  --surface:   #f7f5f2;  /* crema tiepida: sezioni alternate */
  --ink:       #081830;  /* navy del marchio: testo (17.74:1 su carta) */
  --ink-soft:  #24313f;  /* corpo dei paragrafi lunghi */
  --ink-muted: #4a4038;  /* bruno caldo: testo secondario (10.09 su carta, 9.27 su crema) */
  --line:      #e3e0db;  /* filetto caldo: bordi e divisori (non-testo) */
  --brand:     #081830;  /* navy: identita' e banda di forza */
  --brand-mid: #1b3350;  /* navy medio: superficie con testo chiaro (bianco 12.84) */
  --brand-dark:#050f1f;  /* navy profondo: pie' e bande di chiusura (bianco 19.19) */
  --accent:    #68ccd1;  /* turchese: SUPERFICIE — mai testo, in nessuna direzione */
  --accent-light:#a8e2e5;/* turchese chiaro: accento SU FONDO SCURO (12.40 sul navy) */
  --accent-tint:#e8f7f8; /* velo turchese: fondo di riquadri e schede */
  --accent-ink:#3d787b;  /* turchese inchiostro: occhiello e link su chiaro (5.03 carta, 4.63 crema) */
  --accent-dark:#2f5e61; /* turchese profondo: CTA primaria con testo chiaro (7.25) */
  --on-dark:   #ffffff;  /* testo sulle bande navy (17.74:1 su brand) */
  --on-dark-muted:#b9c4d2; /* secondario su fondo scuro (10.04:1 su brand) */

  --bg: var(--paper);
  --fg: var(--ink);
  --accent-role: var(--accent-dark);
  --focus: var(--accent-ink);
  /* usato dalla pulsazione social: il colore del cerchio che si espande, come rgb spazio-separato */
  --veil-rgb: 104 204 209;

  /* --- Tipografia: display geometrico (Jost) + testo umanista (Source Sans 3), OFL self-hosted --- */
  /* Jost e' il geometrico piu' vicino al display maiuscolo di BeOptics; Source Sans 3 e' il font del sito
     attuale del primo cliente, quindi il testo resta riconoscibile a chi il negozio lo conosce gia'. */
  --font-display: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --text-sm:   0.8rem;    /* eyebrow/meta, uppercase tracked */
  --text-base: 1.0625rem; /* 17 corpo */
  --text-md:   clamp(1.06rem, 1rem + 0.32vw, 1.22rem);    /* lead */
  --text-lg:   1.32rem;   /* 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.4rem, 1.6rem + 3.3vw, 4rem);       /* display della testata */

  --lh-tight: 1.06;
  --lh-snug: 1.14;
  --lh-body: 1.62;
  --tracking-label: 0.18em;
  --tracking-display: -0.02em;

  /* --- 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;
  /* ⚠ La misura di lettura si dichiara in REM e si applica ai PARAGRAFI, mai al contenitore: `ch` si
     risolve sul font del CONTENITORE e non su quello reso, e su un elemento di layout lascia meta' pagina
     bianca. 34rem ~ 62-70 caratteri con Source Sans 3 a 17px. */
  --measure: 34rem;
  --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: 78px;

  /* --- Forma --- */
  --radius: 10px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-card: 0 14px 34px rgba(8, 24, 48, .09);
  --shadow-panel: 0 24px 56px rgba(8, 24, 48, .18);
}