/**
 * Dark mode — overrides the theme.json preset color custom properties.
 * Because every color in the theme references these variables, flipping
 * data-theme="dark" on <html> re-themes the whole site cleanly.
 */

[data-theme="dark"] {
	--wp--preset--color--base: #111110;
	--wp--preset--color--base-2: #1c1c1a;
	--wp--preset--color--contrast: #f4f3ef;
	--wp--preset--color--contrast-2: #b8b8b2;
	--wp--preset--color--accent: #6e8dff;
	--wp--preset--color--accent-hover: #93aaff;
}

/* Smooth the transition when toggling. */
[data-theme] body,
[data-theme] .site-header,
[data-theme] .site-footer {
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* Ensure the editor/page background follows the token in dark mode. */
[data-theme="dark"] body {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}