/**
 * KA.i Grid — design token
 * GENERATO da tokens/ · non modificare a mano.
 *
 * Tre stati di tema, non due:
 *   :root                                   -> chiaro (default, e ground per "system")
 *   @media (prefers-color-scheme: dark)     -> scuro quando il sistema lo chiede
 *     :root:not([data-theme="light"])          e l'utente non ha forzato il chiaro
 *   :root[data-theme="dark"]                -> scuro forzato dall'applicazione
 */

:root {
  --kai-palette-neutral-50: #f6f8f9;
  --kai-palette-neutral-100: #eceff2;
  --kai-palette-neutral-200: #d6dce2;
  --kai-palette-neutral-300: #b3bec8;
  --kai-palette-neutral-400: #8a99a8;
  --kai-palette-neutral-500: #697a8a;
  --kai-palette-neutral-600: #536170;
  --kai-palette-neutral-700: #434f5c;
  --kai-palette-neutral-800: #39434e;
  --kai-palette-neutral-900: #232c36;
  --kai-palette-neutral-950: #141b23;
  --kai-palette-blue-50: #f4f8fb;
  --kai-palette-blue-100: #e1eef9;
  --kai-palette-blue-200: #c3e0f8;
  --kai-palette-blue-300: #9ccef8;
  --kai-palette-blue-400: #6cb8f6;
  --kai-palette-blue-500: #369fee;
  --kai-palette-blue-600: #0084d5; /** Primario di marca approvato. Il valore non si modifica per il contrasto: le etichette usano blue.950, non il bianco. */
  --kai-palette-blue-700: #1962a2;
  --kai-palette-blue-800: #0e3c6e;
  --kai-palette-blue-900: #041e42; /** Primario di marca. */
  --kai-palette-blue-950: #000c1e; /** Primario di marca. */
  --kai-palette-violet-50: #faf5ff;
  --kai-palette-violet-100: #f3e8ff;
  --kai-palette-violet-200: #e9d5ff;
  --kai-palette-violet-300: #d8b4fe;
  --kai-palette-violet-400: #c084fc;
  --kai-palette-violet-500: #a855f7;
  --kai-palette-violet-600: #9333ea;
  --kai-palette-violet-700: #7e22ce;
  --kai-palette-violet-800: #6b21a8;
  --kai-palette-violet-900: #581c87;
  --kai-palette-violet-950: #3b0764;
  --kai-palette-fuchsia-50: #fdf4ff;
  --kai-palette-fuchsia-100: #fbe6fe;
  --kai-palette-fuchsia-200: #f5d0fe;
  --kai-palette-fuchsia-300: #f0abfc;
  --kai-palette-fuchsia-400: #e879f9;
  --kai-palette-fuchsia-500: #d946ef;
  --kai-palette-fuchsia-600: #c026d3;
  --kai-palette-fuchsia-700: #a21caf;
  --kai-palette-fuchsia-800: #86198f;
  --kai-palette-fuchsia-900: #701a75;
  --kai-palette-fuchsia-950: #4a044e;
  --kai-palette-red-50: #feeded;
  --kai-palette-red-100: #fee2e2;
  --kai-palette-red-200: #fecaca;
  --kai-palette-red-300: #fca5a5;
  --kai-palette-red-400: #f47c7c;
  --kai-palette-red-500: #ef4444;
  --kai-palette-red-600: #dc2626;
  --kai-palette-red-700: #b91c1c;
  --kai-palette-red-800: #991b1b;
  --kai-palette-red-900: #7f1d1d;
  --kai-palette-red-950: #450a0a;
  --kai-palette-orange-50: #fff6f0;
  --kai-palette-orange-100: #ffe8d7;
  --kai-palette-orange-200: #fdd5b4;
  --kai-palette-orange-300: #fcb478;
  --kai-palette-orange-400: #fb923c;
  --kai-palette-orange-500: #f97316;
  --kai-palette-orange-600: #ea580c;
  --kai-palette-orange-700: #c2410c;
  --kai-palette-orange-800: #b1401a;
  --kai-palette-orange-900: #7c2d12;
  --kai-palette-orange-950: #431407;
  --kai-palette-yellow-50: #fcf3e0;
  --kai-palette-yellow-100: #f4e9bd;
  --kai-palette-yellow-200: #f4dd92;
  --kai-palette-yellow-300: #f7d174;
  --kai-palette-yellow-400: #f9c44e;
  --kai-palette-yellow-500: #f4b62c;
  --kai-palette-yellow-600: #f2a50a;
  --kai-palette-yellow-700: #c68813;
  --kai-palette-yellow-800: #996a1a;
  --kai-palette-yellow-900: #6d4b15;
  --kai-palette-yellow-950: #412c0a;
  --kai-palette-green-50: #f4f9f6;
  --kai-palette-green-100: #dcfce7;
  --kai-palette-green-200: #a8efbc;
  --kai-palette-green-300: #6ce195;
  --kai-palette-green-400: #42c877;
  --kai-palette-green-500: #22ac60;
  --kai-palette-green-600: #209151;
  --kai-palette-green-700: #1c7542;
  --kai-palette-green-800: #195c34;
  --kai-palette-green-900: #124426;
  --kai-palette-green-950: #042d15;
  --kai-palette-indigo-50: #f5f6fe;
  --kai-palette-indigo-100: #e0e7ff;
  --kai-palette-indigo-200: #c7d2fe;
  --kai-palette-indigo-300: #a5b4fc;
  --kai-palette-indigo-400: #818cf8;
  --kai-palette-indigo-500: #6366f1;
  --kai-palette-indigo-600: #4f46e5;
  --kai-palette-indigo-700: #4338ca;
  --kai-palette-indigo-800: #3730a3;
  --kai-palette-indigo-900: #312e81;
  --kai-palette-indigo-950: #1e1b4b;
  --kai-palette-shade-veil: rgba(20, 27, 35, 0.65); /** 65% — neutral.950 con trasparenza, velo dietro un pannello sovrapposto in modo chiaro. */
  --kai-palette-shade-veil-strong: rgba(0, 0, 0, 0.7); /** 70% di nero puro — velo in modo scuro, dove il neutro non stacca abbastanza dal fondo. */
  --kai-palette-shade-soft: rgba(20, 27, 35, 0.15); /** 15% — neutral.950 con trasparenza, ombra di menu e popover in modo chiaro. */
  --kai-palette-shade-hard: rgba(0, 0, 0, 0.4); /** 40% di nero puro — la stessa ombra in modo scuro: su fondo scuro un'ombra tenue non esiste. */
  --kai-palette-white: #ffffff;
  --kai-palette-black: #000000;
  --kai-scale-0: 0px;
  --kai-scale-1: 2px;
  --kai-scale-2: 4px;
  --kai-scale-3: 8px;
  --kai-scale-4: 12px;
  --kai-scale-5: 16px;
  --kai-scale-6: 20px;
  --kai-scale-7: 24px;
  --kai-scale-8: 32px;
  --kai-scale-9: 40px;
  --kai-scale-10: 48px;
  --kai-scale-11: 64px;
  --kai-scale-12: 80px;
  --kai-curve-none: 0px;
  --kai-curve-sm: 3px;
  --kai-curve-md: 6px;
  --kai-curve-lg: 10px;
  --kai-curve-pill: 9999px;
  --kai-height-sm: 28px;
  --kai-height-md: 36px;
  --kai-height-lg: 44px; /** 44px è anche la dimensione minima di bersaglio raccomandata per il tocco. */
  --kai-stroke-thin: 1px;
  --kai-stroke-thick: 2px;
  --kai-size-rail: 64px; /** Barra laterale compressa: mostra solo le icone. 64px lascia 44px di bersaglio con 10px di respiro per lato. */
  --kai-size-sidebar: 264px; /** Barra laterale estesa. Misurata sui nostri back-end: contiene due livelli di voci con icona senza troncare etichette come «Configurazione impianti». */
  --kai-size-topbar: 56px;
  --kai-size-menu-min: 200px; /** Larghezza minima di un menu a discesa: sotto, le voci vanno a capo e il menu sembra rotto. */
  --kai-size-content: 1440px; /** Larghezza massima dell'area di contenuto. Oltre, le tabelle larghe restano utilizzabili ma l'intestazione di pagina si stira e diventa illeggibile. */
  --kai-face-sans: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kai-face-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --kai-step-xs: 12px;
  --kai-step-sm: 13px;
  --kai-step-base: 14px;
  --kai-step-md: 16px;
  --kai-step-lg: 20px;
  --kai-step-xl: 25px;
  --kai-step-2xl: 31px;
  --kai-step-3xl: 39px;
  --kai-weight-regular: 400;
  --kai-weight-medium: 500;
  --kai-weight-semibold: 600;
  --kai-leading-tight: 1.2;
  --kai-leading-snug: 1.4;
  --kai-leading-relaxed: 1.6;
  --kai-tracking-tight: -0.01em;
  --kai-tracking-normal: 0em;
  --kai-tracking-wide: 0.08em;
  --kai-layer-base: 0; /** Contenuto normale. */
  --kai-layer-sticky: 100; /** Barra superiore e intestazioni che restano attaccate durante lo scorrimento. */
  --kai-layer-overlay: 200; /** Il velo e il pannello che scorre da lato (barra laterale in modalità mobile, drawer). */
  --kai-layer-popover: 300; /** Menu, tooltip, popover: stanno sopra al pannello che li ha aperti, altrimenti un menu dentro un drawer viene tagliato. */
  --kai-motion-duration-instant: 80ms;
  --kai-motion-duration-fast: 140ms;
  --kai-motion-duration-normal: 220ms;
  --kai-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --kai-motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
  --kai-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
  --kai-palette-brand-azure: var(--kai-palette-blue-600); /** Nome storico conservato per i consumatori esistenti. Per nuove associazioni usare palette.blue.600. */
  --kai-control-height-sm: var(--kai-height-sm);
  --kai-control-height-md: var(--kai-height-md);
  --kai-control-height-lg: var(--kai-height-lg);
  --kai-control-padding-x-sm: var(--kai-scale-3);
  --kai-control-padding-x-md: var(--kai-scale-4);
  --kai-control-padding-x-lg: var(--kai-scale-5);
  --kai-control-icon-size-sm: var(--kai-scale-5);
  --kai-control-icon-size-md: var(--kai-scale-6);
  --kai-control-icon-size-lg: var(--kai-scale-7);
  --kai-focus-offset: var(--kai-scale-1); /** Distacco dell'anello dal bordo del controllo: senza, l'anello si confonde con il bordo e su fondo scuro sparisce. */
  --kai-space-inset-xs: var(--kai-scale-2);
  --kai-space-inset-sm: var(--kai-scale-3);
  --kai-space-inset-md: var(--kai-scale-5);
  --kai-space-inset-lg: var(--kai-scale-7);
  --kai-space-inset-xl: var(--kai-scale-8);
  --kai-space-stack-xs: var(--kai-scale-2);
  --kai-space-stack-sm: var(--kai-scale-3);
  --kai-space-stack-md: var(--kai-scale-5);
  --kai-space-stack-lg: var(--kai-scale-8);
  --kai-space-stack-xl: var(--kai-scale-10);
  --kai-space-inline-xs: var(--kai-scale-1);
  --kai-space-inline-sm: var(--kai-scale-2);
  --kai-space-inline-md: var(--kai-scale-3);
  --kai-space-inline-lg: var(--kai-scale-5);
  --kai-radius-control: var(--kai-curve-md);
  --kai-radius-surface: var(--kai-curve-lg);
  --kai-radius-pill: var(--kai-curve-pill);
  --kai-border-width-default: var(--kai-stroke-thin);
  --kai-border-width-focus: var(--kai-stroke-thick);
  --kai-type-body-family: var(--kai-face-sans);
  --kai-type-body-size: var(--kai-step-base);
  --kai-type-body-weight: var(--kai-weight-regular);
  --kai-type-body-leading: var(--kai-leading-relaxed);
  --kai-type-body-strong-size: var(--kai-step-base);
  --kai-type-body-strong-weight: var(--kai-weight-medium);
  --kai-type-heading-family: var(--kai-face-sans);
  --kai-type-heading-weight: var(--kai-weight-semibold);
  --kai-type-heading-leading: var(--kai-leading-tight);
  --kai-type-heading-tracking: var(--kai-tracking-tight);
  --kai-type-heading-size-sm: var(--kai-step-md);
  --kai-type-heading-size-md: var(--kai-step-lg);
  --kai-type-heading-size-lg: var(--kai-step-xl);
  --kai-type-heading-size-xl: var(--kai-step-2xl);
  --kai-type-small-size: var(--kai-step-sm);
  --kai-type-small-leading: var(--kai-leading-snug);
  --kai-type-line-tight: var(--kai-leading-tight);
  --kai-type-line-snug: var(--kai-leading-snug);
  --kai-type-line-relaxed: var(--kai-leading-relaxed);
  --kai-type-label-size: var(--kai-step-sm);
  --kai-type-label-weight: var(--kai-weight-medium);
  --kai-type-label-tracking: var(--kai-tracking-wide);
  --kai-type-code-family: var(--kai-face-mono);
  --kai-type-code-size: var(--kai-step-sm);
  --kai-alert-accent-width: var(--kai-scale-1);
  --kai-badge-padding-y: var(--kai-scale-1);
  --kai-badge-dot-size: var(--kai-scale-2);
  --kai-shell-sidebar-width: var(--kai-size-sidebar);
  --kai-shell-rail-width: var(--kai-size-rail);
  --kai-shell-topbar-height: var(--kai-size-topbar);
  --kai-shell-content-max: var(--kai-size-content);
  --kai-shell-layer-sticky: var(--kai-layer-sticky);
  --kai-shell-layer-overlay: var(--kai-layer-overlay);
  --kai-topbar-height: var(--kai-size-topbar);
  --kai-breadcrumb-item-max: var(--kai-size-menu-min); /** Tetto di larghezza di una briciola intermedia troncata su schermo stretto. */
  --kai-menu-min-width: var(--kai-size-menu-min);
  --kai-menu-shadow-offset-y: var(--kai-scale-2);
  --kai-menu-shadow-blur: var(--kai-scale-4);
  --kai-menu-layer: var(--kai-layer-popover);
  --kai-color-bg-canvas: var(--kai-palette-neutral-50);
  --kai-color-bg-surface: var(--kai-palette-white);
  --kai-color-bg-sunken: var(--kai-palette-neutral-100);
  --kai-color-bg-inverse: var(--kai-palette-neutral-900);
  --kai-color-bg-veil: var(--kai-palette-shade-veil); /** Il velo dietro un pannello sovrapposto. Non è un fondo: è un colore con trasparenza, e il contrasto di ciò che sta sotto non è più garantito — per questo sotto il velo non ci sono controlli attivi. */
  --kai-color-shadow-popover: var(--kai-palette-shade-soft);
  --kai-color-fg-default: var(--kai-palette-neutral-900);
  --kai-color-fg-muted: var(--kai-palette-neutral-600);
  --kai-color-fg-subtle: var(--kai-palette-neutral-500); /** 4.42:1 su superficie: sufficiente per testo grande e per elementi non testuali, NON per testo corrente. */
  --kai-color-fg-on-accent: var(--kai-palette-white); /** Label sempre bianche sul blu di marca, decisione 2026-09-11. Bianco su blue.600: 3.99:1, NON conforme WCAG AA per testo normale (4.5:1); deroga di marca D16, non esenzione WCAG. Hover 700 e active 800 superano 4.5:1. */
  --kai-color-fg-inverse: var(--kai-palette-neutral-50);
  --kai-color-border-default: var(--kai-palette-neutral-200); /** Decorativo: separatori, bordo di card e righe di tabella. Nessuna promessa di contrasto. */
  --kai-color-border-strong: var(--kai-palette-neutral-300); /** Decorativo più marcato: intestazioni, divisori di sezione. */
  --kai-color-border-control: var(--kai-palette-neutral-500); /** Bordo che IDENTIFICA un controllo (input, checkbox, radio). 4.42:1 sulla superficie: rispetta il 3:1 richiesto da WCAG 1.4.11. Il 300 sta a 1.89:1 e non lo rispetta. */
  --kai-color-border-control-hover: var(--kai-palette-neutral-600);
  --kai-color-border-focus: var(--kai-palette-blue-600);
  --kai-color-accent-default: var(--kai-palette-blue-600); /** Primario di marca #0084D5, con label bianca. Contrasto 3.99:1: limite noto per testo normale, vedi D16. Per link e testo su superficie usare accent.text. */
  --kai-color-accent-hover: var(--kai-palette-blue-700); /** Scurisce mantenendo la label bianca; contrasto superiore a 4.5:1. */
  --kai-color-accent-active: var(--kai-palette-blue-800);
  --kai-color-accent-subtle: var(--kai-palette-blue-50);
  --kai-color-accent-text: var(--kai-palette-blue-700); /** L'accento quando è TESTO: link, voci di menu attive. 6.34:1 sulla superficie, 5.96:1 sul canvas. */
  --kai-color-accent-graphic: var(--kai-palette-blue-600); /** L'accento come GRAFICA: icone, barre, marche di grafico, indicatori. Promessa 3:1 sul fondo, non 4.5, perché non è testo. È lo stesso ruolo che `mark` ha per gli stati. */
  --kai-color-status-success-mark: var(--kai-palette-green-600); /** Il 600 di regola. 3.77:1 sul canvas: sufficiente per elementi non testuali (WCAG 1.4.11). */
  --kai-color-status-success-solid: var(--kai-palette-green-700); /** Riempimento CON etichetta sopra. Il 600 non è utilizzabile qui: bianco 4.01:1 e testo scuro 3.76:1, nessuno dei due passa. Il 700 con il bianco sta a 5.72:1. */
  --kai-color-status-success-solid-hover: var(--kai-palette-green-800);
  --kai-color-status-success-on-solid: var(--kai-palette-white);
  --kai-color-status-success-text: var(--kai-palette-green-700); /** 5.37:1 sul fondo tenue. */
  --kai-color-status-success-subtle: var(--kai-palette-green-50);
  --kai-color-status-success-border: var(--kai-palette-green-200);
  --kai-color-status-warning-mark: var(--kai-palette-yellow-800); /** Unica deviazione strutturale dalla regola del 600, e non è una scelta: il giallo di marca sta a 2.07:1 sul bianco e il 700 a 2.84:1 sul canvas. Nessuno dei due raggiunge il 3:1. L'800 sta a 4.45:1. Un giallo chiaro su fondo chiaro non è visibile, e questo vale per qualunque sistema, non solo per il nostro. */
  --kai-color-status-warning-solid: var(--kai-palette-yellow-600); /** Qui il 600 di marca si usa, perché il testo sopra è SCURO: yellow.950 su yellow.600 sta a 6.39:1. Con il bianco starebbe a 2.07:1. */
  --kai-color-status-warning-solid-hover: var(--kai-palette-yellow-500); /** In hover il giallo schiarisce, non scurisce: con testo scuro sopra il contrasto sale a 7.28:1. */
  --kai-color-status-warning-on-solid: var(--kai-palette-yellow-950);
  --kai-color-status-warning-text: var(--kai-palette-yellow-900); /** 7.87:1 sul bianco, 7.14:1 sul fondo tenue. L'800 sul tenue si ferma a 4.30:1. */
  --kai-color-status-warning-subtle: var(--kai-palette-yellow-50);
  --kai-color-status-warning-border: var(--kai-palette-yellow-200);
  --kai-color-status-danger-mark: var(--kai-palette-red-600); /** 4.53:1 sul canvas. */
  --kai-color-status-danger-solid: var(--kai-palette-red-600); /** Il 600 di regola: bianco sopra 4.83:1. */
  --kai-color-status-danger-solid-hover: var(--kai-palette-red-700);
  --kai-color-status-danger-on-solid: var(--kai-palette-white);
  --kai-color-status-danger-text: var(--kai-palette-red-700);
  --kai-color-status-danger-subtle: var(--kai-palette-red-50);
  --kai-color-status-danger-border: var(--kai-palette-red-200);
  --kai-color-status-info-mark: var(--kai-palette-blue-600); /** Il primario di marca come segno: supera 3:1 sul canvas e sulla superficie. */
  --kai-color-status-info-solid: var(--kai-palette-blue-600);
  --kai-color-status-info-solid-hover: var(--kai-palette-blue-700);
  --kai-color-status-info-on-solid: var(--kai-palette-white); /** Label bianca sul blue.600 come sul primario: 3.99:1, NON conforme AA per testo normale. Deroga di marca D16; soglia WCAG invariata. */
  --kai-color-status-info-text: var(--kai-palette-blue-700);
  --kai-color-status-info-subtle: var(--kai-palette-blue-50);
  --kai-color-status-info-border: var(--kai-palette-blue-200);
  --kai-control-gap: var(--kai-space-inline-md); /** Fra icona ed etichetta. */
  --kai-focus-width: var(--kai-border-width-focus);
  --kai-alert-padding: var(--kai-space-inset-md);
  --kai-alert-radius: var(--kai-radius-control);
  --kai-alert-gap: var(--kai-space-inline-lg);
  --kai-alert-border-width: var(--kai-border-width-default);
  --kai-alert-success-bg: var(--kai-color-status-success-subtle);
  --kai-alert-success-border: var(--kai-color-status-success-border);
  --kai-alert-success-mark: var(--kai-color-status-success-mark);
  --kai-alert-success-fg: var(--kai-color-status-success-text);
  --kai-alert-warning-bg: var(--kai-color-status-warning-subtle);
  --kai-alert-warning-border: var(--kai-color-status-warning-border);
  --kai-alert-warning-mark: var(--kai-color-status-warning-mark);
  --kai-alert-warning-fg: var(--kai-color-status-warning-text);
  --kai-alert-danger-bg: var(--kai-color-status-danger-subtle);
  --kai-alert-danger-border: var(--kai-color-status-danger-border);
  --kai-alert-danger-mark: var(--kai-color-status-danger-mark);
  --kai-alert-danger-fg: var(--kai-color-status-danger-text);
  --kai-alert-info-bg: var(--kai-color-status-info-subtle);
  --kai-alert-info-border: var(--kai-color-status-info-border);
  --kai-alert-info-mark: var(--kai-color-status-info-mark);
  --kai-alert-info-fg: var(--kai-color-status-info-text);
  --kai-badge-padding-x: var(--kai-space-inline-md);
  --kai-badge-radius: var(--kai-radius-pill);
  --kai-badge-font-size: var(--kai-type-label-size);
  --kai-badge-font-weight: var(--kai-type-label-weight);
  --kai-badge-gap: var(--kai-space-inline-sm);
  --kai-badge-neutral-bg: var(--kai-color-bg-sunken);
  --kai-badge-neutral-fg: var(--kai-color-fg-muted);
  --kai-badge-success-bg: var(--kai-color-status-success-subtle);
  --kai-badge-success-fg: var(--kai-color-status-success-text);
  --kai-badge-warning-bg: var(--kai-color-status-warning-subtle);
  --kai-badge-warning-fg: var(--kai-color-status-warning-text);
  --kai-badge-danger-bg: var(--kai-color-status-danger-subtle);
  --kai-badge-danger-fg: var(--kai-color-status-danger-text);
  --kai-badge-info-bg: var(--kai-color-status-info-subtle);
  --kai-badge-info-fg: var(--kai-color-status-info-text);
  --kai-button-radius: var(--kai-radius-control);
  --kai-button-padding-x: var(--kai-control-padding-x-md);
  --kai-button-padding-y: var(--kai-space-inset-sm);
  --kai-button-height: var(--kai-control-height-md);
  --kai-button-font-size: var(--kai-type-body-strong-size);
  --kai-button-font-weight: var(--kai-type-body-strong-weight);
  --kai-button-primary-bg: var(--kai-color-accent-default);
  --kai-button-primary-bg-hover: var(--kai-color-accent-hover);
  --kai-button-primary-bg-active: var(--kai-color-accent-active);
  --kai-button-primary-fg: var(--kai-color-fg-on-accent);
  --kai-button-secondary-bg: var(--kai-color-bg-surface);
  --kai-button-secondary-bg-hover: var(--kai-color-bg-sunken);
  --kai-button-secondary-fg: var(--kai-color-fg-default);
  --kai-button-secondary-border: var(--kai-color-border-control);
  --kai-button-ghost-bg: var(--kai-color-bg-surface);
  --kai-button-ghost-bg-hover: var(--kai-color-accent-subtle);
  --kai-button-ghost-fg: var(--kai-color-accent-text);
  --kai-button-ghost-border: var(--kai-color-border-default);
  --kai-button-danger-bg: var(--kai-color-status-danger-solid);
  --kai-button-danger-bg-hover: var(--kai-color-status-danger-solid-hover);
  --kai-button-danger-fg: var(--kai-color-status-danger-on-solid);
  --kai-field-height: var(--kai-control-height-lg);
  --kai-field-padding-x: var(--kai-space-inset-sm);
  --kai-field-bg: var(--kai-color-bg-surface);
  --kai-field-fg: var(--kai-color-fg-default);
  --kai-field-placeholder: var(--kai-color-fg-subtle);
  --kai-field-border: var(--kai-color-border-control);
  --kai-field-border-hover: var(--kai-color-border-control-hover);
  --kai-field-border-focus: var(--kai-color-border-focus);
  --kai-field-border-invalid: var(--kai-color-status-danger-mark);
  --kai-field-radius: var(--kai-radius-control);
  --kai-field-padding-y: var(--kai-space-inset-xs);
  --kai-field-label-size: var(--kai-type-label-size);
  --kai-shell-content-padding: var(--kai-space-inset-lg);
  --kai-shell-bg: var(--kai-color-bg-canvas);
  --kai-shell-veil: var(--kai-color-bg-veil);
  --kai-sidebar-bg: var(--kai-color-bg-surface);
  --kai-sidebar-border: var(--kai-color-border-default);
  --kai-sidebar-padding-x: var(--kai-space-inset-sm);
  --kai-sidebar-padding-y: var(--kai-space-inset-md);
  --kai-sidebar-gap: var(--kai-space-inline-xs);
  --kai-sidebar-section-gap: var(--kai-space-stack-md);
  --kai-sidebar-item-height: var(--kai-control-height-lg); /** L'altezza grande, non la media: una voce di navigazione è un bersaglio che si prende di corsa, spesso su un portatile con trackpad. 44px è anche il minimo raccomandato per il tocco. */
  --kai-sidebar-item-padding-x: var(--kai-space-inset-sm);
  --kai-sidebar-item-radius: var(--kai-radius-control);
  --kai-sidebar-item-gap: var(--kai-space-inline-md); /** Fra icona ed etichetta. */
  --kai-sidebar-item-fg: var(--kai-color-fg-default);
  --kai-sidebar-item-bg-hover: var(--kai-color-bg-sunken);
  --kai-sidebar-item-fg-active: var(--kai-color-accent-text);
  --kai-sidebar-item-bg-active: var(--kai-color-accent-subtle);
  --kai-sidebar-item-mark-active: var(--kai-color-accent-graphic); /** La barretta verticale sulla voce attiva. Colore da `graphic` e non da `text`: è un segno, e la sua promessa è 3:1, non 4.5. */
  --kai-sidebar-icon-size: var(--kai-control-icon-size-md);
  --kai-sidebar-group-fg: var(--kai-color-fg-muted);
  --kai-topbar-bg: var(--kai-color-bg-surface);
  --kai-topbar-border: var(--kai-color-border-default);
  --kai-topbar-padding-x: var(--kai-space-inset-md);
  --kai-topbar-gap: var(--kai-space-inline-md);
  --kai-page-header-gap: var(--kai-space-stack-sm);
  --kai-page-header-padding-y: var(--kai-space-inset-md);
  --kai-page-header-border: var(--kai-color-border-default);
  --kai-page-header-title-size: var(--kai-type-heading-size-lg);
  --kai-page-header-subtitle-fg: var(--kai-color-fg-muted);
  --kai-tabs-gap: var(--kai-space-inline-md);
  --kai-tabs-border: var(--kai-color-border-default);
  --kai-tabs-item-height: var(--kai-control-height-lg);
  --kai-tabs-item-padding-x: var(--kai-space-inset-sm);
  --kai-tabs-item-fg: var(--kai-color-fg-muted);
  --kai-tabs-item-fg-hover: var(--kai-color-fg-default);
  --kai-tabs-item-fg-active: var(--kai-color-accent-text);
  --kai-tabs-indicator: var(--kai-color-accent-graphic);
  --kai-tabs-indicator-size: var(--kai-border-width-focus); /** 2px: la stessa misura dell'anello di focus, così i due segni non litigano visivamente. */
  --kai-tabs-panel-padding: var(--kai-space-inset-md);
  --kai-breadcrumb-gap: var(--kai-space-inline-md);
  --kai-breadcrumb-font-size: var(--kai-type-small-size);
  --kai-breadcrumb-fg: var(--kai-color-accent-text); /** Le briciole sono link, quindi hanno il colore dei link. L'ultima non lo è: usa `fgCurrent`. */
  --kai-breadcrumb-fg-current: var(--kai-color-fg-default);
  --kai-breadcrumb-separator-fg: var(--kai-color-fg-subtle); /** Il separatore è decorazione pura: sta a 3:1, non deve portare significato ed è marcato aria-hidden. */
  --kai-menu-bg: var(--kai-color-bg-surface);
  --kai-menu-border: var(--kai-color-border-strong); /** Bordo marcato e non decorativo: su fondo chiaro il menu poggia su una superficie dello stesso colore, e senza un bordo netto il perimetro si perde. L'ombra da sola non basta a chi ha la trasparenza ridotta. */
  --kai-menu-radius: var(--kai-radius-control);
  --kai-menu-padding-y: var(--kai-space-inset-xs);
  --kai-menu-gap: var(--kai-space-inline-xs);
  --kai-menu-item-height: var(--kai-control-height-md);
  --kai-menu-item-padding-x: var(--kai-space-inset-sm);
  --kai-menu-item-fg: var(--kai-color-fg-default);
  --kai-menu-item-bg-hover: var(--kai-color-bg-sunken);
  --kai-menu-item-fg-danger: var(--kai-color-status-danger-text);
  --kai-menu-separator: var(--kai-color-border-default);
  --kai-menu-shadow-color: var(--kai-color-shadow-popover);
  --kai-surface-bg: var(--kai-color-bg-surface);
  --kai-surface-border: var(--kai-color-border-default);
  --kai-surface-radius: var(--kai-radius-surface);
  --kai-surface-padding: var(--kai-space-inset-lg);
  --kai-surface-gap: var(--kai-space-stack-md);
  --kai-grid-header-bg: var(--kai-color-bg-sunken);
  --kai-grid-header-fg: var(--kai-color-fg-muted);
  --kai-grid-row-bg: var(--kai-color-bg-surface);
  --kai-grid-row-bg-hover: var(--kai-color-accent-subtle);
  --kai-grid-row-border: var(--kai-color-border-default);
  --kai-grid-cell-padding-x: var(--kai-space-inset-sm);
  --kai-grid-cell-padding-y: var(--kai-space-inset-xs);
  --kai-button-gap: var(--kai-control-gap);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --kai-color-bg-canvas: var(--kai-palette-blue-950);
    --kai-color-bg-surface: var(--kai-palette-blue-900);
    --kai-color-bg-sunken: var(--kai-palette-neutral-950); /** Non il nero puro: il nero dentro una superficie neutral.900 legge come un buco, e il testo attenuato sopra perdeva leggibilità. Il 950 resta un incavo riconoscibile e tiene fg.muted a 5.95:1. */
    --kai-color-bg-inverse: var(--kai-palette-neutral-100);
    --kai-color-bg-veil: var(--kai-palette-shade-veil-strong); /** Più opaco che in chiaro: un velo tenue su fondo già scuro non separa i due piani, e il pannello sembra galleggiare su niente. */
    --kai-color-shadow-popover: var(--kai-palette-shade-hard); /** Su fondo scuro l'ombra deve essere più densa, non più leggera: è l'unico segnale che il menu sta sopra la superficie. */
    --kai-color-fg-default: var(--kai-palette-neutral-100);
    --kai-color-fg-muted: var(--kai-palette-neutral-400);
    --kai-color-fg-subtle: var(--kai-palette-neutral-500); /** Come in chiaro: testo grande ed elementi non testuali, non testo corrente. */
    --kai-color-fg-on-accent: var(--kai-palette-white); /** Label sempre bianca come in chiaro. Bianco su blue.600: 3.99:1, NON conforme WCAG AA per testo normale (4.5:1). Deroga di marca D16; hover 700 e active 800 superano 4.5:1. */
    --kai-color-fg-inverse: var(--kai-palette-neutral-900);
    --kai-color-border-default: var(--kai-palette-neutral-800); /** Decorativo: separatori, bordo di card e righe di tabella. */
    --kai-color-border-strong: var(--kai-palette-neutral-700);
    --kai-color-border-control: var(--kai-palette-neutral-400); /** Bordo che identifica un controllo. 4.85:1 sulla superficie scura. */
    --kai-color-border-control-hover: var(--kai-palette-neutral-300);
    --kai-color-border-focus: var(--kai-palette-blue-400);
    --kai-color-accent-default: var(--kai-palette-blue-600); /** Primario di marca #0084D5 con label bianca, identico al chiaro. Contrasto 3.99:1: limite noto per testo normale, vedi D16. */
    --kai-color-accent-hover: var(--kai-palette-blue-700);
    --kai-color-accent-active: var(--kai-palette-blue-800);
    --kai-color-accent-subtle: var(--kai-palette-blue-950);
    --kai-color-accent-text: var(--kai-palette-blue-300); /** L'accento quando è testo: 8.48:1 sulla superficie scura. */
    --kai-color-accent-graphic: var(--kai-palette-blue-600); /** Primario approvato: supera 3:1 sulla superficie scura, utilizzabile anche per icone e indicatori. */
    --kai-color-status-success-mark: var(--kai-palette-green-600); /** 3.52:1 sulla superficie scura. */
    --kai-color-status-success-solid: var(--kai-palette-green-700);
    --kai-color-status-success-solid-hover: var(--kai-palette-green-800);
    --kai-color-status-success-on-solid: var(--kai-palette-white);
    --kai-color-status-success-text: var(--kai-palette-green-400); /** 6.57:1 sulla superficie, 7.01:1 sul fondo tenue. */
    --kai-color-status-success-subtle: var(--kai-palette-green-950);
    --kai-color-status-success-border: var(--kai-palette-green-800);
    --kai-color-status-warning-mark: var(--kai-palette-yellow-600); /** Qui il 600 di marca torna utilizzabile come segno: 6.84:1 sulla superficie scura. È il caso opposto al modo chiaro. */
    --kai-color-status-warning-solid: var(--kai-palette-yellow-600);
    --kai-color-status-warning-solid-hover: var(--kai-palette-yellow-500);
    --kai-color-status-warning-on-solid: var(--kai-palette-yellow-950);
    --kai-color-status-warning-text: var(--kai-palette-yellow-400);
    --kai-color-status-warning-subtle: var(--kai-palette-yellow-950);
    --kai-color-status-warning-border: var(--kai-palette-yellow-800);
    --kai-color-status-danger-mark: var(--kai-palette-red-500); /** 500 e non 600: il 600 sulla superficie scura sta a 2.93:1, sotto il 3:1. Il 500 a 3.76:1. */
    --kai-color-status-danger-solid: var(--kai-palette-red-600);
    --kai-color-status-danger-solid-hover: var(--kai-palette-red-700);
    --kai-color-status-danger-on-solid: var(--kai-palette-white);
    --kai-color-status-danger-text: var(--kai-palette-red-400);
    --kai-color-status-danger-subtle: var(--kai-palette-red-950);
    --kai-color-status-danger-border: var(--kai-palette-red-800);
    --kai-color-status-info-mark: var(--kai-palette-blue-600); /** Il primario approvato supera 3:1 sulla superficie scura. */
    --kai-color-status-info-solid: var(--kai-palette-blue-600);
    --kai-color-status-info-solid-hover: var(--kai-palette-blue-700);
    --kai-color-status-info-on-solid: var(--kai-palette-white); /** Label bianca sul blue.600: 3.99:1, NON conforme AA per testo normale. Deroga di marca D16; soglia WCAG invariata. */
    --kai-color-status-info-text: var(--kai-palette-blue-300);
    --kai-color-status-info-subtle: var(--kai-palette-blue-950);
    --kai-color-status-info-border: var(--kai-palette-blue-800);
  }
}

