/* tokens.css — design genome stone_atelier. Atelier lapideo MODERNO/MONOCROMO (marmista di pregio): marmo
   bianco/greige + grafite + bande nero-marmo, senza colore — il colore lo danno le FOTO del marmo. Il carattere
   lo danno i BLOCCHI PIENI (nero/grafite), la GROTTESCA moderna (Space Grotesk) e la VENA grigia; le foto sono
   murate a ~1000px e non reggono 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 dal calcolo WCAG e dal DOM): monocromo → il testo è --ink/--accent-text
   (grafite), i fondi pieni sono --brand/--ink (nero) con testo --on-dark (bianco 14.5:1); --accent-deco è il
   GRIGIO delle vene/filetti (non-testo). --ink-muted MAI su fondo scuro (lì --muted-on-dark). */
:root {
  /* --- Colore (marmo monocromo: bianco/greige + grafite + nero) --- */
  --paper:    #F4F4F2;  /* bianco-marmo: fondo */
  --surface:  #E8E8E4;  /* grigio chiaro: sezioni alternate — TINT DI MARCA */
  --ink:      #1B1C1E;  /* grafite/nero: testo (15.5:1 su paper) */
  --ink-muted:#565A5E;  /* grigio testo secondario SOLO su fondo chiaro (6.3:1 su paper, 5.7:1 sul tint) */
  --line:     #DAD9D5;  /* filetto: righe e bordi (non-testo) */
  --accent-text:#35363A; /* grafite testo: eyebrow, link, numerali su chiaro (12+:1 su paper e tint) */
  --accent-deco:#9A9B9E; /* GRIGIO vena: filetti, vene, ::before, dettagli NON testuali (5.7:1 su brand) */
  --accent-lt:#CFCFCC;  /* grigio chiaro: vene/testo secondario su fondo scuro (10:1 su brand) */
  --on-dark:  #F4F4F2;  /* testo su nero-marmo (14.5:1) */
  --muted-on-dark:#B7B9BC; /* testo secondario su fondo scuro (footer legal, didascalie; 8.1:1 su brand) */
  --brand:    #202225;  /* nero-marmo: bande piene, hero, tessere, bottone primario */
  --night:    #15161A;  /* nero profondo: footer (16.4:1 col testo marmo) */

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

  /* --- Tipografia: display grottesca moderna (Space Grotesk, richiama il logo geometrico) + testo sans (Inter),
     OFL self-hosted. tokens.css deve definire --font-display e --font-body (tokensOf lancia se un token manca). --- */
  --font-display: "Space Grotesk", "Arial Narrow", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* scala editoriale moderna: display grottesco (regge il maiuscolo senza correre come le capitali romane) */
  --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.3rem;     /* H3 */
  --text-xl:  clamp(1.7rem, 1.25rem + 2.1vw, 2.6rem);     /* H2 — titoli di sezione */
  --text-2xl: clamp(2rem, 1.45rem + 2.6vw, 3.1rem);       /* display sezione */
  --text-3xl: clamp(2.4rem, 1.7rem + 3.4vw, 4rem);        /* display hero */

  --lh-tight: 1.02;   /* display grottesco maiuscolo */
  --lh-snug: 1.1;     /* titoli */
  --lh-body: 1.65;
  --tracking-label: 0.16em;   /* eyebrow uppercase */
  --tracking-display: 0.005em;/* grottesca maiuscola: tracking quasi neutro, moderno */

  /* --- Spaziatura (più generosa: whitespace = design) --- */
  --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(4.5rem, 3rem + 6vw, 9rem);

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

  /* --- Forma (marmo tagliato: netto, non pillola) --- */
  --radius: 2px;
  --radius-lg: 3px;
  --border: 1px solid var(--line);

  /* --- Ombra (grafite, sobria) --- */
  --shadow-sm: 0 6px 18px rgba(20,22,26,.08);
  --shadow-md: 0 18px 48px rgba(20,22,26,.14), 0 4px 14px rgba(20,22,26,.08);

  /* --- 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; } }