/* =====================================================================
   WARM LEDGER — Base
   Reset minimo, contesti di superficie, tipografia, link, focus,
   bottoni, reveal. Solo var(--…): nessun valore letterale.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: calc(var(--nav-height-current) + var(--spacing-md)); }

/* ---------- Contesti di superficie ----------
   I componenti leggono i colori dal contesto (--c-*), così lo stesso
   markup funziona su Carta, Avorio, Sabbia e Verde Inchiostro. */
:root, .surface-paper, .surface-ivory, .surface-sand {
  --c-bg:            var(--color-bg-page);
  --c-text:          var(--color-text);
  --c-heading:       var(--color-heading);
  --c-text-2:        var(--color-text-secondary);
  --c-muted:         var(--color-text-muted);
  --c-link:          var(--color-link);
  --c-link-hover:    var(--color-link-hover);
  --c-accent-text:   var(--color-accent-text);
  --c-accent-deco:   var(--color-accent);
  --c-border:        var(--color-border);
  --c-border-strong: var(--color-border-strong);
  --c-btn-bg:        var(--color-btn-primary-bg);
  --c-btn-bg-hover:  var(--color-btn-primary-bg-hover);
  --c-btn-text:      var(--color-btn-primary-text);
  --c-outline:       var(--color-primary);
  --c-outline-text-hover: var(--color-text-on-dark);
  --c-row-hover:     var(--color-row-hover);
  --c-ledger-line:   var(--color-ledger-line);
}
.surface-ivory { --c-bg: var(--color-bg-raised); }
.surface-sand  {
  --c-bg: var(--color-bg-section-alt);
  --c-accent-deco: var(--color-accent-text);
}
.on-dark, .surface-dark, .surface-footer, .closing {
  --c-bg:            var(--color-bg-section-dark);
  --c-text:          var(--color-on-dark);
  --c-heading:       var(--color-on-dark);
  --c-text-2:        var(--color-on-dark-muted);
  --c-muted:         var(--color-on-dark-muted);
  --c-link:          var(--color-link-on-dark);
  --c-link-hover:    var(--color-link-on-dark-hover);
  --c-accent-text:   var(--color-accent-on-dark);
  --c-accent-deco:   var(--color-accent-on-dark);
  --c-border:        var(--color-border-on-dark);
  --c-border-strong: var(--color-border-on-dark);
  --c-btn-bg:        var(--color-btn-on-dark-bg);
  --c-btn-bg-hover:  var(--color-btn-on-dark-bg-hover);
  --c-btn-text:      var(--color-btn-on-dark-text);
  --c-outline:       var(--color-on-dark);
  --c-outline-text-hover: var(--color-primary);
  --c-row-hover:     var(--color-border-on-dark);
  --c-ledger-line:   var(--color-border-on-dark);
}
.surface-footer { --c-bg: var(--color-bg-footer); }
.surface-paper, .surface-ivory, .surface-sand, .surface-dark, .surface-footer {
  background-color: var(--c-bg);
  color: var(--c-text);
}

/* ---------- Body ---------- */
body {
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--weight-regular);
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  hyphens: manual;
}

/* ---------- Titoli ---------- */
h1, h2, h3, .display, .h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  color: var(--c-heading);
  text-wrap: balance;
  hyphens: manual;
}
.display { font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); font-weight: var(--weight-light); }
h1, .h1 { font-size: var(--text-h1); line-height: var(--leading-h1); letter-spacing: var(--tracking-h1); }
h2, .h2 { font-size: var(--text-h2); line-height: var(--leading-h2); letter-spacing: var(--tracking-h2); }
h3, .h3 { font-size: var(--text-h3); line-height: var(--leading-h3); letter-spacing: var(--tracking-h3); }
h4, .h4 {
  font-family: var(--font-body); font-size: var(--text-h4); line-height: var(--leading-h4);
  letter-spacing: var(--tracking-h4); font-weight: var(--weight-semibold); color: var(--c-heading);
}

/* ---------- Testo ---------- */
p { max-width: var(--text-measure); text-wrap: pretty; }
.body-lg { font-size: var(--text-body-lg); line-height: var(--leading-body-lg); color: var(--c-text-2); }
.body-sm { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); letter-spacing: var(--tracking-button); }
.caption { font-size: var(--text-caption); line-height: var(--leading-caption); letter-spacing: var(--tracking-button); color: var(--c-muted); }
.text-secondary { color: var(--c-text-2); }
.text-muted { color: var(--c-muted); }
.measure { max-width: var(--text-measure); }
strong, b { font-weight: var(--weight-semibold); }

/* Accento: una sola parola in Newsreader italic */
em.accent {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--c-accent-text);
}

