/* SVILAPP Brand Kit 5.4.0 — token del design system.
 *
 * NON MODIFICARE A MANO: rigenerato da tools/vendor-brandkit.py a partire dal
 * pacchetto ufficiale. Concatenazione di
 * tokens/{colors,typography,spacing,effects,kits,carta}.css, con due sole differenze,
 * entrambe imposte da come il pannello serve i propri file:
 *
 *  1. gli @import sono risolti in un file unico — l'app serve gli asset da una
 *     cartella piatta, senza sottocartelle, quindi `@import "./tokens/..."`
 *     non avrebbe un percorso da seguire;
 *  2. i font non arrivano da fonts.googleapis.com ma da qui accanto: la pagina
 *     gira sotto `default-src 'self'` e un @import verso Google verrebbe
 *     bloccato dal browser. I .woff2 sono gli stessi file che servirebbe
 *     Google, copiati nella repo — così il pannello non chiama nessuno.
 *
 * L'ordine è quello prescritto da styles.css: kits.css DOPO i semantici,
 * perché è lui a rimappare i token del kit attivo, e carta.css dopo kits.
 * La versione è anche un token, --sv-kit-version, in fondo al file.
 */

/* ==== tokens/colors.css ==== */
/* SVILAPP — Token cromatici, livello 1: PRIMITIVI.
   Estratti dagli asset ufficiali del marchio. Immutabili: nessun kit li ridichiara.

   I SEMANTICI (--sv-bg-*, --sv-text-*, --sv-accent-*, …) non stanno più qui.
   Da quando ogni kit esiste in tema chiaro e scuro, dichiararli in due posti significava
   due verità: ora vivono in un punto solo, tokens/kits.css, prodotti da una mappatura
   unica a partire dalle àncore --k-* di ciascuna palette. Purple compreso — è un kit come
   gli altri, e il suo tema nativo è lo scuro.

   Questi primitivi restano perché sono la MATERIA: i valori misurati sul marchio, da cui
   le palette attingono e a cui tokens/carta.css si riaggancia per gli accenti di stampa. */
:root{
  /* Plum — il "vuoto" del brand (canvas del kit Purple in tema scuro) */
  --sv-plum-900:#1A0B1B; --sv-plum-800:#230F24; --sv-plum-700:#2A1428; --sv-plum-600:#341A36;
  --sv-plum-500:#3F2242; --sv-plum-400:#553057;
  /* Rosa antico — accento primario (dal profilo della scritta e dalla palette interna del marchio) */
  --sv-rosa-300:#C58F92; --sv-rosa-400:#B77478; --sv-rosa-500:#AB5F63; --sv-rosa-600:#8F4C50; --sv-rosa-700:#6E3A3D;
  /* Ottanio — accento secondario (palette interna del marchio) */
  --sv-ottanio-300:#9DB5BB; --sv-ottanio-400:#86A2A9; --sv-ottanio-500:#6F8C93; --sv-ottanio-600:#5A757C; --sv-ottanio-700:#465D63;
  /* Neutri interni */
  --sv-grigio-500:#535253; --sv-bianco:#F9F9F9; --sv-bianco-vero:#FFFFFF;
  /* Feedback — armonizzati in oklch con plum e rosa. Sono le SORGENTI di tinta:
     ogni palette ne dichiara la propria versione tarata sulla luce del tema. */
  --sv-verde-ok:#55A375; --sv-ambra-warn:#D99A4E; --sv-rosso-err:#D9707A; --sv-blu-info:#5E8FBF;
}

/* ==== tokens/typography.css ==== */
/* SVILAPP — Tipografia. Michroma = display brand (eco della scritta squadrata);
   Saira = UI workhorse; Space Mono = codice/etichette (eco della tagline monospazio). */
