/* SVILAPP — Materia: vetro, elevazioni, luminanze cubo, motion. */
:root, [data-kit="purple"]{
  /* Vetro (biglia / pannelli glass) */
  --sv-glass-fill:rgba(249,244,249,.06);
  --sv-glass-stroke:rgba(249,244,249,.16);
  --sv-glass-blur:20px;
  --sv-glass-highlight:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 40%);
  /* Elevazioni — ombra colorata nel plum, mai nero puro */
  --sv-e1:0 1px 2px rgba(18,5,17,.5);
  --sv-e2:0 4px 12px rgba(18,5,17,.45);
  --sv-e3:0 12px 32px rgba(18,5,17,.5);
  --sv-e4:0 24px 64px rgba(18,5,17,.6);
  --sv-glow-1:0 0 24px rgba(171,95,99,.35);
  /* Cubo — 3 luminanze da un solo colore C (sorgente luce fissa: alto-sinistra) */
  --sv-shade-ink:#140812;
  --sv-shade-mix-1:32%;  /* faccia sinistra:  color-mix(in oklab, C, var(--sv-shade-ink) 32%) */
  --sv-shade-mix-2:54%;  /* faccia destra:    color-mix(in oklab, C, var(--sv-shade-ink) 54%) */
  /* Motion */
  --sv-dur-1:80ms; --sv-dur-2:140ms; --sv-dur-3:240ms; --sv-dur-4:320ms;
  --sv-ease:cubic-bezier(.2,.7,.3,1);
  --sv-ease-jump:cubic-bezier(.16,1,.3,1);
}
/* Swap dei token — LEGGERE PRIMA DI ANIMARE UN CAMBIO DI KIT O DI TEMA.
   Quando cambia una custom property, una proprietà che la legge tramite var() ED È IN
   TRANSIZIONE non atterra sul nuovo valore: la transizione parte verso il valore VECCHIO e
   l'elemento resta congelato lì per sempre (Chromium). Misurato: con .sv-btn passata da
   regata/scuro a regata/chiaro, --sv-accent-1 sull'elemento vale #252A84 mentre il fondo
   dipinto resta #7C86E8. Colpisce solo le proprietà elencate nella transition dell'elemento:
   color, non transitato su .sv-btn, si aggiorna correttamente.

   Rimedio: spegnere le transizioni MENTRE si scrive data-kit/data-theme, forzare il
   ricalcolo, riaccenderle il frame dopo. Il cambio è istantaneo — ed è il prezzo giusto:
   un'onda di colore che lascia metà interfaccia nel kit precedente non è un'animazione. */
.sv-no-transition, .sv-no-transition *{transition:none !important}

/* Onda di rifrazione — vale per i cambi di stato DENTRO un kit (apertura, hover, elevazione),
   non per lo swap dei token: là c'è .sv-no-transition. Si aggiunge .sv-kit-swapping al root
   per la durata di --sv-dur-4, poi si rimuove. Anima solo colore e materia, mai il layout. */
.sv-kit-swapping body,
.sv-kit-swapping .sv-app,
.sv-kit-swapping .sv-surface,
.sv-kit-swapping .sv-card,
.sv-kit-swapping .sv-topbar,
.sv-kit-swapping .sv-modal,
.sv-kit-swapping .sv-nav__item,
.sv-kit-swapping .sv-btn,
.sv-kit-swapping .sv-badge,
.sv-kit-swapping .sv-chip,
.sv-kit-swapping .sv-mark > i,
.sv-kit-swapping .sv-wordmark > i,
.sv-kit-swapping .sv-input,
.sv-kit-swapping .sv-select,
.sv-kit-swapping .sv-textarea{
  transition:background-color var(--sv-dur-4) var(--sv-ease),
             color var(--sv-dur-4) var(--sv-ease),
             border-color var(--sv-dur-4) var(--sv-ease),
             box-shadow var(--sv-dur-4) var(--sv-ease),
             border-radius var(--sv-dur-4) var(--sv-ease);
}
.sv-kit-swapping .sv-surface,
.sv-kit-swapping .sv-card{transition-delay:60ms}
.sv-kit-swapping .sv-btn,
.sv-kit-swapping .sv-badge,
.sv-kit-swapping .sv-chip{transition-delay:120ms}

/* Sottoalbero tematizzato ([data-kit] su un contenitore, non sul root): l'onda di rifrazione
   è definita QUI, una volta, per profondità — canvas 0 → superfici 60ms → dettagli 120ms.
   Vale SOLO durante la finestra di swap: fuori da essa i componenti conservano il proprio motion
   (hover 140ms, active 80ms, transform). Aggiungi .sv-kit-swapping al contenitore per 340ms. */
[data-kit].sv-kit-swapping:not(:root),
[data-kit].sv-kit-swapping:not(:root) *{
  transition:background-color var(--sv-dur-4) var(--sv-ease),
             color var(--sv-dur-4) var(--sv-ease),
             border-color var(--sv-dur-4) var(--sv-ease),
             box-shadow var(--sv-dur-4) var(--sv-ease),
             border-radius var(--sv-dur-4) var(--sv-ease),
             transform var(--sv-dur-1) var(--sv-ease);
}
[data-kit].sv-kit-swapping:not(:root) > *{transition-delay:60ms}
[data-kit].sv-kit-swapping:not(:root) > * *{transition-delay:120ms}
.sv-glass{
  background:var(--sv-glass-fill);
  border:1px solid var(--sv-glass-stroke);
  backdrop-filter:blur(var(--sv-glass-blur));
  -webkit-backdrop-filter:blur(var(--sv-glass-blur));
}