/* var */
:root {
	color-scheme: light dark;

	/* borders */
	--border: light-dark(hsl(0 0% 0% / 0.25), hsl(0 0% 100% / 0.25));
	--border-subtle: light-dark(hsl(0 0% 0% / 0.1), hsl(0 0% 100% / 0.1));

	/* backgrounds */
	--bg-secondary: light-dark(hsl(0 0% 0% / 0.05), hsl(0 0% 100% / 0.05));
	--bg-tertiary: light-dark(hsl(0 0% 0% / 0.1), hsl(0 0% 100% / 0.1));
	--bg-context-menu: light-dark(hsl(0 0% 100% / 0.75), hsl(0 0% 10% / 0.75));

	/* state colors */
	--playing: hsl(200 90% 50% / 0.25);
	--playing-pulse: hsl(200 90% 50% / 0.5);
	--error-color: hsl(0 80% 50%);

	/* cover art sizing (customize via settings) */
	--art-album: 32px;
	--art-artist: 24px;
	--art-song: 16px;
	--art-now-playing: 128px;
}

/* resets */
* {
	margin: 0;
	padding: 0;
}

/* document */
html {
	font-size: 0.8125rem;
}

body {
	font-family: system-ui, sans-serif;
	overflow: hidden;
	user-select: none;
	-webkit-user-select: none;
}

/* use default cursor */
a,
button,
[role="button"] {
	cursor: default;
}

/* MEDIA QUERIES */
@media (pointer: coarse) {
	html {
		font-size: 1rem;
	}
}