: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;
	--accent:       #7c5cff;
	--accent-2:     #b18cff;
	--accent-grad:  linear-gradient(135deg, #7c5cff 0%, #b18cff 100%);
	--border:       #2a2a36;
	--danger:       #ef4444;
	--player-h:     76px;
	--nav-h:        62px;

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

* { 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; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

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