/* base.css — reset, token (PROGETTO.md §5–6), elementi base. Nessuna classe di componente qui. */
@font-face { font-family: "Geist"; src: url("../fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  /* marca */
  --brand-50: #F9F1F1; --brand-100: #F1DDDE; --brand-200: #E3C0C2; --brand-300: #D08B8F; --brand-400: #C6393E;
  --brand-500: #B30F11; --brand-600: #990003; --brand-700: #7A0002; --brand-800: #5A0205; --brand-900: #3A0306;
  /* neutri freddi */
  --neutro-50: #F9FAFB; --neutro-100: #F2F4F7; --neutro-200: #EAECF0; --neutro-300: #D0D5DD; --neutro-400: #98A2B3;
  --neutro-500: #667085; --neutro-600: #475467; --neutro-700: #344054; --neutro-800: #1D2939; --neutro-900: #101828;
  --canvas: #F7F8FA; --bianco: #FFFFFF;
  /* verde e semantici */
  --verde-logo: #10B981; --ok: #1F7A4D; --ok-bg: #E6F4EC; --attenzione: #8F6A12; --attenzione-bg: #FFF4C2; --errore: #B42318;
  /* alias */
  --sfondo: var(--canvas); --superficie: var(--bianco); --testo: var(--neutro-900); --testo-secondario: var(--neutro-600);
  --testo-tenue: var(--neutro-500); --bordo: var(--neutro-300); --separatore: var(--neutro-200);
  --primario: var(--brand-600); --primario-hover: var(--brand-700); --focus: var(--brand-500);
  /* tipografia */
  --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --t-h1: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem); --t-h2: clamp(1.875rem, 1.3rem + 2vw, 2.75rem); --t-h3: 1.25rem;
  --t-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); --t-corpo: 1rem; --t-piccolo: 0.875rem; --t-etichetta: 0.75rem;
  --t-numero: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  /* spazi, forme, movimento */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-24: 6rem; --sp-32: 8rem;
  --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-xl: 24px;
  --ombra-sm: 0 1px 2px rgba(16, 24, 40, .06); --ombra: 0 4px 12px rgba(16, 24, 40, .08); --ombra-lg: 0 16px 40px rgba(16, 24, 40, .12);
  --ease: cubic-bezier(.22, .61, .36, 1); --largh: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 var(--t-corpo)/1.6 var(--font); color: var(--testo); background: var(--sfondo); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
h1 { font-size: var(--t-h1); font-weight: 700; line-height: 1.02; letter-spacing: -.03em; }
h2 { font-size: var(--t-h2); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--neutro-900); }
h3 { font-size: var(--t-h3); font-weight: 600; line-height: 1.3; color: var(--neutro-800); }
p { max-width: 62ch; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
ul[class], ol[class] { list-style: none; padding: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mono { font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.solo-lettori { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
a.solo-lettori:focus { position: fixed; top: var(--sp-2); left: var(--sp-2); z-index: 30; width: auto; height: auto; margin: 0; padding: var(--sp-2) var(--sp-4); clip: auto; clip-path: none; background: var(--superficie); color: var(--testo); border-radius: var(--r-sm); box-shadow: var(--ombra); }
.etichetta { font-size: var(--t-etichetta); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--primario); }
.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--testo-secondario); }
.piccolo { font-size: var(--t-piccolo); color: var(--testo-tenue); }

/* comparsa allo scroll (main.js aggiunge .is-visibile) */
.rivela { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.rivela.is-visibile { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rivela { opacity: 1; transform: none; }
}