/* tokens.css — design genome contract_textile. Casa tessile che lavora su misura per il contract:
   fondo bianco dominante, BANDE PIENE di marca che incorniciano la pagina (footer, scrim, sezioni) e la
   fotografia come protagonista — sono prodotti di pregio, la foto È il prodotto.
   Vocabolario CHIUSO di token semantici: la sorgente da cui deriva theme.json. Niente valori fuori da qui.

   Contratto palette (a11y, MISURATO — la marca ha due soli blu e l'azzurro è debole):
   l'azzurro si sdoppia come l'ottone di artisan_atelier. --azure è SUPERFICIE, non testo: su bianco fa
   4.49 (sotto AA) e non porta testo di nessun colore (bianco 4.49, ink 3.53, deep 3.40) — vive solo come
   fill/filetto/bordo (UI 3:1). Il testo azzurro è --azure-ink (5.68 su bianco, 5.03 sul tint), ed è anche
   la voce di menu ATTIVA che il cliente vuole "azzurra": si legge azzurra e passa AA.
   Corollario che vincola la struttura: --azure su --navy fa 3.69 ⇒ l'header NON può essere una banda
   navy (lì l'azzurro sarebbe illeggibile) ⇒ header BIANCO, banda navy nel footer e negli scrim.
   La CTA piena è --deep + bianco (15.26), MAI --azure + bianco. --ink-muted MAI su fondo scuro
   (lì c'è --muted-on-dark). Margine preteso ovunque: >=4.6, mai il valore al limite esatto. */
:root {
  /* --- Colore: SOLO i due blu del logo (richiesta esplicita del cliente) + neutri --- */
  --paper:    #FFFFFF;  /* bianco: fondo dominante */
  --surface:  #EEF1F9;  /* tint di marca: sezioni alternate — azzurrino, mai grigio */
  --ink:      #1C2233;  /* inchiostro: testo (15.8:1 su paper) */
  --ink-muted:#555E73;  /* testo secondario SOLO su fondo chiaro (6.5:1 su paper, 5.8:1 sul tint) */
  --line:     #D7DEEE;  /* filetto: righe e bordi (non-testo) */
  --azure:    #5C74BC;  /* azzurro del logo: SUPERFICIE — fill, filetti, bordi. MAI testo. */
  --azure-ink:#4864AC;  /* azzurro testo: voce di menu attiva, link, eyebrow (5.7:1 su paper) */
  --azure-lt: #8DA0D8;  /* azzurro chiaro: accento testuale su fondo scuro (7.0:1 su navy) */
  --on-dark:  #FFFFFF;  /* testo su navy (16.5:1) */
  --muted-on-dark:#C2CBE8; /* testo secondario su fondo scuro (footer legal, didascalie) */
  --deep:     #201864;  /* IL blu del logo: titoli, voci nav, CTA piena */
  --navy:     #1B1550;  /* navy profondo: bande piene, footer, scrim */
  --navy-rgb: 27, 21, 80;  /* stesso navy in canali: serve alle superfici semitrasparenti (targa hero) */

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

  /* --- Tipografia: display sans geometrico TONDO (Quicksand) + testo (Nunito Sans), OFL self-hosted --- */
  /* Quicksand è il match del lettering del logo (geometrico arrotondato, tutto minuscolo).
     Peso 600 sui titoli: a 700 impasta. Nunito Sans regge i paragrafi lunghi del materiale. */
  --font-display: "Quicksand", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* scala: display contenuti — la copy reale di questi clienti è LUNGA (titoli da 50-60 caratteri),
     i cap alti sono tarati sulla copy corta del demo e sul reale esplodono in 6 righe. */
  --text-sm:  0.8rem;     /* eyebrow/meta, uppercase tracked */
  --text-base: 1.0625rem; /* 17 corpo */
  --text-md:  clamp(1.1rem, 1rem + 0.5vw, 1.32rem);       /* lead */
  --text-lg:  1.3rem;     /* H3 */
  --text-xl:  clamp(1.7rem, 1.25rem + 1.7vw, 2.4rem);     /* H2 — titoli di sezione */
  --text-2xl: clamp(1.9rem, 1.35rem + 2.1vw, 2.75rem);    /* page-head h1 */
  --text-3xl: clamp(2.2rem, 1.5rem + 2.9vw, 3.4rem);      /* display hero */

  --lh-tight: 1.12;   /* display */
  --lh-snug: 1.22;    /* titoli */
  --lh-body: 1.68;
  --tracking-label: 0.14em;   /* eyebrow uppercase */
  --tracking-display: -0.005em;

  /* --- Spaziatura: ariosa (il reclamo del cliente è "poco elegante", non "poco denso") --- */
  --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(3rem, 1.9rem + 2.6vw, 4.75rem);

  /* --- Layout --- */
  --container: 1220px;
  --container-narrow: 64ch;   /* la misura di lettura sta sul PARAGRAFO, mai sul display */
  --gutter: clamp(1.25rem, 0.4rem + 4vw, 3.5rem);

  /* --- Forma: morbida come il lettering del logo --- */
  --radius: 4px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* --- Cornice delle foto: il cliente vuole le foto STACCATE, mai appiccicate --- */
  --frame-gap: clamp(0.75rem, 0.4rem + 1.2vw, 1.25rem);  /* gutter tra le foto di una galleria */
  --frame-pad: 6px;                                       /* cornice bianca attorno alla foto */

  /* --- Ombre: il cliente chiede CTA "valorizzate con delle ombreggiature" --- */
  --shadow-cta: 0 6px 18px rgba(32, 24, 100, 0.28);
  --shadow-cta-hover: 0 10px 26px rgba(32, 24, 100, 0.36);
  --shadow-card: 0 2px 10px rgba(28, 34, 51, 0.08);
  --shadow-card-hover: 0 12px 30px rgba(28, 34, 51, 0.14);

  --scrim: 0.46;   /* scrim minimo sulle foto hero: il testo bianco non dipende dal fotogramma */
}