@property --shadow-offset-x {
	syntax: '<length>';
	inherits: true;
	initial-value: .5rem;
}
@property --shadow-offset-y {
	syntax: '<length>';
	inherits: true;
	initial-value: .5rem;
}
@property --shadow-blur {
	syntax: '<length>';
	inherits: true;
	initial-value: .05rem;
}
@property --shadow-color {
	syntax: '<color>';
	inherits: true;
	initial-value: black;
}

:root, ::-webkit-scrollbar, ::selection {
	--bg-dark: light-dark(hsl(0 4% 83%),hsl(0 0% 10%));
	--bg: light-dark(hsl(0 0% 90%),#222);
	--bg-scrollbar: light-dark(#ccc,#333);
	--fg-scrollbar: light-dark(#999,#666);
	--fg: light-dark(hsl(0deg 3% 20%),hsl(0deg 3% 80%));
	--fg-light: light-dark(#333,#666);
	--accent: light-dark(hsl(204 100% 50%),#6effb4);
	--accent-bg: light-dark(hsl(204 100% 70% / .3),rgba(110,255,180,.1));
	--hover-bg: light-dark(rgba(0, 0, 0, .1),rgba(255,255,255,.7));

	--fg-menu: var(--fg);
	--bg-menu: light-dark(hsl(0 5% 90% / 1),hsl(240 8% 28%));
	--bg-menu-active: hsl(from var(--bg-menu) h s calc(l + 5));
	--bg-input: light-dark(
		color-mix(in hsl, var(--bg-menu), white 10%),
		color-mix(in hsl, var(--bg-menu), black 20%)
	);

	--border-radius: 0;
	--shadow-color: light-dark(rgba(0,0,32,.3),rgba(0,0,0,.5));
	--shadow-offset-x : .5rem;
	--shadow-offset-y : .5rem;
	--shadow-blur : .05rem;
}
@media (prefers-color-scheme: dark) {
	:root, ::-webkit-scrollbar, ::selection {
		color-scheme: dark;
	}
}
[theme="dark"] { color-scheme: dark !important; }
[theme="light"] { color-scheme: light !important; }