/* Design tokens. Light by default; dark follows the OS unless the visitor picked a theme with the toggle (data-theme). */
:root {
	color-scheme: light;
	--vibo-bg: #fbfaf8;
	--vibo-surface: #ffffff;
	--vibo-text: #1a1a1f;
	--vibo-muted: #5b5b66;
	--vibo-border: #e5e3df;
	--vibo-border-strong: #c9c6c0;
	--vibo-accent: #5237e0;
	--vibo-on-accent: #ffffff;
	--vibo-ok: #17703a;
	--vibo-warn: #8a5a00;
	--vibo-bad: #b3261e;
	--vibo-radius: 12px;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--vibo-bg: #0f0f14;
		--vibo-surface: #181820;
		--vibo-text: #f2f2f5;
		--vibo-muted: #a9a9b6;
		--vibo-border: #2a2a35;
		--vibo-border-strong: #43434f;
		--vibo-accent: #a898ff;
		--vibo-on-accent: #0f0f14;
		--vibo-ok: #5fd08a;
		--vibo-warn: #f0b955;
		--vibo-bad: #ff8a80;
	}
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--vibo-bg: #0f0f14;
	--vibo-surface: #181820;
	--vibo-text: #f2f2f5;
	--vibo-muted: #a9a9b6;
	--vibo-border: #2a2a35;
	--vibo-border-strong: #43434f;
	--vibo-accent: #a898ff;
	--vibo-on-accent: #0f0f14;
	--vibo-ok: #5fd08a;
	--vibo-warn: #f0b955;
	--vibo-bad: #ff8a80;
}