/* tokens.css — design genome artisan_atelier. Atelier sartoriale: écru caldo + blu di Prussia, con
   l'ottone come unico metallo. Il carattere lo danno i BLOCCHI PIENI di colore, non la fotografia:
   il materiale tipico di questi clienti è murato a ~1000px e non regge un hero a piena larghezza.
   Vocabolario CHIUSO di token semantici: la sorgente da cui deriva theme.json. Niente valori fuori da qui.
   Contratto palette (a11y, verificato): l'ottone si sdoppia — --accent-text (scurito, AA su ogni fondo
   chiaro) per il testo, --accent-deco (non-testo, 3:1 su Prussia) per filetti/bordi. Un bottone in ottone
   porta testo --ink (5.2:1), MAI bianco (3.1:1). --ink-muted MAI su fondo scuro (lì c'è --muted-on-dark). */
:root {
  /* --- Colore (écru + Prussia + ottone) --- */
  --paper:    #F2EDE4;  /* écru: fondo caldo */
  --surface:  #E8E0D2;  /* écru profondo: sezioni alternate — TINT DI MARCA, mai grigio */
  --ink:      #1A2230;  /* inchiostro: testo (13.7:1 su paper) */
  --ink-muted:#5C636B;  /* testo secondario SOLO su fondo chiaro (5.2:1 su paper, 4.6:1 sul tint) */
  --line:     #D8CFC0;  /* filetto: righe e bordi (non-testo) */
  --accent-text:#7B5D35; /* ottone testo: eyebrow, link, numerali su chiaro (5.2:1 su paper, 4.6:1 sul tint) */
  --accent-deco:#B08D57; /* ottone decoro: filetti, ::before, dettagli NON testuali (3.7:1 su Prussia) */
  --accent-lt:#C9AC7E;  /* ottone chiaro: accento anche testuale su fondo scuro (7.3:1 su brand) */
  --on-dark:  #F2EDE4;  /* testo su Prussia (11.5:1) */
  --muted-on-dark:#A9B3C0; /* testo secondario su fondo scuro (footer legal, didascalie) */
  --brand:    #1F3A5F;  /* blu di Prussia: bande piene, hero, tessere */
  --night:    #16293F;  /* Prussia profondo: footer (14.8:1 col testo écru) */

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

  /* --- Tipografia: display serif francese (Cormorant Garamond) + testo sans (Inter), OFL self-hosted --- */
  /* Cormorant ha occhio piccolo e contrasto alto: sta SOLO in display (>=24px), mai nel corpo. */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* scala editoriale: display generosi (il serif regge), corpo sobrio */
  --text-sm:  0.78rem;    /* eyebrow/meta, uppercase tracked */
  --text-base: 1.0625rem; /* 17 corpo */
  --text-md:  clamp(1.15rem, 1.02rem + 0.55vw, 1.4rem);   /* lead */
  --text-lg:  1.35rem;    /* H3 */
  --text-xl:  clamp(1.9rem, 1.25rem + 2.4vw, 2.9rem);     /* H2 — titoli di sezione */
  --text-2xl: clamp(2.2rem, 1.5rem + 2.9vw, 3.6rem);      /* display sezione */
  --text-3xl: clamp(2.6rem, 1.7rem + 4.1vw, 4.8rem);      /* display hero */

  --lh-tight: 1.06;   /* display */
  --lh-snug: 1.2;     /* titoli */
  --lh-body: 1.65;
  --tracking-label: 0.18em;   /* eyebrow uppercase */
  --tracking-display: 0em;    /* il serif non va stretto */

  /* --- 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(4rem, 2.5rem + 6vw, 8rem);

  /* --- Layout --- */
  --container: 1200px;
  --container-narrow: 62ch;
  --gutter: clamp(1.25rem, 0.4rem + 4vw, 3.5rem);

  /* --- Forma (sartoriale: filo, non pillola) --- */
  --radius: 2px;
  --radius-lg: 4px;
  --border: 1px solid var(--line);

  /* --- Ombra (sobria) --- */
  --shadow-md: 0 14px 40px rgba(26,34,48,.10), 0 3px 12px rgba(26,34,48,.06);

  /* --- Griglia foto: il gutter è OBBLIGATORIO (le tessere non si toccano mai) --- */
  --tile-gap: clamp(0.5rem, 0.25rem + 1vw, 1rem);

  /* --- Motion (sobria) --- */
  --ease: cubic-bezier(.2,.6,.2,1);
  --dur: 240ms;
}
@media (prefers-reduced-motion: reduce){ :root{ --dur:0ms; } }