/*
 * Verakase design tokens.
 *
 * The only place raw colour values live. theme.json maps its palette onto
 * these variables (--wp--preset--color--ground: var(--vk-ground), ...), so
 * block colours, global styles and components all follow the active mode.
 *
 * Mode resolution:
 *   1. Dark is the default.
 *   2. With no manual choice, prefers-color-scheme: light switches to light.
 *   3. <html data-theme="light|dark"> (set by the header toggle and restored
 *      before first paint by the inline script in <head>) overrides both.
 *
 * The light block appears twice on purpose: a media query cannot share a rule
 * with an attribute selector. Keep the two in sync.
 */

:root {
	color-scheme: dark;
	--vk-ground: #0A1220;
	--vk-surface: #111C2E;
	--vk-line: #22324A;
	--vk-text: #E8EEF6;
	--vk-muted: #93A4BC;
	--vk-accent: #45B8FF;
	--vk-accent-ink: #07101C;
	--vk-alert: #FF6B5E;
	--vk-amber: #E6B450;

	/* Derived, mode-independent. */
	--vk-accent-hover: color-mix(in srgb, var(--vk-accent) 86%, var(--vk-text));
	--vk-radius: 4px;
	--vk-hair: 1px;

	/* Display switches for mode-specific assets (logo files, toggle icons). */
	--vk-show-on-dark: block;
	--vk-show-on-light: none;
}

@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) {
		color-scheme: light;
		--vk-ground: #F5F8FC;
		--vk-surface: #FFFFFF;
		--vk-line: #D5DEEA;
		--vk-text: #0A1220;
		--vk-muted: #4A5B73;
		--vk-accent: #0B6BB3;
		--vk-accent-ink: #FFFFFF;
		--vk-alert: #C8382B;
		--vk-amber: #B7791F;
		--vk-show-on-dark: none;
		--vk-show-on-light: block;
	}
}

:root[data-theme="light"] {
	color-scheme: light;
	--vk-ground: #F5F8FC;
	--vk-surface: #FFFFFF;
	--vk-line: #D5DEEA;
	--vk-text: #0A1220;
	--vk-muted: #4A5B73;
	--vk-accent: #0B6BB3;
	--vk-accent-ink: #FFFFFF;
	--vk-alert: #C8382B;
	--vk-amber: #B7791F;
	--vk-show-on-dark: none;
	--vk-show-on-light: block;
}