/* Eyebrow / Label: unico uso del maiuscolo (≤ 3 parole) */
.eyebrow, .label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-label);
  line-height: var(--leading-h4);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--c-accent-text);
}
.label { color: var(--c-text-2); }

/* Numeri */
.stat {
  font-family: var(--font-numbers);
  font-size: var(--text-stat);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-h2);
  font-weight: var(--weight-regular);
  font-variant-numeric: lining-nums tabular-nums;
}
.nums { font-variant-numeric: lining-nums tabular-nums; }

/* ---------- Link nel testo ---------- */
a { color: inherit; }
.prose a, a.text-link {
  color: var(--c-link);
  text-decoration-line: underline;
  text-decoration-thickness: var(--border-width);
  text-underline-offset: var(--underline-offset);
  transition: color var(--duration-fast) var(--ease-out),
              text-decoration-thickness var(--duration-fast) var(--ease-out);
}
.prose a:hover, a.text-link:hover, a.text-link.is-hover {
  color: var(--c-link-hover);
  text-decoration-thickness: var(--border-width-hover);
}

/* ---------- Focus ----------
   .is-hover / .is-focus / .is-active = stati forzati, SOLO per gli specimen. */
:focus { outline: none; }
:focus-visible, .is-focus { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.on-dark :focus-visible, .surface-dark :focus-visible, .surface-footer :focus-visible, .closing :focus-visible,
.on-dark .is-focus, .surface-dark .is-focus, .surface-footer .is-focus, .closing .is-focus { outline-color: var(--color-accent-on-dark); }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; left: var(--spacing-sm); top: var(--spacing-sm);
  transform: translateY(calc(-100% - var(--spacing-xl)));
  background: var(--color-primary); color: var(--color-on-dark);
  padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-button);
  z-index: var(--z-menu); text-decoration: none;
}
.skip-link:focus-visible { transform: none; }

.visually-hidden {
  position: absolute !important; width: var(--border-width); height: var(--border-width);
  margin: calc(var(--border-width) * -1); padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- Icone: colore ereditato, tratto 1.5 px ---------- */
.icon {
  width: var(--size-icon); height: var(--size-icon); flex: none;
  fill: none; stroke: currentColor; stroke-width: var(--stroke-icon);
  stroke-linecap: round; stroke-linejoin: round;
}
.icon--sm { width: var(--size-icon-sm); height: var(--size-icon-sm); }
.icon--xs { width: var(--size-icon-xs); height: var(--size-icon-xs); }
.icon--lg { width: var(--size-icon-lg); height: var(--size-icon-lg); }

/* =====================================================================
   BUTTON — in base perché componente fondamentale cross-cutting
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-2xs);
  min-height: var(--size-btn); padding: 0 var(--btn-padding-x);
  border: var(--border-width) solid transparent; border-radius: var(--radius-button);
  font: var(--weight-semibold) var(--text-button) / var(--leading-tight) var(--font-body);
  letter-spacing: var(--tracking-button);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: var(--shadow-button);
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.btn .icon { transition: transform var(--duration-fast) var(--ease-out); }
.btn:hover .icon--arrow, .btn.is-hover .icon--arrow { transform: translateX(var(--shift-arrow)); }
.btn:active, .btn.is-active { transform: translateY(var(--press-offset)); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: var(--opacity-disabled); cursor: not-allowed; transform: none; }
.btn:disabled .icon, .btn[aria-disabled="true"] .icon { transform: none; }

.btn--primary { background: var(--c-btn-bg); color: var(--c-btn-text); }
.btn--primary:not(:disabled):not([aria-disabled="true"]):hover, .btn--primary.is-hover { background: var(--c-btn-bg-hover); }

.btn--secondary { background: transparent; color: var(--c-outline); border-color: var(--c-outline); }
.btn--secondary:not(:disabled):not([aria-disabled="true"]):hover, .btn--secondary.is-hover { background: var(--c-outline); color: var(--c-outline-text-hover); }

.btn--ghost {
  min-height: var(--size-btn-sm); padding: 0; border-radius: var(--radius-ghost);
  background: transparent; color: var(--c-heading);
}
.btn--ghost:not(:disabled):hover, .btn--ghost.is-hover { color: var(--c-link); }

.btn--sm { min-height: var(--size-btn-sm); padding: 0 var(--spacing-md); }
.btn--block { display: flex; width: 100%; }

/* =====================================================================
   REVEAL — [data-reveal] + stagger con --i
   Lo stato nascosto si applica solo quando il JS è attivo (.js), così la
   pagina è leggibile anche senza script.
   ===================================================================== */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger-step));
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }