/* ============================================================================
   base.css: reset, tipografia, focus, utility. Solo token (tokens.css).
   CSP style-src 'self': niente style="" nei template; i valori dinamici
   (larghezze, posizioni, colori categoria) arrivano via data-* e app.js.
   ============================================================================ */

/* ── reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--stage); color: var(--ink);
  font-family: var(--fb); font-size: var(--fs-0); line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
/* il browser dà a pre/code un font a larghezza fissa: system.md lo vieta ovunque, palco compreso */
pre, code, kbd, samp { font-family: var(--fb); font-size: 1em; }
:focus-visible { outline: 2px solid var(--cue); outline-offset: 2px; border-radius: var(--r); }
::selection { background: color-mix(in srgb, var(--cue) 35%, transparent); }

/* ── titoli: Archivo compresso e pesante ─────────────────────────────────── */
h1, h2, h3, h4, .fh {
  font-family: var(--fh); font-weight: var(--fh-weight); font-stretch: var(--fh-stretch);
  line-height: var(--fh-leading); letter-spacing: 0;
}

/* ── utility di testo ────────────────────────────────────────────────────── */
/* .mono resta come nome di classe: ora vuol dire solo "cifre allineate" */
.mono, .num { font-variant-numeric: tabular-nums; }
.muted, .faint { color: var(--ink-soft); }
.eyebrow { font-size: var(--fs-0); font-weight: 600; color: var(--ink-soft); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.text-center { text-align: center; }
.text-right, .ar { text-align: right; }
.nowrap { white-space: nowrap; }
.fs-sm, .fs-xs { font-size: var(--fs-0); }
.link { color: var(--cue); font-weight: 600; text-decoration: none; }
.link:hover { text-decoration: underline; }
.star { color: var(--cue); }

/* ── utility di layout ───────────────────────────────────────────────────── */
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.gap2 { gap: var(--s2); } .gap3 { gap: var(--s3); } .gap4 { gap: var(--s4); }
.wrap { flex-wrap: wrap; } .grow { flex: 1; } .center { justify-content: center; align-items: center; }
.full { width: 100%; }
.inline { display: inline; margin: 0; }
.nolist { list-style: none; margin: 0; padding: 0; }
.mt2 { margin-top: var(--s2); } .mt3 { margin-top: var(--s3); } .mt4 { margin-top: var(--s4); }
.mt5 { margin-top: var(--s5); } .mt6 { margin-top: var(--s6); }
.mb2 { margin-bottom: var(--s2); } .mb3 { margin-bottom: var(--s3); } .mb4 { margin-bottom: var(--s4); }
.hide-mobile { display: none; }
@media (min-width: 900px) { .hide-mobile { display: revert; } }

/* ── movimento ridotto ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ── stampa: carta bianca per ogni tema ──────────────────────────────────── */
@media print {
  body { background: var(--paper); color: var(--paper-ink); }
}