/* tokens.css — design genome cobbler_workshop. Calzoleria e laboratorio di riparazione calzature e
   pelletteria: fondo CHIARO e molto bianco, bande FOTOGRAFICHE a piena larghezza, display SERIF con la
   parola in corsivo. Il riferimento è un template di calzature letto sotto la piega: occhiello minuscolo
   tracciato + display serif italico + sottotitolo piccolo, centrati sopra la fotografia.
   Vocabolario CHIUSO di token semantici: la sorgente da cui deriva theme.json. Niente valori fuori da qui.

   La palette NON è una scelta di gusto: il marchio del primo cliente è un PNG a fondo trasparente i cui
   pixel opachi sono al 100% #8B0000 — un solo bordeaux, misurato, senza sfumature. Da lì nasce l'intera
   famiglia di marca. La SECONDA famiglia non è un secondo colore ma una scala di NEUTRI CALDI: il colore
   vero lo portano le fotografie del cuoio (stessa scelta di stone_atelier, dove il colore lo dà il marmo).
   ⚠ Un accento cuoio saturo era la tentazione ovvia e si è misurata: #A9762E col bianco fa 3,95 — sotto AA
   per il corpo — e cinque verticali della flotta hanno già un accento ottone/tan. Non entrarci è insieme
   accessibilità e differenziazione.

   Contratto palette (a11y, MISURATO su 26 coppie — non stimato, zero sotto soglia):
   ink su paper 17,97 · ink su surface 16,85 · ink su surface-2 14,82 · ink su sage-tint 15,74 ·
   ink-muted su paper 7,73 · ink-muted su surface 7,25 · ink-muted su surface-2 6,38 ·
   brand su paper 10,01 · brand su surface 9,39 · brand su surface-2 8,26 · accent-ink su paper 11,49 ·
   on-dark su brand 9,39 · on-dark su brand-dark 14,87 · on-dark su brand-mid 6,91 ·
   on-dark su accent-dark 11,84 · on-dark-muted su brand-dark 9,67 · on-dark-muted su brand 6,10 ·
   sage-light su brand-dark 8,46 · sage su paper 6,06 · sage su surface 5,68 · brand-mid su paper 7,37.

   ⚠⚠ REGOLE D'USO NON NEGOZIABILI (nascono dai numeri, non dal gusto):
   - il bordeaux #8B0000 è l'unico caso fortunato della flotta: fa 10,01 col bianco in ENTRAMBI i versi, e
     quindi porta testo su chiaro E regge una banda piena con testo chiaro sopra. Non serve una variante
     scurita per il testo: --accent-ink esiste per gli hover e per i corpi lunghi, non per rimediare;
   - --sage (#6E6055) è un neutro caldo che PORTA TESTO (6,06 su carta): è il colore delle didascalie, dei
     meta e dei filetti. NON è una superficie — le superfici sono --surface, --surface-2 e --sage-tint;
   - --sage-light vive SOLO su fondo scuro (8,46 sul bordeaux profondo); su carta è invisibile;
   - --ink-muted vale SOLO su fondo chiaro; su fondo scuro si usa --on-dark-muted;
   - un testo sopra una FOTO non è coperto da questi rapporti: va misurato dal pixel renderizzato. La
     testata fotografica porta perciò un velo tarato sul fotogramma più CHIARO, non sul più scuro. */
