/**
 * Klingo Kit — token del sistema di design.
 * I valori di brand (blu, font, raggi, container) arrivano dal pannello
 * impostazioni e vengono stampati inline su :root; qui stanno i default e
 * le due palette tema.
 */

:root {
	--kk-blue: #2f54f1;
	--kk-blue-light: #5b7bff;
	--kk-blue-deep: #040957;

	--kk-font-display: 'Parkinsans', 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--kk-font-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

	--kk-sp-1: 4px;
	--kk-sp-2: 8px;
	--kk-sp-3: 12px;
	--kk-sp-4: 16px;
	--kk-sp-5: 24px;
	--kk-sp-6: 32px;
	--kk-sp-7: 48px;
	--kk-sp-8: 64px;
	--kk-sp-9: 96px;

	--kk-radius-lg: 24px;
	--kk-radius-md: 16px;
	--kk-radius-pill: 999px;
	--kk-ease: cubic-bezier(.16, .84, .44, 1);
	--kk-container: 1180px;
}

/* ---------- Tema scuro ---------- */

html[data-kk-theme="dark"] {
	--kk-bg: #07070c;
	--kk-bg-elevated: #0e0f18;
	--kk-surface: #12131e;
	--kk-border: rgba(255, 255, 255, .08);
	--kk-text-1: #f4f4f6;
	--kk-text-2: rgba(244, 244, 246, .64);
	--kk-text-3: rgba(244, 244, 246, .4);
	--kk-glass: rgba(18, 19, 30, .6);
	--kk-orb-1: rgba(47, 84, 241, .55);
	--kk-orb-2: rgba(4, 9, 87, .65);
	--kk-shadow: rgba(2, 3, 15, .7);
	--kk-ph-bg: rgba(255, 255, 255, .04);
	--kk-ph-border: rgba(255, 255, 255, .16);
	--kk-hover-bg: rgba(255, 255, 255, .06);
	--kk-chip-bg: rgba(127, 127, 127, .12);
	color-scheme: dark;
}

/* ---------- Tema chiaro ---------- */

html[data-kk-theme="light"] {
	--kk-bg: #f6f7fb;
	--kk-bg-elevated: #ffffff;
	--kk-surface: #ffffff;
	--kk-border: rgba(4, 9, 87, .08);
	--kk-text-1: #0c0d16;
	--kk-text-2: rgba(12, 13, 22, .64);
	--kk-text-3: rgba(12, 13, 22, .42);
	--kk-glass: rgba(255, 255, 255, .7);
	--kk-orb-1: rgba(47, 84, 241, .16);
	--kk-orb-2: rgba(4, 9, 87, .10);
	--kk-shadow: rgba(4, 9, 87, .12);
	--kk-ph-bg: rgba(4, 9, 87, .035);
	--kk-ph-border: rgba(4, 9, 87, .16);
	--kk-hover-bg: rgba(4, 9, 87, .04);
	--kk-chip-bg: rgba(4, 9, 87, .05);
	color-scheme: light;
}

/* Sfondo e testo di base: applicati solo se attivi dal pannello, per non
   entrare in conflitto con temi che gestiscono già il body. */

html.kk-paint-body body {
	background: var(--kk-bg);
	color: var(--kk-text-1);
	font-family: var(--kk-font-display);
}

/* Il cambio tema non deve animare tutti i colori della pagina. */
html.kk-theme-switching *,
html.kk-theme-switching *::before,
html.kk-theme-switching *::after {
	transition: none !important;
}