/*
 * Colour modes (front end only).
 * Default = Auto: follows the visitor's system via prefers-color-scheme.
 * The toggle sets <html data-theme="light|dark"> to override it; Auto removes the attribute.
 * Presets are redefined on :root and body because WordPress may declare them on either.
 */

:root {
	color-scheme: light dark;
}

:root[data-theme="light"] {
	color-scheme: light;
}

:root[data-theme="dark"],
:root[data-theme="dark"] body {
	color-scheme: dark;
	--wp--preset--color--base: #1f1812;
	--wp--preset--color--surface: #2f2618;
	--wp--preset--color--plate: #271e15;
	--wp--preset--color--contrast: #efe3c8;
	--wp--preset--color--muted: #b9a684;
	--wp--preset--color--line: #4a3a26;
	--wp--preset--color--primary: #e08a46;
	--wp--preset--color--accent: #8a5d2e;
	--wp--preset--color--on-primary: #1f1812;
	--wp--preset--color--sun: #e8b75a;
	--wp--preset--color--ember: #e0703f;
	--wp--custom--shadow: rgba(0, 0, 0, 0.45);
}

:root[data-theme="dark"] .kaladorn-hero h1 {
	color: var(--wp--preset--color--primary);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]),
	:root:not([data-theme="light"]) body {
		--wp--preset--color--base: #1f1812;
		--wp--preset--color--surface: #2f2618;
		--wp--preset--color--plate: #271e15;
		--wp--preset--color--contrast: #efe3c8;
		--wp--preset--color--muted: #b9a684;
		--wp--preset--color--line: #4a3a26;
		--wp--preset--color--primary: #e08a46;
		--wp--preset--color--accent: #8a5d2e;
		--wp--preset--color--on-primary: #1f1812;
		--wp--preset--color--sun: #e8b75a;
		--wp--preset--color--ember: #e0703f;
		--wp--custom--shadow: rgba(0, 0, 0, 0.45);
	}

	:root:not([data-theme="light"]) .kaladorn-hero h1 {
		color: var(--wp--preset--color--primary);
	}
}