/*
 * Tizpa — design tokens.
 * Colours, type, spacing and radii for light and dark themes.
 */

@font-face {
	font-family: "KPL Vazirmatn";
	src: url("../../fonts/vazirmatn/Vazirmatn-Variable.woff2") format("woff2-variations"),
		url("../../fonts/vazirmatn/Vazirmatn-Variable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

.kplso-app {
	/* Brand (overridden per user via inline style). */
	--kplso-accent: #4f46e5;
	--kplso-accent-2: #7c3aed;
	--kplso-accent-soft: color-mix(in srgb, var(--kplso-accent) 11%, transparent);
	--kplso-accent-line: color-mix(in srgb, var(--kplso-accent) 32%, transparent);
	--kplso-accent-text: color-mix(in srgb, var(--kplso-accent) 82%, #000);
	--kplso-gradient: linear-gradient(135deg, var(--kplso-accent), var(--kplso-accent-2));

	/* Surfaces. */
	--kplso-bg: #f3f4f9;
	--kplso-surface: #ffffff;
	--kplso-surface-2: #f7f8fc;
	--kplso-surface-3: #eef0f7;
	--kplso-border: #e3e6ef;
	--kplso-border-strong: #cfd4e2;

	/* Text. */
	--kplso-text: #141833;
	--kplso-text-2: #50566f;
	--kplso-text-3: #868ca4;

	/* Sidebar is dark in both themes. */
	--kplso-side-bg: #0e1124;
	--kplso-side-bg-2: #171b35;
	--kplso-side-text: #c5c9de;
	--kplso-side-muted: #7a80a0;

	/* Status. */
	--kplso-good: #0f9f5a;
	--kplso-good-soft: #e3f6ec;
	--kplso-warn: #c96f05;
	--kplso-warn-soft: #fdf1df;
	--kplso-bad: #d92d3a;
	--kplso-bad-soft: #fde7e9;
	--kplso-info: #2563eb;
	--kplso-info-soft: #e5edfe;

	/* Shape. */
	--kplso-radius-lg: 18px;
	--kplso-radius: 14px;
	--kplso-radius-sm: 10px;
	--kplso-radius-xs: 7px;
	--kplso-shadow: 0 1px 2px rgba(17, 22, 51, .04), 0 4px 16px rgba(17, 22, 51, .05);
	--kplso-shadow-lg: 0 18px 48px rgba(17, 22, 51, .16);

	/* Spacing (density aware). */
	--kplso-gap: 20px;
	--kplso-pad: 24px;
	--kplso-field-pad: 18px;

	/* Type. */
	--kplso-font: "KPL Vazirmatn", Vazirmatn, Tahoma, system-ui, -apple-system, "Segoe UI", sans-serif;
	--kplso-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--kplso-ease: cubic-bezier(.2, .8, .2, 1);
}

.kplso-app[data-density="compact"] {
	--kplso-gap: 14px;
	--kplso-pad: 18px;
	--kplso-field-pad: 13px;
}

/* Dark theme, explicit choice. */
.kplso-app[data-theme="dark"] {
	--kplso-bg: #0a0c19;
	--kplso-surface: #131629;
	--kplso-surface-2: #181c33;
	--kplso-surface-3: #1f2440;
	--kplso-border: #262b48;
	--kplso-border-strong: #343a5c;
	--kplso-text: #eceefa;
	--kplso-text-2: #aab0c9;
	--kplso-text-3: #767d9c;
	--kplso-side-bg: #070915;
	--kplso-side-bg-2: #11142a;
	--kplso-accent-soft: color-mix(in srgb, var(--kplso-accent) 22%, transparent);
	--kplso-accent-text: color-mix(in srgb, var(--kplso-accent) 55%, #fff);
	--kplso-good-soft: rgba(15, 159, 90, .16);
	--kplso-warn-soft: rgba(201, 111, 5, .18);
	--kplso-bad-soft: rgba(217, 45, 58, .18);
	--kplso-info-soft: rgba(37, 99, 235, .18);
	--kplso-good: #34d399;
	--kplso-warn: #fbbf24;
	--kplso-bad: #f87171;
	--kplso-info: #60a5fa;
	--kplso-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
	color-scheme: dark;
}

/* Dark theme, following the operating system. */
@media (prefers-color-scheme: dark) {
	.kplso-app[data-theme="auto"] {
		--kplso-bg: #0a0c19;
		--kplso-surface: #131629;
		--kplso-surface-2: #181c33;
		--kplso-surface-3: #1f2440;
		--kplso-border: #262b48;
		--kplso-border-strong: #343a5c;
		--kplso-text: #eceefa;
		--kplso-text-2: #aab0c9;
		--kplso-text-3: #767d9c;
		--kplso-side-bg: #070915;
		--kplso-side-bg-2: #11142a;
		--kplso-accent-soft: color-mix(in srgb, var(--kplso-accent) 22%, transparent);
		--kplso-accent-text: color-mix(in srgb, var(--kplso-accent) 55%, #fff);
		--kplso-good-soft: rgba(15, 159, 90, .16);
		--kplso-warn-soft: rgba(201, 111, 5, .18);
		--kplso-bad-soft: rgba(217, 45, 58, .18);
		--kplso-info-soft: rgba(37, 99, 235, .18);
		--kplso-good: #34d399;
		--kplso-warn: #fbbf24;
		--kplso-bad: #f87171;
		--kplso-info: #60a5fa;
		--kplso-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
		color-scheme: dark;
	}
}