:root {
	/* Dark music theme tokens */
	--bg:           #0e0e12;
	--bg-grad-top:  #1c1830;
	--surface:      #16161d;
	--surface-2:    #1f1f29;
	--surface-3:    #2a2a36;
	--text:         #f4f4f6;
	--text-dim:     #a0a0ad;
	--text-faint:   #6c6c79;
	--color-primary:       #7c5cff;
	--color-primary-on-surface:     #b18cff;
	--color-primary-grad:  linear-gradient(135deg, #7c5cff 0%, #b18cff 100%);
	--border:       #2a2a36;
	--danger:       #ef4444;
	--nav-bg:       rgba(14, 14, 18, 0.92);
	--player-h:     76px;
	--nav-h:        62px;

	/* Map WebAwesome tokens to the dark palette */
	--wa-color-brand-fill-loud: var(--color-primary);
	--wa-color-surface-default: var(--surface-2);
	color-scheme: dark;
}

/* Light theme tokens. Applied when the user picks Light, or when the OS prefers
   light and they haven't forced Dark (the media query below). Keep in sync with
   THEME_COLOR in js/theme.js. */
:root[data-theme="light"] {
	--bg:           #f5f5fa;
	--bg-grad-top:  #e9e4ff;
	--surface:      #ffffff;
	--surface-2:    #f1f0f7;
	--surface-3:    #e6e4f0;
	--text:         #16161d;
	--text-dim:     #565664;
	--text-faint:   #9090a0;
	--color-primary:       #6d4dff;
	--color-primary-on-surface:     #5a3de0;
	--color-primary-grad:  linear-gradient(135deg, #6d4dff 0%, #9a7cff 100%);
	--border:       #e2e0ec;
	--nav-bg:       rgba(245, 245, 250, 0.9);
	--wa-color-surface-default: var(--surface-2);
	color-scheme: light;
}

@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) {
		--bg:           #f5f5fa;
		--bg-grad-top:  #e9e4ff;
		--surface:      #ffffff;
		--surface-2:    #f1f0f7;
		--surface-3:    #e6e4f0;
		--text:         #16161d;
		--text-dim:     #565664;
		--text-faint:   #9090a0;
		--color-primary:       #6d4dff;
		--color-primary-on-surface:     #5a3de0;
		--color-primary-grad:  linear-gradient(135deg, #6d4dff 0%, #9a7cff 100%);
		--border:       #e2e0ec;
		--nav-bg:       rgba(245, 245, 250, 0.9);
		--wa-color-surface-default: var(--surface-2);
		color-scheme: light;
	}
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-family, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	-webkit-font-smoothing: antialiased;
	overscroll-behavior-y: none;
}

body {
	background:
		radial-gradient(1200px 480px at 50% -10%, var(--bg-grad-top), transparent 70%),
		var(--bg);
	min-height: 100dvh;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img { display: block; }

/* No custom ::-webkit-scrollbar styling: defining it opts Blink/WebKit out of
   native overlay (auto-hiding) scrollbars and forces always-visible classic
   ones. `color-scheme: dark` (see :root) already gives us dark native bars that
   auto-hide on mobile and look right on desktop. */

.muted { color: var(--text-dim); }
.truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}