/* ============================================================================
   tokens.css: unica sorgente dei valori di cueBase (Poster).
   Specchia .interface-design/system.md: se cambia un valore qui, cambia là e si
   rimisurano i contrasti (scripts/contrast-check.mjs).

   Struttura dei colori (sei set: tre accenti per due temi):
   - :root                        Fluo scuro (default)
   - media light + :root:not(dark) Fluo chiaro, tema automatico
   - [data-theme="light"]          Fluo chiaro, tema forzato
   - [data-accent="…"]             set scuro dell'accento
   - media light + :root[data-accent]:not(dark)  e  [data-accent][data-theme="light"]
                                   set chiaro dell'accento
   Il palco (layout blank) ha sempre data-theme="dark".
   Fuori da questo file nessun colore letterale (vedi StyleGuardTest).
   ============================================================================ */

/* ── colori: Fluo ─────────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;
  --stage: #150a10; --amp: #1f1119; --amp-2: #2a1823; --cable: #3f2735;
  --ink: #fbeff5; --ink-soft: #c4a9b7;
  --cue: #ff5ca8; --cue-ink: #1a0610;
  --ok: #6fd49a; --warn: #f2c04e; --danger: #ff6b81;
  --shade: rgb(10 3 7 / .55);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --stage: #fbf6f8; --amp: #ffffff; --amp-2: #f3e8ee; --cable: #e4d1db;
    --ink: #1e0f17; --ink-soft: #6a5160;
    --cue: #c0166a; --cue-ink: #ffffff;
    --ok: #1f7a45; --warn: #8f5a00; --danger: #b8203f;
    --shade: rgb(30 15 23 / .16);
  }
}
[data-theme="light"] {
  color-scheme: light;
  --stage: #fbf6f8; --amp: #ffffff; --amp-2: #f3e8ee; --cable: #e4d1db;
  --ink: #1e0f17; --ink-soft: #6a5160;
  --cue: #c0166a; --cue-ink: #ffffff;
  --ok: #1f7a45; --warn: #8f5a00; --danger: #b8203f;
  --shade: rgb(30 15 23 / .16);
}

/* ── colori: Ambra ────────────────────────────────────────────────────────── */
[data-accent="ambra"] {
  --stage: #15110a; --amp: #1f1a11; --amp-2: #2a2318; --cable: #3d3324;
  --ink: #f6efe2; --ink-soft: #b9ad97;
  --cue: #f4ae3a; --cue-ink: #1a1105;
  --ok: #7fcf8e; --warn: #ff9a5c; --danger: #ff7f78;
  --shade: rgb(9 7 3 / .55);
}
@media (prefers-color-scheme: light) {
  :root[data-accent="ambra"]:not([data-theme="dark"]) {
    --stage: #f3f3f0; --amp: #ffffff; --amp-2: #ebe8e1; --cable: #d8d3c8;
    --ink: #1c170f; --ink-soft: #5c5447;
    --cue: #975800; --cue-ink: #ffffff;
    --ok: #2a7a3c; --warn: #a34a00; --danger: #b3261e;
    --shade: rgb(28 23 15 / .16);
  }
}
[data-accent="ambra"][data-theme="light"] {
  --stage: #f3f3f0; --amp: #ffffff; --amp-2: #ebe8e1; --cable: #d8d3c8;
  --ink: #1c170f; --ink-soft: #5c5447;
  --cue: #975800; --cue-ink: #ffffff;
  --ok: #2a7a3c; --warn: #a34a00; --danger: #b3261e;
  --shade: rgb(28 23 15 / .16);
}

/* ── colori: Cobalto ──────────────────────────────────────────────────────── */
[data-accent="cobalto"] {
  --stage: #0a0d17; --amp: #121626; --amp-2: #1a2033; --cable: #2b3350;
  --ink: #eef1fa; --ink-soft: #a3abc4;
  --cue: #7c9bff; --cue-ink: #070b1c;
  --ok: #6fd3a0; --warn: #f2be57; --danger: #ff8677;
  --shade: rgb(3 5 11 / .55);
}
@media (prefers-color-scheme: light) {
  :root[data-accent="cobalto"]:not([data-theme="dark"]) {
    --stage: #f3f5fa; --amp: #ffffff; --amp-2: #e6eaf4; --cable: #cfd6e7;
    --ink: #0e1324; --ink-soft: #4e5772;
    --cue: #2c47d4; --cue-ink: #ffffff;
    --ok: #1e7a48; --warn: #8c5a00; --danger: #b42318;
    --shade: rgb(14 19 36 / .16);
  }
}
[data-accent="cobalto"][data-theme="light"] {
  --stage: #f3f5fa; --amp: #ffffff; --amp-2: #e6eaf4; --cable: #cfd6e7;
  --ink: #0e1324; --ink-soft: #4e5772;
  --cue: #2c47d4; --cue-ink: #ffffff;
  --ok: #1e7a48; --warn: #8c5a00; --danger: #b42318;
  --shade: rgb(14 19 36 / .16);
}

/* ── tutto il resto: uguale in ogni set ───────────────────────────────────── */
:root {
  /* stack di sistema, niente webfont: solo accordi in testo semplice, allineati con gli spazi */
  --fm: ui-monospace, Menlo, Consolas, monospace;
  /* carta: solo @media print, uguale per ogni accento e tema */
  --paper: #ffffff; --paper-ink: #000000; --paper-soft: #444444;
  --paper-line: #bbbbbb; --paper-2: #f0f0f0;

  /* tipografia */
  --fh: 'Archivo', system-ui, sans-serif;
  --fb: 'Hanken Grotesk', system-ui, sans-serif;
  --fh-weight: 850; --fh-stretch: 72%; --fh-leading: 1.05;
  --fs-0: 16px; --fs-1: 18px; --fs-2: 22px; --fs-3: 28px; --fs-4: 40px; --fs-5: 56px;

  /* spaziatura: base 4px, solo questi passi */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* raggio unico; l'avatar è l'unico tondo */
  --r: 6px;

  /* ombra solo per menu e fogli sopra la pagina */
  --lift: 0 12px 32px var(--shade);

  /* movimento: solo transform e opacity */
  --dur: 200ms; --dur-fast: 150ms; --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* bersagli e layout */
  --hit: 44px; --hit-stage: 56px;
  --side-w: 232px; --top-h: 72px; --bottomnav-h: 64px; --maxw: 1320px;
}