:root[data-theme="dark"] {
    --kai-color-bg-canvas: var(--kai-palette-blue-950);
    --kai-color-bg-surface: var(--kai-palette-blue-900);
    --kai-color-bg-sunken: var(--kai-palette-neutral-950); /** Non il nero puro: il nero dentro una superficie neutral.900 legge come un buco, e il testo attenuato sopra perdeva leggibilità. Il 950 resta un incavo riconoscibile e tiene fg.muted a 5.95:1. */
    --kai-color-bg-inverse: var(--kai-palette-neutral-100);
    --kai-color-bg-veil: var(--kai-palette-shade-veil-strong); /** Più opaco che in chiaro: un velo tenue su fondo già scuro non separa i due piani, e il pannello sembra galleggiare su niente. */
    --kai-color-shadow-popover: var(--kai-palette-shade-hard); /** Su fondo scuro l'ombra deve essere più densa, non più leggera: è l'unico segnale che il menu sta sopra la superficie. */
    --kai-color-fg-default: var(--kai-palette-neutral-100);
    --kai-color-fg-muted: var(--kai-palette-neutral-400);
    --kai-color-fg-subtle: var(--kai-palette-neutral-500); /** Come in chiaro: testo grande ed elementi non testuali, non testo corrente. */
    --kai-color-fg-on-accent: var(--kai-palette-white); /** Label sempre bianca come in chiaro. Bianco su blue.600: 3.99:1, NON conforme WCAG AA per testo normale (4.5:1). Deroga di marca D16; hover 700 e active 800 superano 4.5:1. */
    --kai-color-fg-inverse: var(--kai-palette-neutral-900);
    --kai-color-border-default: var(--kai-palette-neutral-800); /** Decorativo: separatori, bordo di card e righe di tabella. */
    --kai-color-border-strong: var(--kai-palette-neutral-700);
    --kai-color-border-control: var(--kai-palette-neutral-400); /** Bordo che identifica un controllo. 4.85:1 sulla superficie scura. */
    --kai-color-border-control-hover: var(--kai-palette-neutral-300);
    --kai-color-border-focus: var(--kai-palette-blue-400);
    --kai-color-accent-default: var(--kai-palette-blue-600); /** Primario di marca #0084D5 con label bianca, identico al chiaro. Contrasto 3.99:1: limite noto per testo normale, vedi D16. */
    --kai-color-accent-hover: var(--kai-palette-blue-700);
    --kai-color-accent-active: var(--kai-palette-blue-800);
    --kai-color-accent-subtle: var(--kai-palette-blue-950);
    --kai-color-accent-text: var(--kai-palette-blue-300); /** L'accento quando è testo: 8.48:1 sulla superficie scura. */
    --kai-color-accent-graphic: var(--kai-palette-blue-600); /** Primario approvato: supera 3:1 sulla superficie scura, utilizzabile anche per icone e indicatori. */
    --kai-color-status-success-mark: var(--kai-palette-green-600); /** 3.52:1 sulla superficie scura. */
    --kai-color-status-success-solid: var(--kai-palette-green-700);
    --kai-color-status-success-solid-hover: var(--kai-palette-green-800);
    --kai-color-status-success-on-solid: var(--kai-palette-white);
    --kai-color-status-success-text: var(--kai-palette-green-400); /** 6.57:1 sulla superficie, 7.01:1 sul fondo tenue. */
    --kai-color-status-success-subtle: var(--kai-palette-green-950);
    --kai-color-status-success-border: var(--kai-palette-green-800);
    --kai-color-status-warning-mark: var(--kai-palette-yellow-600); /** Qui il 600 di marca torna utilizzabile come segno: 6.84:1 sulla superficie scura. È il caso opposto al modo chiaro. */
    --kai-color-status-warning-solid: var(--kai-palette-yellow-600);
    --kai-color-status-warning-solid-hover: var(--kai-palette-yellow-500);
    --kai-color-status-warning-on-solid: var(--kai-palette-yellow-950);
    --kai-color-status-warning-text: var(--kai-palette-yellow-400);
    --kai-color-status-warning-subtle: var(--kai-palette-yellow-950);
    --kai-color-status-warning-border: var(--kai-palette-yellow-800);
    --kai-color-status-danger-mark: var(--kai-palette-red-500); /** 500 e non 600: il 600 sulla superficie scura sta a 2.93:1, sotto il 3:1. Il 500 a 3.76:1. */
    --kai-color-status-danger-solid: var(--kai-palette-red-600);
    --kai-color-status-danger-solid-hover: var(--kai-palette-red-700);
    --kai-color-status-danger-on-solid: var(--kai-palette-white);
    --kai-color-status-danger-text: var(--kai-palette-red-400);
    --kai-color-status-danger-subtle: var(--kai-palette-red-950);
    --kai-color-status-danger-border: var(--kai-palette-red-800);
    --kai-color-status-info-mark: var(--kai-palette-blue-600); /** Il primario approvato supera 3:1 sulla superficie scura. */
    --kai-color-status-info-solid: var(--kai-palette-blue-600);
    --kai-color-status-info-solid-hover: var(--kai-palette-blue-700);
    --kai-color-status-info-on-solid: var(--kai-palette-white); /** Label bianca sul blue.600: 3.99:1, NON conforme AA per testo normale. Deroga di marca D16; soglia WCAG invariata. */
    --kai-color-status-info-text: var(--kai-palette-blue-300);
    --kai-color-status-info-subtle: var(--kai-palette-blue-950);
    --kai-color-status-info-border: var(--kai-palette-blue-800);
}