:root {
  /* --- Colore (carta + bordeaux del marchio + neutri caldi del cuoio) --- */
  --paper:      #FFFFFF;  /* carta: fondo dominante — la fotografia respira sul bianco */
  --surface:    #FBF7F2;  /* carta calda: sezioni alternate */
  --surface-2:  #F0E8E0;  /* superfici di riposo, tessere e placeholder */
  --ink:        #1A1614;  /* inchiostro: testo (17,97:1 su carta) */
  --ink-muted:  #5A514C;  /* inchiostro tenue: testo secondario SOLO su fondo chiaro (7,73:1) */
  --line:       #E4DAD1;  /* filetto: bordi e righe (non-testo) */
  --brand:      #8B0000;  /* BORDEAUX del marchio, misurato sui pixel del logo (10,01:1 su carta) */
  --brand-mid:  #A81C1C;  /* bordeaux chiaro: hover e superfici intermedie (bianco caldo 6,91) */
  --brand-dark: #4E0000;  /* bordeaux profondo: bande piene e piè (bianco caldo 14,87) */
  --sage:       #6E6055;  /* CUOIO: didascalie, meta, filetti marcati. Porta testo (6,06 su carta) */
  --sage-light: #C9BBAD;  /* cuoio chiaro: il neutro che parla SUL BUIO (8,46 sul bordeaux profondo) */
  --sage-tint:  #F5EFE8;  /* sabbia: la banda alternata calda */
  --accent:     #8B0000;  /* stesso bordeaux: bottone primario, testo chiaro sopra (9,39) */
  --accent-ink: #7A0000;  /* bordeaux portato a TESTO lungo su chiaro (11,49) */
  --accent-dark:#6E0000;  /* bordeaux scuro: hover del bottone primario (11,84) */
  --on-dark:    #FBF7F2;  /* testo su fondi pieni (14,87 sul bordeaux profondo · 9,39 sul bordeaux) */
  --on-dark-muted: #D8C7BA; /* testo secondario su fondo scuro (9,67 sul bordeaux profondo) */

  /* Velo della fotografia della testata: il titolo ci sta SOPRA, quindi il velo non è decorativo — è ciò
     che tiene il contrasto quando la foto arriva al fotogramma più chiaro (il muro crema della bottega). */
  --scrim:      rgba(26,22,20,.34);
  --scrim-deep: rgba(26,22,20,.72);

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

  /* --- Tipografia: display SERIF con italico vero (Petrona) + testo grottesco neutro (Work Sans),
     entrambi OFL self-hosted. Petrona è caldo e robusto: legge «bottega onesta», non «lusso» — ed è la
     ragione per cui non si è preso un didone, che sulla stessa categoria avrebbe fatto il gemello di una
     salumeria già in flotta. L'ITALICO non è decorazione: è lo slot strutturale del registro. --- */
  --font-display: "Petrona", Georgia, "Times New Roman", serif;
  --font-body: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* scala tipografica: salto display↔testo molto marcato (il riferimento sta a ~90px sulla banda foto).
     ⚠ Tarata sulla copy DEMO: sulla copy reale va misurata nel contenitore vero, e un titolo che passa da
     riga piena a colonna scende di un gradino. */
  --text-sm:   0.75rem;   /* occhielli e meta, maiuscoletto tracciato */
  --text-base: 1.0625rem; /* 17 corpo */
  --text-md:   clamp(1.06rem, 0.99rem + 0.36vw, 1.2rem);  /* lead */
  --text-lg:   clamp(1.22rem, 1.06rem + 0.7vw, 1.55rem);  /* H3 */
  --text-xl:   clamp(1.7rem, 1.28rem + 1.75vw, 2.5rem);   /* H2 — titoli di sezione */
  --text-2xl:  clamp(2rem, 1.42rem + 2.4vw, 3.2rem);      /* display di sezione e page-head */
  /* ⚠ La page-head NON riusa la size della testata (regola 6): è una testata di pagina, non un hero. */
  --text-3xl:  clamp(2.5rem, 1.5rem + 4.2vw, 4.9rem);     /* display della banda fotografica */

  --lh-tight: 1.06;   /* il serif a scala grande si stringe poco: sotto 1.04 gli ascendenti si toccano */
  --lh-snug: 1.16;
  --lh-body: 1.68;
  --tracking-label: 0.22em;     /* gli occhielli sono TRACCIATI: è il segno del riferimento */
  --tracking-display: -0.012em; /* il serif vuole molto meno tracking negativo di un grottesco */

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

  /* --- Layout --- */
  --container: 1280px;
  --container-narrow: 68ch;
  --gutter: clamp(1.1rem, 0.5rem + 2.4vw, 2.6rem);

  /* --- Forma: angolo quasi NETTO. Una bottega non arrotonda: il riferimento taglia dritto, e il raggio
     minimo serve solo a togliere la durezza dello spigolo vivo sulle foto. --- */
  --radius: 2px;
  --radius-lg: 6px;
  --radius-pill: 999px;
  /* Il raggio dei CAMPI si separa da quello dei bottoni: una casella di testo a pillola non legge come
     moderna ma come sbagliata. */
  --field-radius: var(--radius);

  --border: 1px solid var(--line);

  /* Distanza fra il bordo della pagina e il contenitore: è ciò che un blocco deve recuperare per arrivare
     a filo pagina. ⚠ CRESCE SENZA LIMITE con la finestra (a 2560px vale 640): chi la usa come padding di
     compenso DEVE aggiungerla anche alla propria larghezza massima, altrimenti su un monitor largo il
     padding si mangia il blocco e il testo si riduce a una colonna di una lettera. */
  --bleed: max(var(--gutter), (100vw - var(--container)) / 2);

  /* Rapporto delle figure. Il verticale nasce attorno a fotografia ORIZZONTALE 3/2, perché è ciò che una
     reflex produce e ciò che il primo cliente ha (5760×3840 = esattamente 3/2). ⚠ Ma metà del suo corredo
     è VERTICALE (cinture, plantari, scaffali): --fig-ratio-tall esiste per quelle, e non è un ripiego. */
  --fig-ratio: 3 / 2;
  --fig-ratio-wide: 16 / 9;
  --fig-ratio-tall: 3 / 4;
  --fig-object-pos: 50% 50%;

  /* --- Leve di registro per-sito: il default è il comportamento storico del verticale. --- */
  --topbar-display: flex;            /* fascia di servizio: alcune botteghe non vogliono recapiti in testata */
  --hero-min-h: clamp(560px, 84vh, 880px);
  /* Larghezza della piastra del titolo. ⚠⚠ NON in `ch`: l'unità si misura sul font del CONTENITORE
     (il corpo, 17px), non sul display — 34ch valevano ~290px e il titolo restava su quattro righe.
     Si misura in px, sul titolo VERO del cliente: a 940px «Calzolaio a Roma» sta su una riga e
     «zona Trieste» sulla seconda, che è la spezzatura che il device vuole. */
  --hero-plate: min(100%, 940px);
  --footer-cols: 1.4fr 1fr 1fr;
  --footer-cols-2: 1.4fr 1fr;        /* ⚠ serve a --footer-cols quando una colonna sparisce */
  --contact-fig-h: clamp(230px, 34vw, 420px);
  --wordmark-display: block;         /* il wordmark gigante sopra il piè */

  /* --- Ombra (sobria: il registro editoriale non gonfia) --- */
  --shadow-sm: 0 6px 18px rgba(26,22,20,.07);
  --shadow-md: 0 26px 54px -30px rgba(26,22,20,.34);

  --tile-gap: clamp(0.9rem, 0.45rem + 1.3vw, 1.7rem);

  /* Altezza del «cromo» in testa alla pagina (fascia di servizio + intestazione). I valori sono le altezze
     REALI: si FISSANO, non si deducono dalle metriche del font. */
  --chrome-topbar: 36px;   /* contributo della fascia di servizio: 0 se spenta */
  --chrome-bar: 68px;      /* altezza dell'intestazione */
  --chrome: calc(var(--chrome-bar) + var(--chrome-topbar));
  --chrome-bar-shrunk: 54px;

  /* --- Sfumature. ⚠ Il punto più CHIARO di ogni sfumatura che porta testo chiaro non sale mai sopra
     --brand-mid (#A81C1C, bianco caldo 6,91): sotto quella soglia il contrasto è garantito lungo TUTTA la
     rampa, non solo al centro. Le sfumature decorative non portano testo e possono schiarire. --- */
  --grad-bordeaux: linear-gradient(158deg, #6E0000 0%, #4E0000 58%, #3A0000 100%);
  --grad-banda:    linear-gradient(100deg, #4E0000 0%, #7A0000 48%, #3A0000 100%);
  --grad-foot:     linear-gradient(180deg, #4E0000 0%, #2E0000 100%);
  --grad-carta:    linear-gradient(180deg, #FFFFFF 0%, #FDFAF6 60%, #FBF7F2 100%);
  --grad-sabbia:   linear-gradient(160deg, #F5EFE8 0%, #FFFFFF 55%, #F0E8E0 100%);
  --grad-velo:     linear-gradient(180deg, rgba(26,22,20,0) 30%, rgba(26,22,20,.72) 100%);
  --grad-velo-pieno: linear-gradient(180deg, rgba(26,22,20,.30) 0%, rgba(26,22,20,.52) 100%);

  /* --- Motion --- */
  --ease: cubic-bezier(.2,.6,.2,1);
  --dur: 260ms;
}
@media (max-width: 899.98px) { :root { --chrome-bar: 60px; } }
@media (max-width: 599.98px) { :root { --chrome-topbar: 0px; --topbar-display: none; } }
@media (prefers-reduced-motion: reduce){ :root{ --dur:0ms; } }