/*
 * basically its like
 * default: light mode
 * 	- if "toggle theme" checked: dark mode
 * BUT, if user has browser/os "dark theme" preference:
 * 	default: dark mode
 * 		if "toggle theme" checked: light mode
 * */
:root {
	/* ROSE PINE DAWN COLOR SCHEME */
	/* Color Theme: https://rosepinetheme.com/palette/ingredients/#rose-pine-dawn */
	--rp-base: #faf4ed;
	--rp-surface: #fffaf3;
	--rp-overlay: #f2e9e1;
	--rp-muted: #9893a5;
	--rp-subtle: #797593;
	--rp-text: #575279;
	--rp-love: #b4637a;
	--rp-gold: #ea9d34;
	--rp-rose: #d7827e;
	--rp-pine: #286983;
	--rp-foam: #56949f;
	--rp-iris: #907aa9;
	--rp-highlight-low: #f4ede8;
	--rp-highlight-med: #dfdad9;
	--rp-highlight-high: #cecacd;
}

body:has(#theme-toggle:checked) {
	/* dark/light theme toggle */
	/* ROSE PINE MOON COLOR SCHEME */
	/* Color Theme: https://rosepinetheme.com/palette/ingredients/#rose-pine-moon */
	--rp-base: #232136;
	--rp-surface: #2a273f;
	--rp-overlay: #393552;
	--rp-muted: #6e6a86;
	--rp-subtle: #908caa;
	--rp-text: #e0def4;
	--rp-love: #eb6f92;
	--rp-gold: #f6c177;
	--rp-rose: #ea9a97;
	--rp-pine: #3e8fb0;
	--rp-foam: #9ccfd8;
	--rp-iris: #c4a7e7;
	--rp-highlight-low: #2a283e;
	--rp-highlight-med: #44415a;
	--rp-highlight-high: #56526e;
}



@media (prefers-color-scheme: dark) {
	:root {
		/* default dark theme bc we're cool like that */
		/* ROSE PINE MOON COLOR SCHEME */
		/* Color Theme: https://rosepinetheme.com/palette/ingredients/#rose-pine-moon */
		--rp-base: #232136;
		--rp-surface: #2a273f;
		--rp-overlay: #393552;
		--rp-muted: #6e6a86;
		--rp-subtle: #908caa;
		--rp-text: #e0def4;
		--rp-love: #eb6f92;
		--rp-gold: #f6c177;
		--rp-rose: #ea9a97;
		--rp-pine: #3e8fb0;
		--rp-foam: #9ccfd8;
		--rp-iris: #c4a7e7;
		--rp-highlight-low: #2a283e;
		--rp-highlight-med: #44415a;
		--rp-highlight-high: #56526e;
	}

	body:has(#theme-toggle:checked) {
		/* dark/light theme toggle */
		/* ROSE PINE DAWN COLOR SCHEME */
		/* Color Theme: https://rosepinetheme.com/palette/ingredients/#rose-pine-dawn */
		--rp-base: #faf4ed;
		--rp-surface: #fffaf3;
		--rp-overlay: #f2e9e1;
		--rp-muted: #9893a5;
		--rp-subtle: #797593;
		--rp-text: #575279;
		--rp-love: #b4637a;
		--rp-gold: #ea9d34;
		--rp-rose: #d7827e;
		--rp-pine: #286983;
		--rp-foam: #56949f;
		--rp-iris: #907aa9;
		--rp-highlight-low: #f4ede8;
		--rp-highlight-med: #dfdad9;
		--rp-highlight-high: #cecacd;
	}
}