:root {
	--font: Inconsolata, monospace;
	--font-size-base: clamp(1rem,0.96rem + 0.22vw, 1.125rem);
	--width: min(100ch, 100vw - 2rem);

	--background: oklch(100% 0 0);
	--background-shaded: oklch(0.99 0 0);
	--text: oklch(26.97% 0 0);
	--meta: oklch(38.29% 0 271.15);
	--border-color: oklch(75.7% 0 0);
	--box-shadow: 0 12px 24px 0 oklch(0% 0 0 / 20%);

	--white: #ffffff;
	--black: oklch(26.97% 0 0);

	--alert-note: oklch(0.5399 0.1906 257.48);
	--alert-tip: oklch(0.5244 0.1401 148.04);
	--alert-important: oklch(0.5631 0.2069 294.97);
	--alert-warning: oklch(0.5542 0.1169 75.01);
	--alert-caution: oklch(0.5567 0.2056 24.61);

	--z-index-dialog: 30;

	--color-1: #6d28d9;
	--color-2: #1b739c;
	--color-3: #16a34a;
	--color-4: #ea580c;
	--color-5: #d6f107;
	--primary-50: #f3effb;
	--primary-100: #dccdf3;
	--primary-200: #c5abed;
	--primary-300: #ad89e7;
	--primary-400: #9565e2;
	--primary-500: #6d28d9;
	--primary-600: #5a1cbc;
	--primary-700: #49159a;
	--primary-800: #380f78;
	--primary-900: #270954;
}

@media (prefers-color-scheme: light) {
	:root {
		--background: oklch(100% 0 0);
		--background-shaded: oklch(0.99 0 0);
		--text: oklch(26.97% 0 0);
		--meta: oklch(38.29% 0 271.15);
		--border-color: oklch(75.7% 0 0);
		--box-shadow: 0 12px 24px 0 oklch(0% 0 0 / 20%);
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--background: oklch(26.03% 0 0);
		--background-shaded: oklch(0.2062 0 0);
		--text: oklch(95.51% 0 0);
		--meta: oklch(91.58% 0 0);
		--border-color: oklch(44.7% 0 0);
		--box-shadow: 0 12px 24px 0 oklch(47.41% 0 0 / 20%);

		--color-1: #8e52ee;
		--color-2: #0ea5e9;
		--color-3: #16a34a;
		--color-4: #ea580c;
		--color-5: #d6f107;
	}
}

[data-theme*='dark'] {
	--background: oklch(26.03% 0 0);
	--background-shaded: oklch(0.2062 0 0);
	--text: oklch(95.51% 0 0);
	--meta: oklch(91.58% 0 0);
	--border-color: oklch(44.7% 0 0);
	--box-shadow: 0 12px 24px 0 oklch(47.41% 0 0 / 20%);

	--color-1: #8e52ee;
	--color-2: #0ea5e9;
	--color-3: #16a34a;
	--color-4: #ea580c;
	--color-5: #d6f107;
}

[data-theme*='light'] {
	--background: oklch(100% 0 0);
	--background-shaded: oklch(0.99 0 0);
	--text: oklch(26.97% 0 0);
	--meta: oklch(38.29% 0 271.15);
	--border-color: oklch(75.7% 0 0);
	--box-shadow: 0 12px 24px 0 oklch(0% 0 0 / 20%);
}