/* ============================================================================
   PONTE — theme.json → nomi --vsa-* del prototipo
   ============================================================================
   Il CSS in app.css è portato riga per riga dal prototipo React
   (vsa26-prototype/src/styles + src/components/*.css) e usa solo variabili
   --vsa-*. Non lo si riscrive: si mappano i suoi nomi sui custom property che
   WordPress genera da theme.json (--wp--preset--*), così theme.json resta
   l'UNICA sorgente di verità per colore, tipografia e spaziatura.

   Quello che theme.json non modella — regole, raggio, durate, rapporti
   d'aspetto — resta qui come valore letterale, identico a tokens.css.
   ========================================================================== */

:root {
  /* --- Famiglie ------------------------------------------------- */
  --vsa-font-display: var(--wp--preset--font-family--display);
  --vsa-font-body:    var(--wp--preset--font-family--body);
  --vsa-font-serif:   var(--wp--preset--font-family--serif);
  --vsa-font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  /* --- Colore ------------------------------------------------------
     Stessi 9 slug della palette di theme.json — vedi §11 del piano per
     accent-hi, tenuto deliberatamente fuori da .vsa-invert qui sotto. */
  --vsa-ink:         var(--wp--preset--color--ink);
  --vsa-ink-muted:   var(--wp--preset--color--ink-muted);
  --vsa-ink-faint:   var(--wp--preset--color--ink-faint);
  --vsa-paper:       var(--wp--preset--color--paper);
  --vsa-paper-alt:   var(--wp--preset--color--paper-alt);
  --vsa-void:        var(--wp--preset--color--void);
  --vsa-accent:      var(--wp--preset--color--accent);
  --vsa-accent-ink:  var(--wp--preset--color--accent-ink);
  --vsa-accent-hi:   var(--wp--preset--color--accent-hi);

  --vsa-rule:        color-mix(in oklab, var(--vsa-ink) 16%, transparent);
  --vsa-rule-strong: color-mix(in oklab, var(--vsa-ink) 38%, transparent);

  /* --- Scala tipografica ------------------------------------------ */
  --vsa-fs-display: var(--wp--preset--font-size--display);
  --vsa-fs-xxl:     var(--wp--preset--font-size--xxl);
  --vsa-fs-xl:      var(--wp--preset--font-size--xl);
  --vsa-fs-lg:      var(--wp--preset--font-size--lg);
  --vsa-fs-md:      var(--wp--preset--font-size--md);
  --vsa-fs-base:    var(--wp--preset--font-size--base);
  --vsa-fs-sm:      var(--wp--preset--font-size--sm);
  --vsa-fs-xs:      var(--wp--preset--font-size--xs);
  --vsa-fs-micro:   var(--wp--preset--font-size--micro);

  /* --- Interlinea e tracking — non modellati da theme.json --------- */
  --vsa-lh-tight:   0.98;
  --vsa-lh-snug:    1.12;
  --vsa-lh-normal:  1.5;
  --vsa-lh-relaxed: 1.65;
  --vsa-tracking-display: -0.03em;
  --vsa-tracking-tight:   -0.015em;
  --vsa-tracking-wide:     0.14em;

  /* --- Spaziatura --------------------------------------------------- */
  --vsa-space-3xs: var(--wp--preset--spacing--10);
  --vsa-space-2xs: var(--wp--preset--spacing--20);
  --vsa-space-xs:  var(--wp--preset--spacing--30);
  --vsa-space-sm:  var(--wp--preset--spacing--40);
  --vsa-space-md:  var(--wp--preset--spacing--50);
  --vsa-space-lg:  var(--wp--preset--spacing--60);
  --vsa-space-xl:  var(--wp--preset--spacing--70);
  --vsa-space-2xl: var(--wp--preset--spacing--80);

  /* --- Layout — da settings.layout ----------------------------------- */
  --vsa-content: 68ch;
  --vsa-wide:    1360px;
  --vsa-gutter:  clamp(1.25rem, 0.6rem + 2.6vw, 3.5rem);

  /* --- Altro, non modellato da theme.json ----------------------------- */
  --vsa-radius: 0px;
  --vsa-border: 1px solid var(--vsa-rule);
  --vsa-ease:   cubic-bezier(0.2, 0.6, 0.2, 1);
  --vsa-dur:    380ms;
  --vsa-ratio-landscape: 3 / 2;
  --vsa-ratio-portrait:  4 / 5;
  --vsa-ratio-wide:      16 / 9;
  --vsa-ratio-cinema:    21 / 9;
}

/* Ridefinizione dei ruoli su fondo scuro — identica a tokens.css.
   accent-hi non compare qui apposta: un pieno d'accento resta invariato
   su chiaro e su scuro (§11). */
.vsa-invert,
.vsa-on-dark {
  --vsa-ink: #F6F3EE;
  --vsa-ink-muted: #A8A096;
  --vsa-ink-faint: #948C7F;
  --vsa-paper: var(--vsa-void);
  --vsa-paper-alt: #171512;
  --vsa-accent-ink: #FF6A50;
  --vsa-rule: color-mix(in oklab, #F6F3EE 20%, transparent);
  --vsa-rule-strong: color-mix(in oklab, #F6F3EE 45%, transparent);
  color: var(--vsa-ink);
}
.vsa-invert { background: var(--vsa-paper); }

@media (prefers-reduced-motion: reduce) {
  :root { --vsa-dur: 1ms; }
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}