@font-face {
 font-family: 'Michroma';
 font-style: normal;
 font-weight: 400;
 font-display: swap;
 src: url(font-michroma-400-latinext.woff2) format('woff2');
 unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
 font-family: 'Michroma';
 font-style: normal;
 font-weight: 400;
 font-display: swap;
 src: url(font-michroma-400-latin.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
 font-family: 'Saira';
 font-style: normal;
 font-weight: 400;
 font-stretch: 100%;
 font-display: swap;
 src: url(font-saira-var-latinext.woff2) format('woff2');
 unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
 font-family: 'Saira';
 font-style: normal;
 font-weight: 400;
 font-stretch: 100%;
 font-display: swap;
 src: url(font-saira-var-latin.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
 font-family: 'Saira';
 font-style: normal;
 font-weight: 500;
 font-stretch: 100%;
 font-display: swap;
 src: url(font-saira-var-latinext.woff2) format('woff2');
 unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
 font-family: 'Saira';
 font-style: normal;
 font-weight: 500;
 font-stretch: 100%;
 font-display: swap;
 src: url(font-saira-var-latin.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
 font-family: 'Saira';
 font-style: normal;
 font-weight: 600;
 font-stretch: 100%;
 font-display: swap;
 src: url(font-saira-var-latinext.woff2) format('woff2');
 unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
 font-family: 'Saira';
 font-style: normal;
 font-weight: 600;
 font-stretch: 100%;
 font-display: swap;
 src: url(font-saira-var-latin.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
 font-family: 'Space Mono';
 font-style: normal;
 font-weight: 400;
 font-display: swap;
 src: url(font-spacemono-400-latinext.woff2) format('woff2');
 unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
 font-family: 'Space Mono';
 font-style: normal;
 font-weight: 400;
 font-display: swap;
 src: url(font-spacemono-400-latin.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
 font-family: 'Space Mono';
 font-style: normal;
 font-weight: 700;
 font-display: swap;
 src: url(font-spacemono-700-latinext.woff2) format('woff2');
 unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
 font-family: 'Space Mono';
 font-style: normal;
 font-weight: 700;
 font-display: swap;
 src: url(font-spacemono-700-latin.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{
  --sv-font-display:'Michroma', 'Saira', sans-serif;
  --sv-font-ui:'Saira', system-ui, sans-serif;
  --sv-font-mono:'Space Mono', ui-monospace, monospace;
  /* Scala — coppie size/line-height (line-height multipli di 4) */
  --sv-t-d1:52px;  --sv-t-d1-lh:60px;  /* Display 1 — Michroma, ls .02em */
  --sv-t-d2:36px;  --sv-t-d2-lh:44px;  /* Display 2 — Michroma */
  --sv-t-h1:28px;  --sv-t-h1-lh:36px;  /* Saira 600 */
  --sv-t-h2:22px;  --sv-t-h2-lh:30px;
  --sv-t-h3:18px;  --sv-t-h3-lh:26px;
  --sv-t-bl:17px;  --sv-t-bl-lh:28px;  /* Body large */
  --sv-t-b:15px;   --sv-t-b-lh:24px;   /* Body — default UI */
  --sv-t-bs:13px;  --sv-t-bs-lh:20px;
  --sv-t-cap:12px; --sv-t-cap-lh:16px;
  --sv-t-ov:11px;  --sv-t-ov-lh:16px;  /* Overline — Space Mono 700, +12%, MAIUSCOLO */
  --sv-t-code:13px;--sv-t-code-lh:20px;
}

/* ==== tokens/spacing.css ==== */
/* SVILAPP — Spazio, raggi, griglia. Base 4px; griglia visiva 8px. INVARIANTI tra kit. */
:root{
  --sv-s1:4px; --sv-s2:8px; --sv-s3:12px; --sv-s4:16px; --sv-s5:24px;
  --sv-s6:32px; --sv-s7:48px; --sv-s8:64px; --sv-s9:96px;
  /* Raggi — variabili per kit entro il range 0–20px (contratto polimorfico) */
  --sv-r1:4px; --sv-r2:8px; --sv-r3:12px; --sv-r4:20px; --sv-r-full:999px;
  /* Griglia */
  --sv-grid-cols:12; --sv-grid-gutter:24px; --sv-grid-margin:64px; --sv-container:1240px;
  /* Piani volumetrici (z) */
  --sv-z-base:0; --sv-z-raised:10; --sv-z-sticky:100; --sv-z-overlay:900; --sv-z-modal:1000;
  --sv-hit-min:44px;
}

/* ==== tokens/effects.css ==== */
/* 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));
}

/* ==== tokens/kits.css ==== */
/* SVILAPP — Kit e temi. Importato per ULTIMO tra i token semantici.

   QUATTRO LIVELLI.
   1. IDENTITÀ   [data-kit="x"] — ciò che non dipende dalla luce: raggi, forma delle ombre,
      sfocatura del vetro, --sv-shade-ink (l'inchiostro di stampa: la carta è bianca anche
      di notte, quindi NON cambia col tema).
   2. PALETTE    nello stesso blocco: ventuno àncore per polarità, --kl-* (chiaro) e --kd-*
      (scuro). Ogni valore esiste UNA volta sola nel file.
   3. LUCE       data-theme ha TRE valori, e sono esattamente le tre voci di un selettore:
        · data-theme="light"   → chiara
        · data-theme="dark"    → scura
        · data-theme="auto"    → quella del dispositivo (prefers-color-scheme), in puro CSS

      NON esiste un quarto valore. L'ASSENZA dell'attributo non è un'opzione da offrire:
      è la rete di sicurezza che dipinge la pagina prima che l'applicazione scriva
      data-theme, e vale la luce con cui il kit è NATO (Purple e Rame scuri; Pop, Smeraldo e Pastelli chiari). Quella nativa è un'INFORMAZIONE sul kit — dice se il kit è nato
      scuro e la versione chiara è un adattamento, o viceversa — ed è il valore con cui
      si inizializza il selettore, non una sua voce. Leggila da --sv-luce-nativa invece
      di riscrivere la tabella:
        const nativa = getComputedStyle(root).getPropertyValue('--sv-luce-nativa').trim();

      Le àncore sono custom property e SI EREDITANO: data-theme da solo su una sottosezione
      funziona (prende il kit dall'antenato). data-kit + data-theme insieme va sempre bene.
   4. MAPPATURA  in fondo: una regola sola traduce le --k-* nei semantici --sv-*. Le
      derivazioni non dicono «schiarisci» ma «vai verso l'inchiostro»: la stessa formula
      scurisce su tema chiaro e schiarisce su tema scuro. Nessuna tabella di polarità.

   Per uno swap via JS: spegnere le transizioni mentre si scrivono gli attributi
   (.sv-no-transition, vedi tokens/effects.css) o i componenti restano congelati sul
   colore vecchio. */

/* ═══ PURPLE — identità + palette (nativo: scuro). Bicromatica 70/30 col rosa
   antico dominante; il blu è la seconda voce. Canvas plum, la casa del brand. ═══ */
:root, [data-kit="purple"]{
  /* Purple non ridichiara raggi: sono i default di spacing.css. */
  --sv-shade-ink:#140812;
  --k-w1:70; --k-w2:30; --k-w3:0; --k-w4:0; /* bicromatica: rosa 70, blu 30 */
  /* Informativa: la luce con cui il kit è nato. NON è un valore di data-theme —
     serve a inizializzare il selettore, che di valori ne ha tre. */
  --sv-luce-nativa:dark;
  --sv-glass-blur:20px;
  --sv-glass-highlight:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 40%);
  --sv-e1:0 1px 2px rgb(var(--k-shadow-rgb) / .5);
  --sv-e2:0 4px 12px rgb(var(--k-shadow-rgb) / .45);
  --sv-e3:0 12px 32px rgb(var(--k-shadow-rgb) / .5);
  --sv-e4:0 24px 64px rgb(var(--k-shadow-rgb) / .6);
  --sv-glow-1:0 0 24px color-mix(in srgb, var(--k-a1), transparent 65%);

  /* chiaro */
  --kl-canvas:#EDE6EB;
  --kl-paper:#FAF6F9;
  --kl-ink:#2A1428;
  --kl-a1:#8F4C50;
  --kl-a2:#4F6B72;
  --kl-on-a1:#FFFFFF;
  --kl-on-a2:#FFFFFF;
  --kl-a1-shift:#140812;
  --kl-a2-shift:#140812;
  --kl-a2-text:color-mix(in oklab, #4F6B72, #2A1428 52%);
  --kl-ok:#2E7A4E;
  --kl-warn:#8A5A16;
  --kl-err:#A8323F;
  --kl-info:#2B5F91;
  --kl-on-feedback:#FFFFFF;
  --kl-glass-fill:rgba(255,255,255,.66);
  --kl-glass-stroke:rgba(42,20,40,.16);
  --kl-shadow-rgb:42 20 40;
  --kl-biglia-glass:#FCF8FB;
  --kl-biglia-tint:#7A5677;
  --kl-biglia-c3:#5E7E88;
  --kl-bc2:#7A4145;
  --kl-p3:#5E7E88; --kl-p4:#5E7E88; --kl-biglia-c4:#5E7E88;
  --kl-scheme:light;
  --kl-grad:linear-gradient(135deg,#8F4C50 0%,#9E5F63 70%,#4F6B72 100%);

  /* scuro */
  --kd-canvas:#1A0B1B;
  --kd-paper:#230F24;
  --kd-ink:#F9F9F9;
  --kd-a1:#AB5F63;
  --kd-a2:#6F8C93;
  --kd-on-a1:#FFFFFF;
  --kd-on-a2:#230F24;
  --kd-a1-shift:#140812;
  --kd-a2-shift:#FFFFFF;
  --kd-a2-text:color-mix(in oklab, #6F8C93, #F9F9F9 52%);
  --kd-ok:#55A375;
  --kd-warn:#D99A4E;
  --kd-err:#D9707A;
  --kd-info:#5E8FBF;
  --kd-on-feedback:#180A17;
  --kd-glass-fill:rgba(249,244,249,.06);
  --kd-glass-stroke:rgba(249,244,249,.16);
  --kd-shadow-rgb:18 5 17;
  --kd-biglia-glass:#E9DEE9;
  --kd-biglia-tint:#4A2846;
  --kd-biglia-c3:#8FA6AD;
  --kd-bc2:#C08186;
  --kd-p3:#8FA6AD; --kd-p4:#8FA6AD; --kd-biglia-c4:#8FA6AD;
  --kd-scheme:dark;
  --kd-grad:linear-gradient(135deg,#AB5F63 0%,#BC7E82 70%,#6F8C93 100%);
}

/* ═══ POP — identità + palette (nativo: chiaro). Concept: la pop art di Warhol —
   quattro inchiostri da serigrafia a peso pari (25/25/25/25) su carta bianca:
   il fondo tace, gli inchiostri urlano. ═══ */
[data-kit="pop"]{
  --sv-shade-ink:#1A1A1A;
  --k-w1:25; --k-w2:25; --k-w3:25; --k-w4:25; /* quaternaria Warhol */
  /* Informativa: la luce con cui il kit è nato. NON è un valore di data-theme —
     serve a inizializzare il selettore, che di valori ne ha tre. */
  --sv-luce-nativa:light;
  --sv-r1:6px; --sv-r2:14px; --sv-r3:14px; --sv-r4:20px;
  --sv-glass-blur:0px; --sv-glass-highlight:none;
  --sv-e1:2px 2px 0 rgb(var(--k-shadow-rgb));
  --sv-e2:3px 3px 0 rgb(var(--k-shadow-rgb));
  --sv-e3:5px 5px 0 rgb(var(--k-shadow-rgb));
  --sv-e4:8px 8px 0 rgb(var(--k-shadow-rgb));
  --sv-glow-1:4px 4px 0 rgb(var(--k-shadow-rgb));

  /* chiaro */
  --kl-canvas:#EDE9DC;
  --kl-paper:#FDFBF5;
  --kl-ink:#141414;
  --kl-a1:#C400C4;
  --kl-a2:#0077B6;
  --kl-on-a1:#FFFFFF;
  --kl-on-a2:#FFFFFF;
  --kl-a1-shift:#1A1A1A;
  --kl-a2-shift:#1A1A1A;
  --kl-a2-text:color-mix(in oklab, #0077B6, #141414 52%);
  --kl-ok:#14521F;
  --kl-warn:#6B3F00;
  --kl-err:#8E0018;
  --kl-info:#083A7D;
  --kl-on-feedback:#FFFFFF;
  --kl-glass-fill:rgba(255,255,255,.55);
  --kl-glass-stroke:rgba(26,26,26,.28);
  --kl-shadow-rgb:26 26 26;
  --kl-biglia-glass:#FBF9F1;
  --kl-biglia-tint:#55503F;
  --kl-biglia-c3:#2E9E2E;
  --kl-biglia-c4:#E5231B;
  --kl-p3:#E5231B;
  --kl-p4:#2E9E2E;
  --kl-bc2:#0077B6;
  --kl-scheme:light;
  --kl-grad:linear-gradient(135deg,#C400C4 0%,#0077B6 33%,#E5231B 66%,#2E9E2E 100%);

  /* scuro */
  --kd-canvas:#0D0D0D;
  --kd-paper:#1A1A1A;
  --kd-ink:#F2EFE6;
  --kd-a1:#FF5CFF;
  --kd-a2:#5BC4FF;
  --kd-on-a1:#1A1A1A;
  --kd-on-a2:#1A1A1A;
  --kd-a1-shift:#FFFFFF;
  --kd-a2-shift:#FFFFFF;
  --kd-a2-text:color-mix(in oklab, #5BC4FF, #F2EFE6 52%);
  --kd-ok:#4FD84F;
  --kd-warn:#FFC24F;
  --kd-err:#FF6B7F;
  --kd-info:#6FA8FF;
  --kd-on-feedback:#0D0D0D;
  --kd-glass-fill:rgba(242,239,230,.07);
  --kd-glass-stroke:rgba(242,239,230,.24);
  --kd-shadow-rgb:242 239 230;
  --kd-biglia-glass:#F0EDE2;
  --kd-biglia-tint:#2A2722;
  --kd-biglia-c3:#4FD84F;
  --kd-biglia-c4:#FF6B5C;
  --kd-p3:#FF6B5C;
  --kd-p4:#4FD84F;
  --kd-bc2:#5BC4FF;
  --kd-scheme:dark;
  --kd-grad:linear-gradient(135deg,#FF5CFF 0%,#5BC4FF 33%,#FF6B5C 66%,#4FD84F 100%);
}

/* ═══ SMERALDO — identità + palette (nativo: chiaro). Bicromatica 50/50: verde
   smeraldo e una sfumatura di giallo; la biglia sfuma nelle tinte dello smeraldo. ═══ */
[data-kit="smeraldo"]{
  --sv-shade-ink:#0F2A18;
  --k-w1:50; --k-w2:50; --k-w3:0; --k-w4:0; /* bicromatica: verde e giallo */
  /* Informativa: la luce con cui il kit è nato. NON è un valore di data-theme —
     serve a inizializzare il selettore, che di valori ne ha tre. */
  --sv-luce-nativa:light;
  --sv-r1:4px; --sv-r2:10px; --sv-r3:10px; --sv-r4:16px;
  --sv-glass-blur:14px;
  --sv-glass-highlight:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 40%);
  --sv-e1:0 1px 2px rgb(var(--k-shadow-rgb) / .14);
  --sv-e2:0 6px 14px -6px rgb(var(--k-shadow-rgb) / .3);
  --sv-e3:0 12px 26px -10px rgb(var(--k-shadow-rgb) / .34);
  --sv-e4:0 22px 48px -14px rgb(var(--k-shadow-rgb) / .4);
  --sv-glow-1:0 0 24px color-mix(in srgb, var(--k-a1), transparent 72%);

  /* chiaro */
  --kl-canvas:#F2EDD8;
  --kl-paper:#FFFAE9;
  --kl-ink:#0E2C17;
  --kl-a1:#008836;
  --kl-a2:#DEC26E;
  --kl-on-a1:#FFFAE9;
  --kl-on-a2:#0E2C17;
  --kl-a1-shift:#0F2A18;
  --kl-a2-shift:#FFFFFF;
  --kl-a2-text:#6E5714;
  --kl-ok:#186030;
  --kl-warn:#7A4900;
  --kl-err:#A32226;
  --kl-info:#1B5E8A;
  --kl-on-feedback:#FFFAE9;
  --kl-glass-fill:rgba(255,255,255,.6);
  --kl-glass-stroke:rgba(0,136,54,.24);
  --kl-shadow-rgb:20 61 34;
  --kl-biglia-glass:#FAFDF2;
  --kl-biglia-tint:#1E5730;
  --kl-biglia-c3:#00BF4C;
  --kl-bc2:#E0B84A; /* il giallo carica nel vetro: la voce è la stessa, la materia la slavava */
  --kl-p3:#00BF4C; --kl-p4:#00BF4C; --kl-biglia-c4:#00BF4C;
  --kl-scheme:light;
  --kl-grad:linear-gradient(135deg,#008836 0%,#00BF4C 50%,#DEC26E 100%);

  /* scuro */
  --kd-canvas:#071409;
  --kd-paper:#0D2113;
  --kd-ink:#E9F2E4;
  --kd-a1:#00BF4C;
  --kd-a2:#F2DC93;
  --kd-on-a1:#0D2113;
  --kd-on-a2:#0D2113;
  --kd-a1-shift:#FFFFFF;
  --kd-a2-shift:#FFFFFF;
  --kd-a2-text:#EBD79A;
  --kd-ok:#4FBF6B;
  --kd-warn:#D9A44F;
  --kd-err:#E0757A;
  --kd-info:#6FB0D8;
  --kd-on-feedback:#0D2113;
  --kd-glass-fill:rgba(233,242,228,.06);
  --kd-glass-stroke:rgba(233,242,228,.16);
  --kd-shadow-rgb:0 0 0;
  --kd-biglia-glass:#EAF6E4;
  --kd-biglia-tint:#0B2412;
  --kd-biglia-c3:#37D97A;
  --kd-bc2:#EFD068;
  --kd-p3:#37D97A; --kd-p4:#37D97A; --kd-biglia-c4:#37D97A;
  --kd-scheme:dark;
  --kd-grad:linear-gradient(135deg,#00BF4C 0%,#0D2113 50%,#F2DC93 100%);
}

/* ═══ RAME — identità + palette (nativo: scuro). Ex Meridiana: stessi inchiostri —
   rame e petrolio, 45/45 — col crema come voce rara (10). ═══ */
[data-kit="rame"]{
  --sv-shade-ink:#2A1608;
  --k-w1:45; --k-w2:45; --k-w3:10; --k-w4:0; /* rame e petrolio pari, crema raro */
  /* Informativa: la luce con cui il kit è nato. NON è un valore di data-theme —
     serve a inizializzare il selettore, che di valori ne ha tre. */
  --sv-luce-nativa:dark;
  --sv-r1:5px; --sv-r2:12px; --sv-r3:12px; --sv-r4:18px;
  --sv-glass-blur:16px;
  --sv-glass-highlight:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0) 40%);
  --sv-e1:0 1px 2px rgb(var(--k-shadow-rgb) / .12);
  --sv-e2:0 6px 16px -6px rgb(var(--k-shadow-rgb) / .28);
  --sv-e3:0 14px 30px -12px rgb(var(--k-shadow-rgb) / .32);
  --sv-e4:0 24px 52px -16px rgb(var(--k-shadow-rgb) / .38);
  --sv-glow-1:0 0 24px color-mix(in srgb, var(--k-a1), transparent 70%);

  /* chiaro */
  --kl-canvas:#EFE3D3;
  --kl-paper:#F7EFE4;
  --kl-ink:#281A10;
  --kl-a1:#B04617;
  --kl-a2:#1F5B72;
  --kl-on-a1:#FFFFFF;
  --kl-on-a2:#FFFFFF;
  --kl-a1-shift:#2A1608;
  --kl-a2-shift:#2A1608;
  --kl-a2-text:color-mix(in oklab, #1F5B72, #281A10 52%);
  --kl-ok:#1F6B3A;
  --kl-warn:#8A5300;
  --kl-err:#A32226;
  --kl-info:#1F5B72;
  --kl-on-feedback:#FFFFFF;
  --kl-glass-fill:rgba(255,255,255,.62);
  --kl-glass-stroke:rgba(46,31,20,.16);
  --kl-shadow-rgb:46 31 20;
  --kl-biglia-glass:#FFFAF2;
  --kl-biglia-tint:#7A4520;
  --kl-biglia-c3:#D6BE9E;
  --kl-bc2:#1F5B72; --kl-p3:#D6BE9E; --kl-p4:#D6BE9E; --kl-biglia-c4:#D6BE9E;
  --kl-scheme:light;
  --kl-grad:linear-gradient(135deg,#B04617 0%,#E8D9C3 50%,#1F5B72 100%);

  /* scuro */
  --kd-canvas:#150D07;
  --kd-paper:#21150D;
  --kd-ink:#F4E8D9;
  --kd-a1:#E2703C;
  --kd-a2:#6FB3CC;
  --kd-on-a1:#21150D;
  --kd-on-a2:#21150D;
  --kd-a1-shift:#FFFFFF;
  --kd-a2-shift:#FFFFFF;
  --kd-a2-text:color-mix(in oklab, #6FB3CC, #F4E8D9 52%);
  --kd-ok:#5FBF7E;
  --kd-warn:#E0A44F;
  --kd-err:#E4707A;
  --kd-info:#6FB3CC;
  --kd-on-feedback:#21150D;
  --kd-glass-fill:rgba(244,232,217,.06);
  --kd-glass-stroke:rgba(244,232,217,.16);
  --kd-shadow-rgb:0 0 0;
  --kd-biglia-glass:#F6E9D8;
  --kd-biglia-tint:#3A2110;
  --kd-biglia-c3:#C4A98A;
  --kd-bc2:#6FB3CC; --kd-p3:#C4A98A; --kd-p4:#C4A98A; --kd-biglia-c4:#C4A98A;
  --kd-scheme:dark;
  --kd-grad:linear-gradient(135deg,#E2703C 0%,#21150D 50%,#6FB3CC 100%);
}

/* ═══ PASTELLI — identità + palette (nativo: chiaro). Quaternaria primaria in chiave
   pastello: blu dominante (60), rosso (25), giallo e verde come note (7,5 ciascuno). */
[data-kit="pastelli"]{
  --sv-shade-ink:#0A1230;
  --k-w1:60; --k-w2:25; --k-w3:7.5; --k-w4:7.5; /* quaternaria pastello */
  /* Informativa: la luce con cui il kit è nato. NON è un valore di data-theme —
     serve a inizializzare il selettore, che di valori ne ha tre. */
  --sv-luce-nativa:light;
  --sv-r1:3px; --sv-r2:8px; --sv-r3:8px; --sv-r4:14px;
  --sv-glass-blur:14px;
  --sv-glass-highlight:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0) 40%);
  --sv-e1:0 1px 2px rgb(var(--k-shadow-rgb) / .14);
  --sv-e2:0 5px 14px -6px rgb(var(--k-shadow-rgb) / .3);
  --sv-e3:0 12px 28px -10px rgb(var(--k-shadow-rgb) / .34);
  --sv-e4:0 22px 48px -14px rgb(var(--k-shadow-rgb) / .4);
  --sv-glow-1:0 0 24px color-mix(in srgb, var(--k-a1), transparent 68%);

  /* chiaro */
  --kl-canvas:#E7EBF4;
  --kl-paper:#F5F7FC;
  --kl-ink:#101A3E;
  --kl-a1:#5B84C4;
  --kl-a2:#C9635A;
  --kl-on-a1:#FFFFFF;
  --kl-on-a2:#FFFFFF;
  --kl-a1-shift:#0A1230;
  --kl-a2-shift:#0A1230;
  --kl-a2-text:color-mix(in oklab, #C9635A, #101A3E 52%);
  --kl-ok:#0E7A50;
  --kl-warn:#7A5200;
  --kl-err:#B02D26;
  --kl-info:#1E3FBF;
  --kl-on-feedback:#FFFFFF;
  --kl-glass-fill:rgba(255,255,255,.66);
  --kl-glass-stroke:rgba(16,26,62,.18);
  --kl-shadow-rgb:16 26 62;
  --kl-biglia-glass:#F8FAFF;
  --kl-biglia-tint:#3A5580;
  --kl-biglia-c3:#E8C45C;
  --kl-biglia-c4:#7FB389;
  --kl-p3:#EFD284;
  --kl-p4:#93C29B;
  --kl-bc2:#C9635A;
  --kl-scheme:light;
  --kl-grad:linear-gradient(135deg,#5B84C4 0%,#C9635A 60%,#EFD284 85%,#93C29B 100%);

  /* scuro */
  --kd-canvas:#070D24;
  --kd-paper:#0D1531;
  --kd-ink:#E9EDF9;
  --kd-a1:#8FB3E8;
  --kd-a2:#EE9C93;
  --kd-on-a1:#0D1531;
  --kd-on-a2:#0D1531;
  --kd-a1-shift:#FFFFFF;
  --kd-a2-shift:#FFFFFF;
  --kd-a2-text:color-mix(in oklab, #EE9C93, #E9EDF9 52%);
  --kd-ok:#12A06A;
  --kd-warn:#F0B429;
  --kd-err:#F0716A;
  --kd-info:#8FB3E8;
  --kd-on-feedback:#0D1531;
  --kd-glass-fill:rgba(233,237,249,.06);
  --kd-glass-stroke:rgba(233,237,249,.16);
  --kd-shadow-rgb:0 0 0;
  --kd-biglia-glass:#DDE4F5;
  --kd-biglia-tint:#0F1E55;
  --kd-biglia-c3:#F2DC9B;
  --kd-biglia-c4:#A5D4AC;
  --kd-p3:#F2DC9B;
  --kd-p4:#A5D4AC;
  --kd-bc2:#EE9C93;
  --kd-scheme:dark;
  --kd-grad:linear-gradient(135deg,#8FB3E8 0%,#EE9C93 60%,#F2DC9B 85%,#A5D4AC 100%);
}

/* ═══ LUCE — la scelta della polarità è tutta qui ═══ */
/* Rete: nessun data-theme → la luce nativa del kit (vedi §3 in testa al file) */
/* Nate scure */
:root, [data-kit="purple"], [data-kit="rame"]{
  --k-canvas:var(--kd-canvas);
  --k-paper:var(--kd-paper);
  --k-ink:var(--kd-ink);
  --k-a1:var(--kd-a1);
  --k-a2:var(--kd-a2);
  --k-on-a1:var(--kd-on-a1);
  --k-on-a2:var(--kd-on-a2);
  --k-a1-shift:var(--kd-a1-shift);
  --k-a2-shift:var(--kd-a2-shift);
  --k-a2-text:var(--kd-a2-text);
  --k-ok:var(--kd-ok);
  --k-warn:var(--kd-warn);
  --k-err:var(--kd-err);
  --k-info:var(--kd-info);
  --k-on-feedback:var(--kd-on-feedback);
  --k-glass-fill:var(--kd-glass-fill);
  --k-glass-stroke:var(--kd-glass-stroke);
  --k-shadow-rgb:var(--kd-shadow-rgb);
  --k-biglia-glass:var(--kd-biglia-glass);
  --k-biglia-tint:var(--kd-biglia-tint);
  --k-biglia-c3:var(--kd-biglia-c3);
  --k-biglia-c4:var(--kd-biglia-c4, var(--kd-biglia-c3));
  --k-bc2:var(--kd-bc2, var(--kd-a2));
  --k-p3:var(--kd-p3, var(--kd-biglia-c3));
  --k-p4:var(--kd-p4, var(--kd-biglia-c3));
  --k-scheme:var(--kd-scheme);
  --k-grad:var(--kd-grad);
}
/* Nate chiare */
[data-kit="pop"], [data-kit="smeraldo"], [data-kit="pastelli"]{
  --k-canvas:var(--kl-canvas);
  --k-paper:var(--kl-paper);
  --k-ink:var(--kl-ink);
  --k-a1:var(--kl-a1);
  --k-a2:var(--kl-a2);
  --k-on-a1:var(--kl-on-a1);
  --k-on-a2:var(--kl-on-a2);
  --k-a1-shift:var(--kl-a1-shift);
  --k-a2-shift:var(--kl-a2-shift);
  --k-a2-text:var(--kl-a2-text);
  --k-ok:var(--kl-ok);
  --k-warn:var(--kl-warn);
  --k-err:var(--kl-err);
  --k-info:var(--kl-info);
  --k-on-feedback:var(--kl-on-feedback);
  --k-glass-fill:var(--kl-glass-fill);
  --k-glass-stroke:var(--kl-glass-stroke);
  --k-shadow-rgb:var(--kl-shadow-rgb);
  --k-biglia-glass:var(--kl-biglia-glass);
  --k-biglia-tint:var(--kl-biglia-tint);
  --k-biglia-c3:var(--kl-biglia-c3);
  --k-biglia-c4:var(--kl-biglia-c4, var(--kl-biglia-c3));
  --k-bc2:var(--kl-bc2, var(--kl-a2));
  --k-p3:var(--kl-p3, var(--kl-biglia-c3));
  --k-p4:var(--kl-p4, var(--kl-biglia-c3));
  --k-scheme:var(--kl-scheme);
  --k-grad:var(--kl-grad);
}
/* Esplicito — vale anche da solo su una sottosezione (le àncore --kl/--kd si ereditano) */
[data-theme="light"]{
  --k-canvas:var(--kl-canvas);
  --k-paper:var(--kl-paper);
  --k-ink:var(--kl-ink);
  --k-a1:var(--kl-a1);
  --k-a2:var(--kl-a2);
  --k-on-a1:var(--kl-on-a1);
  --k-on-a2:var(--kl-on-a2);
  --k-a1-shift:var(--kl-a1-shift);
  --k-a2-shift:var(--kl-a2-shift);
  --k-a2-text:var(--kl-a2-text);
  --k-ok:var(--kl-ok);
  --k-warn:var(--kl-warn);
  --k-err:var(--kl-err);
  --k-info:var(--kl-info);
  --k-on-feedback:var(--kl-on-feedback);
  --k-glass-fill:var(--kl-glass-fill);
  --k-glass-stroke:var(--kl-glass-stroke);
  --k-shadow-rgb:var(--kl-shadow-rgb);
  --k-biglia-glass:var(--kl-biglia-glass);
  --k-biglia-tint:var(--kl-biglia-tint);
  --k-biglia-c3:var(--kl-biglia-c3);
  --k-biglia-c4:var(--kl-biglia-c4, var(--kl-biglia-c3));
  --k-bc2:var(--kl-bc2, var(--kl-a2));
  --k-p3:var(--kl-p3, var(--kl-biglia-c3));
  --k-p4:var(--kl-p4, var(--kl-biglia-c3));
  --k-scheme:var(--kl-scheme);
  --k-grad:var(--kl-grad);
}
[data-theme="dark"]{
  --k-canvas:var(--kd-canvas);
  --k-paper:var(--kd-paper);
  --k-ink:var(--kd-ink);
  --k-a1:var(--kd-a1);
  --k-a2:var(--kd-a2);
  --k-on-a1:var(--kd-on-a1);
  --k-on-a2:var(--kd-on-a2);
  --k-a1-shift:var(--kd-a1-shift);
  --k-a2-shift:var(--kd-a2-shift);
  --k-a2-text:var(--kd-a2-text);
  --k-ok:var(--kd-ok);
  --k-warn:var(--kd-warn);
  --k-err:var(--kd-err);
  --k-info:var(--kd-info);
  --k-on-feedback:var(--kd-on-feedback);
  --k-glass-fill:var(--kd-glass-fill);
  --k-glass-stroke:var(--kd-glass-stroke);
  --k-shadow-rgb:var(--kd-shadow-rgb);
  --k-biglia-glass:var(--kd-biglia-glass);
  --k-biglia-tint:var(--kd-biglia-tint);
  --k-biglia-c3:var(--kd-biglia-c3);
  --k-biglia-c4:var(--kd-biglia-c4, var(--kd-biglia-c3));
  --k-bc2:var(--kd-bc2, var(--kd-a2));
  --k-p3:var(--kd-p3, var(--kd-biglia-c3));
  --k-p4:var(--kd-p4, var(--kd-biglia-c3));
  --k-scheme:var(--kd-scheme);
  --k-grad:var(--kd-grad);
}
/* Auto — la luce del dispositivo, senza JS */
@media (prefers-color-scheme: light){
  [data-theme="auto"]{
  --k-canvas:var(--kl-canvas);
  --k-paper:var(--kl-paper);
  --k-ink:var(--kl-ink);
  --k-a1:var(--kl-a1);
  --k-a2:var(--kl-a2);
  --k-on-a1:var(--kl-on-a1);
  --k-on-a2:var(--kl-on-a2);
  --k-a1-shift:var(--kl-a1-shift);
  --k-a2-shift:var(--kl-a2-shift);
  --k-a2-text:var(--kl-a2-text);
  --k-ok:var(--kl-ok);
  --k-warn:var(--kl-warn);
  --k-err:var(--kl-err);
  --k-info:var(--kl-info);
  --k-on-feedback:var(--kl-on-feedback);
  --k-glass-fill:var(--kl-glass-fill);
  --k-glass-stroke:var(--kl-glass-stroke);
  --k-shadow-rgb:var(--kl-shadow-rgb);
  --k-biglia-glass:var(--kl-biglia-glass);
  --k-biglia-tint:var(--kl-biglia-tint);
  --k-biglia-c3:var(--kl-biglia-c3);
  --k-biglia-c4:var(--kl-biglia-c4, var(--kl-biglia-c3));
  --k-bc2:var(--kl-bc2, var(--kl-a2));
  --k-p3:var(--kl-p3, var(--kl-biglia-c3));
  --k-p4:var(--kl-p4, var(--kl-biglia-c3));
  --k-scheme:var(--kl-scheme);
  --k-grad:var(--kl-grad);
  }
}
@media (prefers-color-scheme: dark){
  [data-theme="auto"]{
  --k-canvas:var(--kd-canvas);
  --k-paper:var(--kd-paper);
  --k-ink:var(--kd-ink);
  --k-a1:var(--kd-a1);
  --k-a2:var(--kd-a2);
  --k-on-a1:var(--kd-on-a1);
  --k-on-a2:var(--kd-on-a2);
  --k-a1-shift:var(--kd-a1-shift);
  --k-a2-shift:var(--kd-a2-shift);
  --k-a2-text:var(--kd-a2-text);
  --k-ok:var(--kd-ok);
  --k-warn:var(--kd-warn);
  --k-err:var(--kd-err);
  --k-info:var(--kd-info);
  --k-on-feedback:var(--kd-on-feedback);
  --k-glass-fill:var(--kd-glass-fill);
  --k-glass-stroke:var(--kd-glass-stroke);
  --k-shadow-rgb:var(--kd-shadow-rgb);
  --k-biglia-glass:var(--kd-biglia-glass);
  --k-biglia-tint:var(--kd-biglia-tint);
  --k-biglia-c3:var(--kd-biglia-c3);
  --k-biglia-c4:var(--kd-biglia-c4, var(--kd-biglia-c3));
  --k-bc2:var(--kd-bc2, var(--kd-a2));
  --k-p3:var(--kd-p3, var(--kd-biglia-c3));
  --k-p4:var(--kd-p4, var(--kd-biglia-c3));
  --k-scheme:var(--kd-scheme);
  --k-grad:var(--kd-grad);
  }
}

/* ═══════════════════ MAPPATURA — àncore --k-* → semantici --sv-* ═══════════════════
   Una volta sola, per ogni kit e ogni tema. Le quote NON sono scelte a occhio: sono il
   risultato di una misura su tutte e dieci le palette, rasterizzando i colori (i valori
   calcolati sono oklab: leggerli come numeri e calcolare la luminanza dà spazzatura).

   Garanzia dichiarata, e verificata: --sv-text-3 tiene AA (≥4.5) su --sv-bg-1, --sv-surface-2
   E --sv-surface-3 in tutte e dieci le palette — minimo misurato 4.76 (Smeraldo chiaro su
   surface-3). È il vincolo che fissa la quota a 30%: a 42% scendeva a 3.11 e le etichette
   mono da 9.5px non passavano in nove palette su dieci. Per lasciare margine, quattro
   inchiostri chiari sono stati approfonditi (Pop, Smeraldo, la ex Meridiana — oggi Rame — e la soppressa Regata): erano loro
   il collo di bottiglia, non la formula.

   --sv-accent-1-text al 30% verso l'ink riproduce a formula i valori che prima erano scritti
   a mano kit per kit (Purple #C58F92, Pop #8E008E): quando una derivazione ricostruisce da sé
   i valori tarati a occhio, è quella giusta. Per accent-2 non esiste quota che serva tutti —
   la salvia di Smeraldo chiaro non diventa inchiostro leggibile — quindi --k-a2-text è
   un'àncora per polarità: cinque kit la dichiarano con la formula (52%), Smeraldo con la
   deroga misurata, in ENTRAMBI i temi (una deroga dichiarata in un tema solo cola
   nell'altro attraverso il selettore nudo del kit: successo, 1.6 di contrasto).

   Il selettore include [data-theme] da solo: i semantici --sv-* vengono risolti in valore
   calcolato SUL nodo che li dichiara, e un discendente eredita i valori già risolti — senza
   questa voce, un contenitore con solo data-theme flipperebbe le àncore ma erediterebbe i
   semantici del tema del root. */
:root, [data-kit], [data-theme]{
  color-scheme:var(--k-scheme);

  --sv-bg-0:var(--k-canvas);
  --sv-bg-1:var(--k-paper);
  --sv-surface-1:color-mix(in oklab, var(--k-paper), var(--k-ink) 5%);
  --sv-surface-2:color-mix(in oklab, var(--k-paper), var(--k-ink) 9%);
  --sv-surface-3:color-mix(in oklab, var(--k-paper), var(--k-ink) 12%);
  --sv-line:color-mix(in oklab, var(--k-paper), var(--k-ink) 17%);
  --sv-line-strong:color-mix(in oklab, var(--k-paper), var(--k-ink) 34%);

  --sv-text-1:var(--k-ink);
  --sv-text-2:color-mix(in oklab, var(--k-ink), var(--k-paper) 16%);
  --sv-text-3:color-mix(in oklab, var(--k-ink), var(--k-paper) 30%);
  --sv-text-inverse:var(--k-paper);
  --sv-text-onaccent:var(--k-on-a1);
  --sv-text-onaccent-2:var(--k-on-a2);

  /* Regola dei due usi. Il RIEMPIMENTO è l'accento nudo; l'INCHIOSTRO è lo stesso accento
     spinto verso il testo, perché vive su tint e superfici, non sul canvas nudo.

     STATI. hover e active erano le uniche derivazioni che scrivevano una DIREZIONE fissa
     (white / black): su nove palette spingevano il riempimento verso lo stesso polo del suo
     inchiostro e il contrasto crollava — misurato, minimo 3.53. Ora la direzione è un'àncora
     di palette (--k-a*-shift): si va SEMPRE via dall'inchiostro che sta sopra, di un passo
     al passaggio e di due alla pressione. Minimo misurato: 5.68 su dieci palette.
     Non è una scorciatoia: quale sia il verso dipende da quale inchiostro c'è sopra, e
     quello è un dato della palette, non una formula. */
  --sv-accent-1:var(--k-a1);
  --sv-accent-1-hover:color-mix(in oklab, var(--k-a1), var(--k-a1-shift) 12%);
  --sv-accent-1-active:color-mix(in oklab, var(--k-a1), var(--k-a1-shift) 22%);
  --sv-accent-1-tint:color-mix(in srgb, var(--k-a1), transparent 86%);
  --sv-accent-1-text:color-mix(in oklab, var(--k-a1), var(--k-ink) 30%);
  --sv-accent-2:var(--k-a2);
  --sv-accent-2-hover:color-mix(in oklab, var(--k-a2), var(--k-a2-shift) 12%);
  --sv-accent-2-active:color-mix(in oklab, var(--k-a2), var(--k-a2-shift) 22%);
  --sv-accent-2-tint:color-mix(in srgb, var(--k-a2), transparent 86%);
  --sv-accent-2-text:var(--k-a2-text);

  --sv-ok:var(--k-ok);     --sv-ok-tint:color-mix(in srgb, var(--k-ok), transparent 86%);
  --sv-warn:var(--k-warn); --sv-warn-tint:color-mix(in srgb, var(--k-warn), transparent 86%);
  --sv-err:var(--k-err);   --sv-err-tint:color-mix(in srgb, var(--k-err), transparent 86%);
  --sv-info:var(--k-info); --sv-info-tint:color-mix(in srgb, var(--k-info), transparent 86%);
  --sv-text-on-ok:var(--k-on-feedback);   --sv-text-on-warn:var(--k-on-feedback);
  --sv-text-on-err:var(--k-on-feedback);  --sv-text-on-info:var(--k-on-feedback);

  --sv-glass-fill:var(--k-glass-fill);
  --sv-glass-stroke:var(--k-glass-stroke);
  --sv-focus-ring:0 0 0 2px var(--k-paper), 0 0 0 4px color-mix(in srgb, var(--k-a1), transparent 20%);
  /* Dalla 5.0.0 la firma del kit è la palette in proporzione: bande nette sui pesi
     ufficiali, non più la sfumatura --k-grad. Fili, tondi del selettore e progress la
     ereditano da soli; i tondi restano tondi, cambia solo la geometria interna. */
  --sv-gradient-kit:linear-gradient(90deg,
    var(--sv-palette-1) 0 calc(var(--sv-palette-w1)*1%),
    var(--sv-palette-2) calc(var(--sv-palette-w1)*1%) calc((var(--sv-palette-w1) + var(--sv-palette-w2))*1%),
    var(--sv-palette-3) calc((var(--sv-palette-w1) + var(--sv-palette-w2))*1%) calc((var(--sv-palette-w1) + var(--sv-palette-w2) + var(--sv-palette-w3))*1%),
    var(--sv-palette-4) calc((var(--sv-palette-w1) + var(--sv-palette-w2) + var(--sv-palette-w3))*1%) 100%);

  /* SOVRAPPOSIZIONI — e perché stanno qui e non su :root in effects.css.
     Le custom property si ereditano GIÀ SOSTITUITE: un token dichiarato una volta sola sul
     root calcola il proprio valore lì e resta congelato sul kit del root dentro un contenitore con
     data-kit proprio, anche se quel contenitore ridichiara --sv-surface-1. Questo blocco
     invece si applica a ogni elemento tematizzato, quindi si ricalcola: è il motivo per cui
     --sv-glass-fill segue i kit annidati e i due token nuovi devono stargli accanto.
     --sv-glass-panel è il vetro STRUTTURALE delle sovrapposizioni: --sv-glass-fill è
     decorativo e al suo alpha il testo di corpo non regge. Lo scrim deriva dall'inchiostro
     del kit: un velo di nero puro su Pastelli o Rame non appartiene al clima. */
  --sv-glass-panel:color-mix(in oklab, color-mix(in oklab, var(--k-paper), var(--k-ink) 5%) 88%, transparent);
  --sv-scrim:color-mix(in oklab, var(--sv-shade-ink) 62%, transparent);
  --sv-scrim-blur:8px;

  /* Lamina neutra del marchio: funzione di ink e carta, quindi si ritara da sola. */
  --sv-mark-shade:color-mix(in oklab, var(--k-ink) 30%, var(--k-paper));

  /* Materia della biglia — letta a runtime dal 3D: solo var() e hex, mai color-mix(),
     che su una custom property non registrata non arriva al valore calcolato.
     È tarata per POLARITÀ, non copiata da un tema all'altro: su fondo chiaro l'ambiente
     luminoso slava l'interno, quindi la tinta scende e il vetro sale; e la firma sottile
     (c3) deve staccarsi dalla carta — in tre kit era letteralmente il colore del fondo,
     cioè un nastro invisibile. Su fondo scuro il vetro alza la luminanza per non fondersi
     col canvas. --sv-biglia-canvas resta --k-paper: è lo sfondo su cui la biglia è
     appoggiata, ed è quello che il vetro rifrange. */
  --sv-biglia-c1:var(--k-a1);
  --sv-biglia-c2:var(--k-bc2); /* di norma = a2; Purple la deroga per restare blu */
  --sv-biglia-c3:var(--k-biglia-c3);
  /* Quarta lamina (filamento centrale del ventaglio): i kit quaternari — Pop, Pastelli —
     la dichiarano per luce; negli altri ricade sul terzo inchiostro. */
  --sv-biglia-c4:var(--k-biglia-c4);
  --sv-biglia-glass:var(--k-biglia-glass);
  --sv-biglia-tint:var(--k-biglia-tint);
  --sv-biglia-canvas:var(--k-paper);

  /* PALETTE UFFICIALE (5.2.0) — ogni kit dichiara il PROPRIO schema: le voci extra e i
     pesi (--k-w1..w4) vivono nel blocco del kit; qui vive solo la traduzione. Canvas e
     tinta restano supporto. Un kit bicromatico lascia w3/w4 a zero e le voci 3/4
     collassano senza mai dipingersi.
     Le àncore opzionali (bc2, p3/p4, biglia-c4) si dichiarano SEMPRE e in entrambe le luci:
     sono custom property, ereditano, e in un kit annidato colerebbero dal kit antenato. */
  --sv-palette-1:var(--k-a1);
  --sv-palette-2:var(--k-a2);
  --sv-palette-3:var(--k-p3);
  --sv-palette-4:var(--k-p4);
  --sv-palette-w1:var(--k-w1, 50);
  --sv-palette-w2:var(--k-w2, 50);
  --sv-palette-w3:var(--k-w3, 0);
  --sv-palette-w4:var(--k-w4, 0);
}

/* Pop non ha vetro: le sovrapposizioni restano piene e il velo non sfoca. Sta DOPO il blocco
   condiviso perché è quello a dichiarare i due token — stessa specificità, vince l'ultimo. */
[data-kit="pop"]{
  --sv-glass-panel:var(--sv-surface-1);
  --sv-scrim-blur:0px;
}

/* ==== tokens/carta.css ==== */
/* SVILAPP — Carta: la superficie stampata.
   Importato dopo kits.css, prima dei componenti.

   PERCHÉ ESISTE. I semantici di un kit sono tarati su --sv-bg-1, cioè sul chrome dello
   SCHERMO. La carta invece è bianca in tutti i kit: su Purple e Rame --sv-text-1 è quasi
   bianco e sparirebbe sul foglio. Senza questo layer l'unica via d'uscita è scrivere a mano
   --sv-plum-900 nel corpo — ed è esattamente ciò che rendeva il documento un fossile del kit
   Base, polimorfo solo nel chrome.

   COSA FA. Ri-basa gli inchiostri sul bianco derivandoli da --sv-shade-ink, l'inchiostro più
   scuro che ogni kit già dichiara. Nessun valore nuovo da inventare per kit: la carta è una
   funzione del kit, non una sua seconda definizione.

   COME SI USA. data-kit sul foglio, data-superficie="carta" sulle aree di carta (titolo,
   metadati, corpo). Le fasce di chrome (topbar, piede) restano FUORI dallo scope: là valgono
   i semantici normali del kit — ed è per questo che il marchio in topbar prende da solo la
   polarità giusta, su chrome chiaro come su chrome scuro. Nessuna tabella di polarità.

   Le quote sono tarate sul contrasto reale, non a occhio:
   text-3 al 38% tiene AA (≥4.49) sulle etichette mono da 10px in tutti e sei i kit;
   accent-1 scurito del 14% porta il riempimento arancio di Rame da 2.75 a 3.57. */

[data-superficie="carta"]{
  /* La carta è bianca in ogni kit: è il vincolo, non una scelta di tema. */
  --sv-bg-0:var(--sv-bianco-vero);
  --sv-bg-1:var(--sv-bianco-vero);
  --sv-surface-1:color-mix(in srgb, var(--sv-shade-ink), white 97%);
  --sv-surface-2:color-mix(in srgb, var(--sv-shade-ink), white 94%);
  --sv-surface-3:var(--sv-bianco-vero);

  /* Inchiostri */
  --sv-text-1:color-mix(in srgb, var(--sv-shade-ink), white 8%);   /* titoli e corpo */
  --sv-text-2:color-mix(in srgb, var(--sv-shade-ink), white 30%);  /* testo secondario */
  --sv-text-3:color-mix(in srgb, var(--sv-shade-ink), white 38%);  /* etichette, metadati */
  --sv-text-inverse:var(--sv-bianco-vero);

  /* Filetti: 88% è il capello di tabella, 62% il bordo pieno. */
  --sv-line:color-mix(in srgb, var(--sv-shade-ink), white 88%);
  --sv-line-strong:color-mix(in srgb, var(--sv-shade-ink), white 62%);

  /* Regola dei due usi, versione carta. Il RIEMPIMENTO va scurito: in stampa l'inchiostro
     rende più chiaro che a schermo, e l'arancio di Rame sul bianco non passerebbe. */
  --sv-accent-1:color-mix(in srgb, var(--sv-accent-1-carta-src), var(--sv-shade-ink) 14%);
  --sv-accent-2:color-mix(in srgb, var(--sv-accent-2-carta-src), var(--sv-shade-ink) 14%);
  /* L'INCHIOSTRO d'accento (occhielli, numeri di sezione, chiavi) va più giù ancora. */
  --sv-accent-1-text:color-mix(in srgb, var(--sv-accent-1-carta-src), var(--sv-shade-ink) 26%);
  --sv-accent-2-text:color-mix(in srgb, var(--sv-accent-2-carta-src), var(--sv-shade-ink) 34%);
  --sv-accent-1-tint:color-mix(in srgb, var(--sv-accent-1-carta-src), white 92%);
  --sv-accent-2-tint:color-mix(in srgb, var(--sv-accent-2-carta-src), white 92%);

  /* Feedback su carta: i pieni da schermo sono tarati su fondo scuro e sbiadiscono sul bianco.
     Nome distinto perché una custom property non può derivare da se stessa. */
  --sv-ok-carta:color-mix(in srgb, var(--sv-ok), var(--sv-shade-ink) 26%);
  --sv-warn-carta:color-mix(in srgb, var(--sv-warn), var(--sv-shade-ink) 30%);
  --sv-err-carta:color-mix(in srgb, var(--sv-err), var(--sv-shade-ink) 26%);
  --sv-info-carta:color-mix(in srgb, var(--sv-info), var(--sv-shade-ink) 26%);

  /* Il marchio si ri-inchiostra da solo: --sv-mark-shade è una funzione di text-1 e bg-1,
     e va ridichiarata qui perché nel kit è stata calcolata sui valori da schermo. */
  --sv-mark-shade:color-mix(in oklab, var(--sv-text-1) 30%, var(--sv-bg-1));

  /* In stampa non esistono elevazioni né vetro. */
  --sv-e1:none; --sv-e2:none; --sv-e3:none; --sv-e4:none; --sv-glow-1:none;
  --sv-glass-fill:transparent; --sv-glass-stroke:var(--sv-line); --sv-glass-blur:0px;
  --sv-glass-highlight:none;

  background-color:var(--sv-bianco-vero);
  color:var(--sv-text-1);
  /* La carta è chiara anche dentro un tema scuro: i controlli nativi devono saperlo. */
  color-scheme:light;
}

/* I *-carta-src conservano l'accento del kit prima della ri-base: senza di loro
   --sv-accent-1 dipenderebbe da se stesso e l'intera regola verrebbe scartata. */
:root, [data-kit="purple"]{ --sv-accent-1-carta-src:var(--sv-rosa-500); --sv-accent-2-carta-src:var(--sv-ottanio-500); }
[data-kit="pop"]{ --sv-accent-1-carta-src:#C400C4; --sv-accent-2-carta-src:#2E9E2E; }
[data-kit="regata"]{ --sv-accent-1-carta-src:#252A84; --sv-accent-2-carta-src:#98262A; }
[data-kit="smeraldo"]{ --sv-accent-1-carta-src:#1F7C3B; --sv-accent-2-carta-src:#A9B47B; }
[data-kit="rame"]{ --sv-accent-1-carta-src:#E0863A; --sv-accent-2-carta-src:#4FA8B8; }
[data-kit="rame"]{ --sv-accent-1-carta-src:#B04617; --sv-accent-2-carta-src:#1F5B72; }

/* Filigrana del marchio: il componente polimorfico al posto del PNG, così segue il kit.
   Mai sopra il testo, mai su più di una pagina. */
.sv-filigrana{position:absolute;right:6mm;bottom:2mm;width:90mm;opacity:.05;pointer-events:none}
.sv-filigrana .sv-mark{--sv-mark-size:90mm}

/* ==== styles.css ==== */
/* La versione è un token: il pannello la mostra senza che nessuno la ricopi
   a mano, e senza che resti indietro. */
:root{ --sv-kit-version:"5.4.0"; }