/* ============================================================
   Tricotta — Design Tokens (semantici)
   ------------------------------------------------------------
   Mappa i RUOLI (bg, ink, primary, …) sui primitivi dello spazio
   colori (palette.css). Non contiene hex letterali: cambi i colori
   in palette.css, i font in type.css, le misure qui.

   Ordine di caricamento: palette.css → type.css → tokens.css →
   components.css.
   ============================================================ */

:root {
  color-scheme: light;   /* default = tema chiaro; il media query sotto lo porta a dark quando l'OS lo chiede.
                             NB: NON usare "light dark" qui, o i controlli nativi (spinner number, lista
                             <select>) seguono l'OS anche quando i token restano chiari → sfondo nero. */

  /* ---- colore semantico · TEMA CHIARO ---- */
  --bg:        var(--c-ice);
  --surface:   var(--c-white);
  --surface-2: var(--c-mist);
  --inset:     var(--c-fog);
  --border:    var(--c-line);
  --border-2:  var(--c-line-2);
  --ink:       var(--c-ink);
  --ink-2:     var(--c-slate);
  --ink-3:     var(--c-mute);

  --on-primary: var(--c-white);
  --primary:    var(--c-alpi);

  --mint:   var(--c-mint);
  --warn:   var(--c-amber);
  --danger: var(--c-red);
  --grid:   var(--c-grid);
  --grid-2: var(--c-grid-2);

  /* ---- derivati (ricalcolati da soli quando cambia --primary) ---- */
  --primary-deep: color-mix(in srgb, var(--primary) 74%, #000);
  --primary-ink:  color-mix(in srgb, var(--primary) 72%, #000);
  --primary-soft: color-mix(in srgb, var(--primary) 13%, var(--surface));
  --primary-line: color-mix(in srgb, var(--primary) 30%, var(--surface));
  --ring:         color-mix(in srgb, var(--primary) 42%, transparent);
  --mint-soft:    color-mix(in srgb, var(--mint) 15%, var(--surface));
  --warn-soft:    color-mix(in srgb, var(--c-amber-tint) 16%, var(--surface));
  --danger-soft:  color-mix(in srgb, var(--danger) 12%, var(--surface));
  --scrim:        var(--c-scrim);

  /* ---- elevazione ---- */
  --sh-1: 0 1px 2px rgba(16,32,26,.05);
  --sh-2: 0 1px 2px rgba(16,32,26,.05), 0 8px 20px -10px rgba(16,32,26,.16);
  --sh-3: 0 2px 6px rgba(16,32,26,.06), 0 22px 46px -18px rgba(16,32,26,.26);

  /* ---- raggi ---- */
  --r-xs:5px; --r-sm:7px; --r:10px; --r-lg:14px; --r-xl:20px; --r-pill:100px;

  /* ---- spazio (base 4) ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;

  /* ---- scala tipografica (famiglie in type.css) — FONTE UNICA del sizing ----
     Ribasata sul Figma: base = 16px (--s-0:1rem). I gradini assorbono le ancore
     Figma già usate in home (body 16, lede/bottoni 18=--s-1, hero 30=--s-3), così
     ogni pagina eredita gli stessi valori senza override px per-elemento. I titoli
     grandi (s-3/4/5) erano già Figma-corretti e restano invariati. In px @16:
       s--2 12 · s--1 14 · s-0 16 · s-1 18 · s-2 22 · s-3 30 · s-4 43 · s-5 56 */
  --s--2:.75rem; --s--1:.875rem; --s-0:1rem; --s-1:1.125rem; --s-2:1.375rem; --s-3:1.875rem; --s-4:2.7rem; --s-5:3.5rem;

  /* ---- z-index ---- */
  --z-nav:40; --z-menu:30; --z-overlay:60; --z-pop: 90;   /* menu/popover sopra tutto (sonda 30 ago) */
  --z-toast:80;

  /* ---- breakpoint (postura, non pixel — vedi docs/03-5-responsive-e-dispositivi.md) ----
     palmo ≤640 (telefono·esecuzione) · banco 641–1023 (tablet) · scrivania ≥1024 (PC).
     Nota: le @media usano i LITERAL qui sotto; questi token servono a JS/Tailwind
     (screens in tailwind.tokens.js) come unica fonte dei valori. */
  --bp-banco:641px; --bp-scrivania:1024px;

  /* ---- target touch (WCAG 2.2) ---- */
  --tap-min:24px;   /* §2.5.8 minimo, ovunque */
  --tap-exec:44px;  /* §2.5.5 enhanced, in esecuzione a bordo macchina */
}

/* ============ TEMA SCURO ============
   Solo i ruoli di colore cambiano rung; misure e derivati restano. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;   /* segui-OS: token dark + controlli nativi dark, coerenti */
    --bg:var(--c-night); --surface:var(--c-night-2); --surface-2:var(--c-night-3); --inset:var(--c-night-4);
    --border:var(--c-nline); --border-2:var(--c-nline-2);
    --ink:var(--c-cloud); --ink-2:var(--c-cloud-2); --ink-3:var(--c-cloud-3);
    --on-primary:var(--c-night); --primary:var(--c-alpi-night);
    --primary-ink: color-mix(in srgb, var(--primary) 50%, #fff);
    --mint:var(--c-mint-night); --warn:var(--c-amber-night); --danger:var(--c-red-night);
    --grid:var(--c-grid-night); --grid-2:var(--c-grid-2-night);
    --sh-1: 0 1px 2px rgba(0,0,0,.4);
    --sh-2: 0 1px 2px rgba(0,0,0,.4), 0 10px 24px -12px rgba(0,0,0,.6);
    --sh-3: 0 2px 6px rgba(0,0,0,.5), 0 26px 50px -18px rgba(0,0,0,.7);
  }
}
:root[data-theme="light"] {
  color-scheme: only light;   /* i controlli nativi seguono il tema, non l'OS; «only»: neanche il browser che scurisce i siti da sé (Chrome su Android) lo ricolora */
  --bg:var(--c-ice); --surface:var(--c-white); --surface-2:var(--c-mist); --inset:var(--c-fog);
  --border:var(--c-line); --border-2:var(--c-line-2); --ink:var(--c-ink); --ink-2:var(--c-slate); --ink-3:var(--c-mute);
  --on-primary:var(--c-white); --primary:var(--c-alpi);
  --primary-ink: color-mix(in srgb, var(--primary) 72%, #000);
  --mint:var(--c-mint); --warn:var(--c-amber); --danger:var(--c-red); --grid:var(--c-grid); --grid-2:var(--c-grid-2);
  --sh-1: 0 1px 2px rgba(16,32,26,.05);
  --sh-2: 0 1px 2px rgba(16,32,26,.05), 0 8px 20px -10px rgba(16,32,26,.16);
  --sh-3: 0 2px 6px rgba(16,32,26,.06), 0 22px 46px -18px rgba(16,32,26,.26);
}
:root[data-theme="dark"] {
  color-scheme: dark;    /* idem: lista <select> e spinner in dark coerenti col tema */
  --bg:var(--c-night); --surface:var(--c-night-2); --surface-2:var(--c-night-3); --inset:var(--c-night-4);
  --border:var(--c-nline); --border-2:var(--c-nline-2); --ink:var(--c-cloud); --ink-2:var(--c-cloud-2); --ink-3:var(--c-cloud-3);
  --on-primary:var(--c-night); --primary:var(--c-alpi-night);
  --primary-ink: color-mix(in srgb, var(--primary) 50%, #fff);
  --mint:var(--c-mint-night); --warn:var(--c-amber-night); --danger:var(--c-red-night); --grid:var(--c-grid-night); --grid-2:var(--c-grid-2-night);
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 1px 2px rgba(0,0,0,.4), 0 10px 24px -12px rgba(0,0,0,.6);
  --sh-3: 0 2px 6px rgba(0,0,0,.5), 0 26px 50px -18px rgba(0,0,0,.7);
}