/***************************************
			Color scheme variables
****************************************/

:root {
	color-scheme: light dark;
	--base-high-darkmode: #0a0a0a;
	--base-darkmode: #141414;
	--base-low-darkmode: #191919;
	--contrast-low-darkmode: #a1a1a1;
	--contrast-darkmode: #c4c4c4;
	--contrast-high-darkmode: #fff;
	--primary-base-darkmode: hsl(var(--primary-h) var(--primary-s) 19%);
	--primary-darkmode: var(--primary-hsl);
	--primary-contrast-darkmode: hsl(var(--primary-h) var(--primary-s) 75%);
	--secondary-base-darkmode: hsl(var(--secondary-h) var(--secondary-s) 13%);
	--secondary-darkmode: var(--secondary-hsl);
	--secondary-contrast-darkmode: hsl(var(--secondary-h) var(--secondary-s) 75%);
	--accent-darkmode: var(--accent-hsl);
	--on-primary-darkmode: #fff;
	--on-secondary-darkmode: #fff;
	--on-accent-darkmode: #000;
}

@media (prefers-color-scheme: dark)  {
	html:not([theme="light"]) {
		--wp--preset--color--base-high: var(--base-high-darkmode);
		--wp--preset--color--base: var(--base-darkmode);
		--wp--preset--color--base-low: var(--base-low-darkmode);
		--wp--preset--color--contrast-low: var(--contrast-low-darkmode);
		--wp--preset--color--contrast: var(--contrast-darkmode);
		--wp--preset--color--contrast-high: var(--contrast-high-darkmode);
		--wp--preset--color--primary-base: var(--primary-base-darkmode);
		--wp--preset--color--primary: var(--primary-darkmode);
		--wp--preset--color--primary-contrast: var(--primary-contrast-darkmode);
		--wp--preset--color--secondary-base: var(--secondary-base-darkmode);
		--wp--preset--color--secondary: var(--secondary-darkmode);
		--wp--preset--color--secondary-contrast: var(--secondary-contrast-darkmode);
		--wp--preset--color--accent: var(--accent-darkmode);
		--wp--preset--color--on-primary: var(--on-primary-darkmode);
		--wp--preset--color--on-secondary: var(--on-secondary-darkmode);
	}
}

html[theme="dark"] {
		--wp--preset--color--base-high: var(--base-high-darkmode);
		--wp--preset--color--base: var(--base-darkmode);
		--wp--preset--color--base-low: var(--base-low-darkmode);
		--wp--preset--color--contrast-low: var(--contrast-low-darkmode);
		--wp--preset--color--contrast: var(--contrast-darkmode);
		--wp--preset--color--contrast-high: var(--contrast-high-darkmode);
		--wp--preset--color--primary-base: var(--primary-base-darkmode);
		--wp--preset--color--primary: var(--primary-darkmode);
		--wp--preset--color--primary-contrast: var(--primary-contrast-darkmode);
		--wp--preset--color--secondary-base: var(--secondary-base-darkmode);
		--wp--preset--color--secondary: var(--secondary-darkmode);
		--wp--preset--color--secondary-contrast: var(--secondary-contrast-darkmode);
		--wp--preset--color--accent: var(--accent-darkmode);
		--wp--preset--color--on-primary: var(--on-primary-darkmode);
		--wp--preset--color--on-secondary: var(--on-secondary-darkmode);
}