/*
 * Dark mode. theme.json holds the light palette; these override the same
 * preset custom properties. Follows the OS unless the visitor picked a theme
 * with the toggle ([data-theme] on <html>). Mirrors the app's dark palette.
 */
:root {
	--cardgrip-logomark-back: #c9c2af;
	--cardgrip-logomark-front: #2f4c63;
	--cardgrip-logomark-stripe: #d98e30;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--wp--preset--color--bg: #171a1e;
		--wp--preset--color--surface: #20242a;
		--wp--preset--color--surface-muted: #20242a;
		--wp--preset--color--foreground: #eeece6;
		--wp--preset--color--heading: #ffffff;
		--wp--preset--color--muted: #b9b2a3;
		--wp--preset--color--muted-soft: #948c7c;
		--wp--preset--color--border: #3a352c;
		--wp--preset--color--hairline: #363c45;
		--wp--preset--color--border-strong: #6f6858;
		--wp--preset--color--link: #e8ab5c;
		--wp--preset--color--accent-wash: rgb(232 171 92 / 10%);
		--wp--preset--color--danger: #e5a29c;
		--wp--preset--color--danger-surface: #3a201d;
		--wp--preset--shadow--sm: 0 1px 2px rgb(0 0 0 / 40%), 0 1px 3px rgb(0 0 0 / 35%);
		--wp--preset--shadow--md: 0 4px 12px rgb(0 0 0 / 45%), 0 2px 4px rgb(0 0 0 / 35%);
		--wp--preset--shadow--lg: 0 18px 48px rgb(0 0 0 / 55%), 0 6px 16px rgb(0 0 0 / 40%);
		--cardgrip-logomark-back: #4a5058;
		--cardgrip-logomark-front: #8fb4d1;
		--cardgrip-logomark-stripe: #e8ab5c;
		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--wp--preset--color--bg: #171a1e;
	--wp--preset--color--surface: #20242a;
	--wp--preset--color--surface-muted: #20242a;
	--wp--preset--color--foreground: #eeece6;
	--wp--preset--color--heading: #ffffff;
	--wp--preset--color--muted: #b9b2a3;
	--wp--preset--color--muted-soft: #948c7c;
	--wp--preset--color--border: #3a352c;
	--wp--preset--color--hairline: #363c45;
	--wp--preset--color--border-strong: #6f6858;
	--wp--preset--color--link: #e8ab5c;
	--wp--preset--color--accent-wash: rgb(232 171 92 / 10%);
	--wp--preset--color--danger: #e5a29c;
	--wp--preset--color--danger-surface: #3a201d;
	--wp--preset--shadow--sm: 0 1px 2px rgb(0 0 0 / 40%), 0 1px 3px rgb(0 0 0 / 35%);
	--wp--preset--shadow--md: 0 4px 12px rgb(0 0 0 / 45%), 0 2px 4px rgb(0 0 0 / 35%);
	--wp--preset--shadow--lg: 0 18px 48px rgb(0 0 0 / 55%), 0 6px 16px rgb(0 0 0 / 40%);
	--cardgrip-logomark-back: #4a5058;
	--cardgrip-logomark-front: #8fb4d1;
	--cardgrip-logomark-stripe: #e8ab5c;
	color-scheme: dark;
}