/* Design system · token di base (kit vuoto da fabiostaiano.it/design-system/).
   Neutri e un accento segnaposto: funzionano subito in chiaro e in scuro. Sostituisci i valori segnati DA SCEGLIERE,
   tieni i nomi. Gli stessi valori stanno in tokens.json. */

:root{
  color-scheme:light;
  /* Tema chiaro (base) */
  --paper:#F5F5F5; /* sfondo pagina */
  --wash:#EBEBEB; /* superfici: card, pannelli, dialog */
  --line:#D4D4D4; /* bordi e divisori */
  --muted:#5C5C5C; /* testo secondario (4,5:1 su paper e wash) */
  --ink:#171717; /* testo principale */
  --link:#0F766E; /* link e focus */
  --accent:#0F766E; /* DA SCEGLIERE: il tuo colore principale */
  --on-accent:#FFFFFF; /* testo sopra l’accento (4,5:1) */

  /* Font: DA SCEGLIERE (nel kit i font di sistema) */
  --f-display:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Spazi e misure */
  --max:1120px;
  --gutter:clamp(16px,4vw,56px);
  --tap:44px;           /* altezza minima di ciò che si tocca */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;

  /* Angoli: DA SCEGLIERE (0 squadrato, 8px arrotondato) */
  --r-ui:0;
  --r-pill:999px;

  /* Ombre: DA SCEGLIERE */
  --shadow-raised:none;
  --shadow-dialog:0 12px 32px rgba(0,0,0,.18);

  /* Tempi */
  --t-fast:.2s; --t-fade:.35s; --t-move:.5s;
  --ease:cubic-bezier(.2,.8,.2,1);
}

/* Tema scuro: segue il sistema, data-theme="dark" lo forza */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#121212; /* sfondo pagina */
    --wash:#1E1E1E; /* superfici: card, pannelli, dialog */
    --line:#2E2E2E; /* bordi e divisori */
    --muted:#A3A3A3; /* testo secondario (4,5:1 su paper e wash) */
    --ink:#EDEDED; /* testo principale */
    --link:#5EEAD4; /* link e focus */
    --accent:#5EEAD4; /* DA SCEGLIERE: il tuo colore principale */
    --on-accent:#121212; /* testo sopra l’accento (4,5:1) */
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#121212; /* sfondo pagina */
  --wash:#1E1E1E; /* superfici: card, pannelli, dialog */
  --line:#2E2E2E; /* bordi e divisori */
  --muted:#A3A3A3; /* testo secondario (4,5:1 su paper e wash) */
  --ink:#EDEDED; /* testo principale */
  --link:#5EEAD4; /* link e focus */
  --accent:#5EEAD4; /* DA SCEGLIERE: il tuo colore principale */
  --on-accent:#121212; /* testo sopra l’accento (4,5:1) */
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}