feat: add light/dark theme support with CSS variables (#441)

- Replace hardcoded colors across 35 files with CSS custom properties
- Add theme switcher (dark/light/system) in settings menu
- Define semantic color tokens: bg-*, border-*, text-*, accent-*
- Light theme adapts all UI elements including tracks, header, tags
- Remove zen mode feature (was only hiding a few elements)
- Use color-mix() for derived colors to maintain consistency

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude <[e-mail]>

docs/frontend/keyboard-shortcuts.md

···
 
 ### Q - toggle queue
 
-**location**: `frontend/src/routes/+layout.svelte:27-48`
+**location**: `frontend/src/routes/+layout.svelte`
 
 toggles the queue sidebar visibility.
 
···
 - **shift + arrow** - navigate queue
 - **/** - focus search (common pattern)
 - **esc** - close overlays/modals
+- **T** - cycle theme (dark/light/system)
 
 ## design principles
 

frontend/src/lib/components/AlbumSelect.svelte

···
 	.album-input {
 		width: 100%;
 		padding: 0.75rem;
-		background: #0a0a0a;
-		border: 1px solid #333;
+		background: var(--bg-primary);
+		border: 1px solid var(--border-default);
 		border-radius: 4px;
-		color: white;
+		color: var(--text-primary);
 		font-size: 1rem;
 		font-family: inherit;
 		transition: all 0.2s;
···
 
 	.album-input:focus {
 		outline: none;
-		border-color: #3a7dff;
+		border-color: var(--accent);
 	}
 
 	.album-input:disabled {
···
 		width: 100%;
 		max-height: 300px;
 		overflow-y: auto;
-		background: #1a1a1a;
-		border: 1px solid #333;
+		background: var(--bg-tertiary);
+		border: 1px solid var(--border-default);
 		border-radius: 4px;
 		margin-top: 0.25rem;
 		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
···
 	}
 
 	.album-results::-webkit-scrollbar-track {
-		background: #0a0a0a;
+		background: var(--bg-primary);
 		border-radius: 4px;
 	}
 
 	.album-results::-webkit-scrollbar-thumb {
-		background: #333;
+		background: var(--border-default);
 		border-radius: 4px;
 	}
 
 	.album-results::-webkit-scrollbar-thumb:hover {
-		background: #444;
+		background: var(--border-emphasis);
 	}
 
 	/* firefox scrollbar */
 	.album-results {
 		scrollbar-width: thin;
-		scrollbar-color: #333 #0a0a0a;
+		scrollbar-color: var(--border-default) var(--bg-primary);
 	}
 
 	.album-result-item {
···
 		padding: 0.75rem;
 		background: transparent;
 		border: none;
-		border-bottom: 1px solid #2a2a2a;
-		color: white;
+		border-bottom: 1px solid var(--border-subtle);
+		color: var(--text-primary);
 		text-align: left;
 		font-family: inherit;
 		cursor: pointer;
···
 	}
 
 	.album-result-item:hover {
-		background: #222;
+		background: var(--bg-hover);
 	}
 
 	.album-result-item.exact-match {
-		background: rgba(58, 125, 255, 0.1);
-		border-left: 3px solid #3a7dff;
+		background: color-mix(in srgb, var(--accent) 10%, transparent);
+		border-left: 3px solid var(--accent);
 	}
 
 	.album-info {
···
 
 	.album-title {
 		font-weight: 500;
-		color: #e8e8e8;
+		color: var(--text-primary);
 		margin-bottom: 0.125rem;
 		overflow: hidden;
 		text-overflow: ellipsis;
···
 
 	.album-stats {
 		font-size: 0.85rem;
-		color: #888;
+		color: var(--text-tertiary);
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
···
 	.similar-hint {
 		margin-top: 0.5rem;
 		font-size: 0.85rem;
-		color: #ff9800;
+		color: var(--warning);
 		font-style: italic;
 		margin-bottom: 0;
 	}

frontend/src/lib/components/BrokenTracks.svelte

···
 
 	.broken-tracks-section {
 		margin-bottom: 3rem;
-		background: rgba(255, 152, 0, 0.05);
-		border: 1px solid rgba(255, 152, 0, 0.2);
+		background: color-mix(in srgb, var(--warning) 5%, transparent);
+		border: 1px solid color-mix(in srgb, var(--warning) 20%, transparent);
 		border-radius: 8px;
 		padding: 1.5rem;
 	}
···
 	.section-header h2 {
 		font-size: 1.5rem;
 		margin: 0;
-		color: #ff9800;
+		color: var(--warning);
 	}
 
 	.restore-all-btn {
 		padding: 0.5rem 1rem;
-		background: rgba(255, 152, 0, 0.2);
-		border: 1px solid rgba(255, 152, 0, 0.5);
+		background: color-mix(in srgb, var(--warning) 20%, transparent);
+		border: 1px solid color-mix(in srgb, var(--warning) 50%, transparent);
 		border-radius: 4px;
-		color: #ff9800;
+		color: var(--warning);
 		font-family: inherit;
 		font-size: 0.9rem;
 		font-weight: 600;
···
 	}
 
 	.restore-all-btn:hover:not(:disabled) {
-		background: rgba(255, 152, 0, 0.3);
-		border-color: #ff9800;
+		background: color-mix(in srgb, var(--warning) 30%, transparent);
+		border-color: var(--warning);
 		transform: translateY(-1px);
 	}
 
···
 	}
 
 	.count-badge {
-		background: rgba(255, 152, 0, 0.2);
-		color: #ff9800;
+		background: color-mix(in srgb, var(--warning) 20%, transparent);
+		color: var(--warning);
 		padding: 0.25rem 0.6rem;
 		border-radius: 12px;
 		font-size: 0.85rem;
···
 	}
 
 	.broken-track-item {
-		background: #1a1a1a;
-		border: 1px solid rgba(255, 152, 0, 0.3);
+		background: var(--bg-tertiary);
+		border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
 		border-radius: 6px;
 		padding: 1rem;
 		display: flex;
···
 		font-weight: 600;
 		font-size: 1rem;
 		margin-bottom: 0.25rem;
-		color: #fff;
+		color: var(--text-primary);
 	}
 
 	.track-meta {
 		font-size: 0.9rem;
-		color: #aaa;
+		color: var(--text-secondary);
 		margin-bottom: 0.5rem;
 	}
 
 	.issue-description {
 		font-size: 0.85rem;
-		color: #ff9800;
+		color: var(--warning);
 	}
 
 	.restore-btn {
 		padding: 0.5rem 1rem;
-		background: rgba(255, 152, 0, 0.15);
-		border: 1px solid rgba(255, 152, 0, 0.4);
+		background: color-mix(in srgb, var(--warning) 15%, transparent);
+		border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
 		border-radius: 4px;
-		color: #ff9800;
+		color: var(--warning);
 		font-family: inherit;
 		font-size: 0.9rem;
 		font-weight: 500;
···
 	}
 
 	.restore-btn:hover:not(:disabled) {
-		background: rgba(255, 152, 0, 0.25);
-		border-color: #ff9800;
+		background: color-mix(in srgb, var(--warning) 25%, transparent);
+		border-color: var(--warning);
 		transform: translateY(-1px);
 	}
 
···
 	}
 
 	.info-box {
-		background: #0a0a0a;
-		border: 1px solid #2a2a2a;
+		background: var(--bg-primary);
+		border: 1px solid var(--border-subtle);
 		border-radius: 6px;
 		padding: 1rem;
 		font-size: 0.9rem;
-		color: #aaa;
+		color: var(--text-secondary);
 	}
 
 	.info-box strong {
 		display: block;
-		color: #ff9800;
+		color: var(--warning);
 		margin-bottom: 0.5rem;
 	}
 

frontend/src/lib/components/HandleAutocomplete.svelte

···
 	.input-wrapper input {
 		width: 100%;
 		padding: 0.75rem;
-		background: #0a0a0a;
-		border: 1px solid #333;
+		background: var(--bg-primary);
+		border: 1px solid var(--border-default);
 		border-radius: 4px;
-		color: white;
+		color: var(--text-primary);
 		font-size: 1rem;
 		font-family: inherit;
 		transition: border-color 0.2s;
···
 
 	.input-wrapper input:focus {
 		outline: none;
-		border-color: var(--accent, #3a7dff);
+		border-color: var(--accent);
 	}
 
 	.input-wrapper input:disabled {
···
 	}
 
 	.input-wrapper input::placeholder {
-		color: #666;
+		color: var(--text-muted);
 	}
 
 	.spinner {
···
 		right: 0.75rem;
 		top: 50%;
 		transform: translateY(-50%);
-		color: #666;
+		color: var(--text-muted);
 		font-size: 0.85rem;
 	}
 
···
 		width: 100%;
 		max-height: 240px;
 		overflow-y: auto;
-		background: #1a1a1a;
-		border: 1px solid #333;
+		background: var(--bg-tertiary);
+		border: 1px solid var(--border-default);
 		border-radius: 4px;
 		margin-top: 0.25rem;
 		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
 		scrollbar-width: thin;
-		scrollbar-color: #333 #0a0a0a;
+		scrollbar-color: var(--border-default) var(--bg-primary);
 	}
 
 	.results::-webkit-scrollbar {
···
 	}
 
 	.results::-webkit-scrollbar-track {
-		background: #0a0a0a;
+		background: var(--bg-primary);
 		border-radius: 4px;
 	}
 
 	.results::-webkit-scrollbar-thumb {
-		background: #333;
+		background: var(--border-default);
 		border-radius: 4px;
 	}
 
 	.results::-webkit-scrollbar-thumb:hover {
-		background: #444;
+		background: var(--border-emphasis);
 	}
 
 	.result-item {
···
 		padding: 0.75rem;
 		background: transparent;
 		border: none;
-		border-bottom: 1px solid #2a2a2a;
-		color: white;
+		border-bottom: 1px solid var(--border-subtle);
+		color: var(--text-primary);
 		text-align: left;
 		font-family: inherit;
 		cursor: pointer;
···
 	}
 
 	.result-item:hover {
-		background: #222;
+		background: var(--bg-hover);
 	}
 
 	.avatar {
···
 		height: 36px;
 		border-radius: 50%;
 		object-fit: cover;
-		border: 2px solid #333;
+		border: 2px solid var(--border-default);
 		flex-shrink: 0;
 	}
 
···
 		width: 36px;
 		height: 36px;
 		border-radius: 50%;
-		background: #333;
+		background: var(--border-default);
 		flex-shrink: 0;
 	}
 
···
 
 	.display-name {
 		font-weight: 500;
-		color: #e8e8e8;
+		color: var(--text-primary);
 		margin-bottom: 0.125rem;
 		overflow: hidden;
 		text-overflow: ellipsis;
···
 
 	.handle {
 		font-size: 0.85rem;
-		color: #888;
+		color: var(--text-tertiary);
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;

frontend/src/lib/components/HandleSearch.svelte

···
 	.search-input {
 		width: 100%;
 		padding: 0.75rem;
-		background: #0a0a0a;
-		border: 1px solid #333;
+		background: var(--bg-primary);
+		border: 1px solid var(--border-default);
 		border-radius: 4px;
-		color: white;
+		color: var(--text-primary);
 		font-size: 1rem;
 		font-family: inherit;
 		transition: all 0.2s;
···
 
 	.search-input:focus {
 		outline: none;
-		border-color: #3a7dff;
+		border-color: var(--accent);
 	}
 
 	.search-input:disabled {
···
 		top: 50%;
 		transform: translateY(-50%);
 		font-size: 0.85rem;
-		color: #666;
+		color: var(--text-muted);
 	}
 
 	.search-results {
···
 		width: 100%;
 		max-height: 300px;
 		overflow-y: auto;
-		background: #1a1a1a;
-		border: 1px solid #333;
+		background: var(--bg-tertiary);
+		border: 1px solid var(--border-default);
 		border-radius: 4px;
 		margin-top: 0.25rem;
 		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
···
 	}
 
 	.search-results::-webkit-scrollbar-track {
-		background: #0a0a0a;
+		background: var(--bg-primary);
 		border-radius: 4px;
 	}
 
 	.search-results::-webkit-scrollbar-thumb {
-		background: #333;
+		background: var(--border-default);
 		border-radius: 4px;
 	}
 
 	.search-results::-webkit-scrollbar-thumb:hover {
-		background: #444;
+		background: var(--border-emphasis);
 	}
 
 	/* firefox scrollbar */
 	.search-results {
 		scrollbar-width: thin;
-		scrollbar-color: #333 #0a0a0a;
+		scrollbar-color: var(--border-default) var(--bg-primary);
 	}
 
 	.search-result-item {
···
 		padding: 0.75rem;
 		background: transparent;
 		border: none;
-		border-bottom: 1px solid #2a2a2a;
-		color: white;
+		border-bottom: 1px solid var(--border-subtle);
+		color: var(--text-primary);
 		text-align: left;
 		font-family: inherit;
 		cursor: pointer;
···
 	}
 
 	.search-result-item:hover:not(:disabled) {
-		background: #222;
+		background: var(--bg-hover);
 	}
 
 	.search-result-item.selected,
···
 		height: 36px;
 		border-radius: 50%;
 		object-fit: cover;
-		border: 2px solid #333;
+		border: 2px solid var(--border-default);
 		flex-shrink: 0;
 	}
 
···
 
 	.result-name {
 		font-weight: 500;
-		color: #e8e8e8;
+		color: var(--text-primary);
 		margin-bottom: 0.125rem;
 		overflow: hidden;
 		text-overflow: ellipsis;
···
 
 	.result-handle {
 		font-size: 0.85rem;
-		color: #888;
+		color: var(--text-tertiary);
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
···
 		align-items: center;
 		gap: 0.5rem;
 		padding: 0.5rem 0.75rem;
-		background: #1a2330;
-		border: 1px solid #2a3a4a;
+		background: color-mix(in srgb, var(--accent) 10%, var(--bg-tertiary));
+		border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border-subtle));
 		border-radius: 20px;
-		color: #e8e8e8;
+		color: var(--text-primary);
 		font-size: 0.9rem;
 	}
 
···
 		height: 24px;
 		border-radius: 50%;
 		object-fit: cover;
-		border: 1px solid #333;
+		border: 1px solid var(--border-default);
 	}
 
 	.chip-name {
···
 	.chip-remove {
 		background: transparent;
 		border: none;
-		color: #888;
+		color: var(--text-tertiary);
 		font-size: 1.3rem;
 		font-family: inherit;
 		line-height: 1;
···
 	}
 
 	.chip-remove:hover:not(:disabled) {
-		color: #ff6b6b;
+		color: var(--error);
 	}
 
 	.chip-remove:disabled {
···
 	.max-features-message {
 		margin-top: 0.5rem;
 		font-size: 0.85rem;
-		color: #ff9966;
+		color: var(--warning);
 	}
 
 	.no-results-message {
 		margin-top: 0.5rem;
 		padding: 0.75rem;
-		background: #2a1a1a;
-		border: 1px solid #4a3030;
+		background: color-mix(in srgb, var(--warning) 10%, var(--bg-primary));
+		border: 1px solid color-mix(in srgb, var(--warning) 20%, var(--border-subtle));
 		border-radius: 4px;
-		color: #ff9966;
+		color: var(--warning);
 		font-size: 0.9rem;
 		text-align: center;
 	}

frontend/src/lib/components/Header.svelte

···
 
 <style>
 	header {
-		border-bottom: 1px solid #333;
+		border-bottom: 1px solid var(--border-default);
 		margin-bottom: 2rem;
 		position: relative;
+		z-index: 50;
 	}
 
 	.header-content {
···
 
 	.nav-link:hover {
 		color: var(--text-primary);
-		background: #1a1a1a;
-		border-color: #333;
+		background: var(--bg-tertiary);
+		border-color: var(--border-default);
 	}
 
 	.nav-link svg {
···
 		text-decoration: none;
 		font-size: 0.9rem;
 		padding: 0.4rem 0.75rem;
-		background: #1a1a1a;
+		background: var(--bg-tertiary);
 		border-radius: 6px;
-		border: 1px solid #333;
+		border: 1px solid var(--border-default);
 		transition: all 0.2s;
 		white-space: nowrap;
 	}
···
 	.user-handle:hover {
 		border-color: var(--accent);
 		color: var(--accent);
-		background: #222;
+		background: var(--bg-hover);
 	}
 
 	.btn-primary {
···
 
 	.btn-logout {
 		background: transparent;
-		border: 1px solid #444;
-		color: #b0b0b0;
+		border: 1px solid var(--border-emphasis);
+		color: var(--text-secondary);
 		padding: 0.5rem 1rem;
 		border-radius: 6px;
 		font-size: 0.9rem;

frontend/src/lib/components/HiddenTagsFilter.svelte

···
 	}
 
 	.tag-chip:hover {
-		border-color: rgba(255, 107, 107, 0.5);
-		color: #ff6b6b;
+		border-color: color-mix(in srgb, var(--error) 50%, transparent);
+		color: var(--error);
 	}
 
 	.tag-chip:active {

frontend/src/lib/components/LikeButton.svelte

···
 		align-items: center;
 		justify-content: center;
 		background: transparent;
-		border: 1px solid #333;
+		border: 1px solid var(--border-default);
 		border-radius: 4px;
-		color: #888;
+		color: var(--text-tertiary);
 		cursor: pointer;
 		transition: all 0.2s;
 	}
 
 	.like-button:hover {
-		background: #1a1a1a;
+		background: var(--bg-tertiary);
 		border-color: var(--accent);
 		color: var(--accent);
 	}
···
 
 	.like-button.disabled-state {
 		opacity: 0.4;
-		border-color: #555;
-		color: #666;
+		border-color: var(--text-muted);
+		color: var(--text-muted);
 	}
 
 	.like-button.disabled-state:hover {
 		background: transparent;
-		border-color: #555;
-		color: #666;
+		border-color: var(--text-muted);
+		color: var(--text-muted);
 	}
 
 	.like-button.loading {

frontend/src/lib/components/LikersTooltip.svelte

···
 		left: 50%;
 		transform: translateX(-50%);
 		margin-bottom: 0.5rem;
-		background: #1a1a1a;
-		border: 1px solid #333;
+		background: var(--bg-secondary);
+		border: 1px solid var(--border-default);
 		border-radius: 8px;
 		padding: 0.75rem;
 		min-width: 240px;
···
 	.loading,
 	.error,
 	.empty {
-		color: #888;
+		color: var(--text-tertiary);
 		font-size: 0.85rem;
 		text-align: center;
 		padding: 0.5rem;
 	}
 
 	.error {
-		color: #e74c3c;
+		color: var(--error);
 	}
 
 	.likers-list {
···
 	}
 
 	.liker:hover {
-		background: #252525;
+		background: var(--bg-hover);
 	}
 
 	.avatar,
···
 
 	.avatar {
 		object-fit: cover;
-		border: 1px solid #333;
+		border: 1px solid var(--border-default);
 	}
 
 	.avatar-placeholder {
-		background: #333;
+		background: var(--border-default);
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		color: #888;
+		color: var(--text-tertiary);
 		font-weight: 600;
 		font-size: 0.9rem;
 	}
···
 	}
 
 	.display-name {
-		color: #e8e8e8;
+		color: var(--text-primary);
 		font-weight: 500;
 		font-size: 0.9rem;
 		white-space: nowrap;
···
 	}
 
 	.handle {
-		color: #888;
+		color: var(--text-tertiary);
 		font-size: 0.8rem;
 		white-space: nowrap;
 		overflow: hidden;
···
 	}
 
 	.liked-time {
-		color: #666;
+		color: var(--text-muted);
 		font-size: 0.75rem;
 		flex-shrink: 0;
 	}
···
 	}
 
 	.likers-list::-webkit-scrollbar-track {
-		background: #1a1a1a;
+		background: var(--bg-tertiary);
 	}
 
 	.likers-list::-webkit-scrollbar-thumb {
-		background: #333;
+		background: var(--border-default);
 		border-radius: 3px;
 	}
 
 	.likers-list::-webkit-scrollbar-thumb:hover {
-		background: #444;
+		background: var(--border-emphasis);
 	}
 </style>

frontend/src/lib/components/LinksMenu.svelte

···
 		width: 32px;
 		height: 32px;
 		background: transparent;
-		border: 1px solid #333;
+		border: 1px solid var(--border-default);
 		border-radius: 6px;
 		color: var(--text-secondary);
 		cursor: pointer;
···
 	}
 
 	.menu-button:hover {
-		background: #1a1a1a;
+		background: var(--bg-tertiary);
 		border-color: var(--accent);
 		color: var(--accent);
 	}

frontend/src/lib/components/MigrationBanner.svelte

···
 
 <style>
 	.migration-banner {
-		background: var(--background-alt, #1a1a1a);
-		border: 1px solid var(--border-color, #333);
+		background: var(--bg-tertiary);
+		border: 1px solid var(--border-default);
 		border-radius: 8px;
 		padding: 1rem;
 		margin-bottom: 1.5rem;
···
 
 	.migration-message strong {
 		font-size: 1.1em;
-		color: var(--text-primary, #fff);
+		color: var(--text-primary);
 	}
 
 	.migration-message p {
 		margin: 0;
-		color: var(--text-secondary, #aaa);
+		color: var(--text-secondary);
 		font-size: 0.9em;
 	}
 
 	.error {
-		color: var(--error-color, #ff6b6b);
+		color: var(--error);
 	}
 
 	.success-message {
 		display: flex;
 		align-items: center;
 		gap: 1rem;
-		background: rgba(81, 207, 102, 0.1);
-		border: 1px solid rgba(81, 207, 102, 0.3);
+		background: color-mix(in srgb, var(--success) 10%, transparent);
+		border: 1px solid color-mix(in srgb, var(--success) 30%, transparent);
 		border-radius: 6px;
 		padding: 1rem;
 		animation: slideIn 0.3s ease-out;
···
 
 	.success-icon {
 		font-size: 2rem;
-		color: var(--success-color, #51cf66);
+		color: var(--success);
 		animation: checkmark 0.5s ease-out;
 	}
 
 	.success-title {
 		font-weight: 600;
-		color: var(--success-color, #51cf66);
+		color: var(--success);
 		margin: 0;
 	}
 
 	.success-detail {
-		color: var(--text-secondary, #aaa);
+		color: var(--text-secondary);
 		margin: 0.25rem 0 0 0;
 		font-size: 0.85em;
 	}
···
 	}
 
 	.collection-name {
-		background: rgba(255, 255, 255, 0.05);
+		background: color-mix(in srgb, var(--text-primary) 5%, transparent);
 		padding: 0.15em 0.4em;
 		border-radius: 3px;
 		font-family: monospace;
 		font-size: 0.95em;
-		color: var(--text-primary, #fff);
+		color: var(--text-primary);
 	}
 
 	.collection-link {
-		color: var(--accent, #6a9fff);
+		color: var(--accent);
 		text-decoration: none;
 		border-bottom: 1px solid transparent;
 		transition: border-color 0.2s;
 	}
 
 	.collection-link:hover {
-		border-bottom-color: var(--accent, #6a9fff);
+		border-bottom-color: var(--accent);
 	}
 
 	.migration-actions {
···
 	}
 
 	.migrate-button {
-		background: var(--primary-color, #007bff);
+		background: var(--accent);
 		color: white;
 	}
 
···
 
 	.dismiss-button {
 		background: transparent;
-		color: var(--text-secondary, #aaa);
-		border: 1px solid var(--border-color, #333);
+		color: var(--text-secondary);
+		border: 1px solid var(--border-default);
 	}
 
 	.dismiss-button:hover:not(:disabled) {
-		background: var(--background-hover, #222);
+		background: var(--bg-hover);
 	}
 
 	button:disabled {

frontend/src/lib/components/PlatformStats.svelte

···
 		display: block;
 		width: 100%;
 		height: 60px;
-		background: linear-gradient(90deg, #1a1a1a 0%, #242424 50%, #1a1a1a 100%);
+		background: linear-gradient(90deg, var(--bg-tertiary) 0%, var(--bg-hover) 50%, var(--bg-tertiary) 100%);
 		background-size: 200% 100%;
 		animation: shimmer 1.5s ease-in-out infinite;
 		border-radius: 6px;

frontend/src/lib/components/SettingsMenu.svelte

···
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { queue } from '$lib/queue.svelte';
-	import { preferences } from '$lib/preferences.svelte';
+	import { preferences, type Theme } from '$lib/preferences.svelte';
 
 	let showSettings = $state(false);
 
···
 		{ name: 'red', value: '#ef4444' }
 	];
 
+	const themes: { value: Theme; label: string; icon: string }[] = [
+		{ value: 'dark', label: 'dark', icon: 'moon' },
+		{ value: 'light', label: 'light', icon: 'sun' },
+		{ value: 'system', label: 'system', icon: 'auto' }
+	];
+
 	// derive from preferences store
 	let currentColor = $derived(preferences.accentColor ?? '#6a9fff');
 	let autoAdvance = $derived(preferences.autoAdvance);
+	let currentTheme = $derived(preferences.theme);
 
 	// apply color when it changes
 	$effect(() => {
···
 		queue.setAutoAdvance(value);
 		localStorage.setItem('autoAdvance', value ? '1' : '0');
 		await preferences.update({ auto_advance: value });
+	}
+
+	function selectTheme(theme: Theme) {
+		preferences.setTheme(theme);
 	}
 </script>
 
···
 			</div>
 
 			<section class="settings-section">
+				<h3>theme</h3>
+				<div class="theme-buttons">
+					{#each themes as theme}
+						<button
+							class="theme-btn"
+							class:active={currentTheme === theme.value}
+							onclick={() => selectTheme(theme.value)}
+							title={theme.label}
+						>
+							{#if theme.icon === 'moon'}
+								<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+									<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+								</svg>
+							{:else if theme.icon === 'sun'}
+								<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+									<circle cx="12" cy="12" r="5" />
+									<path d="M12 1v2m0 18v2M4.22 4.22l1.42 1.42m12.72 12.72 1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
+								</svg>
+							{:else}
+								<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+									<circle cx="12" cy="12" r="9" />
+									<path d="M12 3v18" />
+									<path d="M12 3a9 9 0 0 1 0 18" fill="currentColor" opacity="0.3" />
+								</svg>
+							{/if}
+							<span>{theme.label}</span>
+						</button>
+					{/each}
+				</div>
+			</section>
+
+			<section class="settings-section">
 				<h3>accent color</h3>
 				<div class="color-picker-row">
 					<input type="color" value={currentColor} oninput={handleColorInput} class="color-input" />
···
 				</label>
 				<p class="toggle-hint">when a track ends, start the next item in your queue</p>
 			</section>
+
 		</div>
 	{/if}
 </div>
···
 		border: 1px solid var(--border-default);
 		border-radius: 8px;
 		padding: 1.25rem;
-		min-width: 260px;
+		min-width: 280px;
 		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
 		z-index: 1000;
 		display: flex;
···
 		color: var(--text-tertiary);
 	}
 
+	.theme-buttons {
+		display: flex;
+		gap: 0.5rem;
+	}
+
+	.theme-btn {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.35rem;
+		padding: 0.6rem 0.5rem;
+		background: var(--bg-tertiary);
+		border: 1px solid var(--border-default);
+		border-radius: 6px;
+		color: var(--text-secondary);
+		cursor: pointer;
+		transition: all 0.2s;
+	}
+
+	.theme-btn:hover {
+		border-color: var(--accent);
+		color: var(--accent);
+	}
+
+	.theme-btn.active {
+		background: color-mix(in srgb, var(--accent) 15%, transparent);
+		border-color: var(--accent);
+		color: var(--accent);
+	}
+
+	.theme-btn svg {
+		width: 18px;
+		height: 18px;
+	}
+
+	.theme-btn span {
+		font-size: 0.7rem;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+	}
+
 	.color-picker-row {
 		display: flex;
 		align-items: center;
···
 		cursor: pointer;
 		transition: background 0.2s, border 0.2s;
 		border: 1px solid var(--border-default);
+		flex-shrink: 0;
 	}
 
 	.toggle input::after {
···
 		color: var(--text-tertiary);
 		font-size: 0.8rem;
 		line-height: 1.3;
+	}
+
+	@media (max-width: 768px) {
+		.settings-panel {
+			position: fixed;
+			top: auto;
+			bottom: calc(var(--player-height, 0px) + 1rem);
+			right: 1rem;
+			left: 1rem;
+			min-width: auto;
+			max-height: 70vh;
+			overflow-y: auto;
+		}
 	}
 </style>

frontend/src/lib/components/ShareButton.svelte

···
 <style>
 	.share-btn {
 		background: transparent;
-		border: 1px solid #333;
+		border: 1px solid var(--border-default);
 		border-radius: 4px;
 		width: 32px;
 		height: 32px;
 		padding: 0;
-		color: #888;
+		color: var(--text-tertiary);
 		cursor: pointer;
 		display: flex;
 		align-items: center;
···
 		top: -2rem;
 		left: 50%;
 		transform: translateX(-50%);
-		background: #1a1a1a;
+		background: var(--bg-tertiary);
 		border: 1px solid var(--accent);
 		color: var(--accent);
 		padding: 0.25rem 0.75rem;

frontend/src/lib/components/TagInput.svelte

···
 		align-items: center;
 		gap: 0.35rem;
 		padding: 0.35rem 0.6rem;
-		background: rgba(138, 179, 255, 0.1);
-		border: 1px solid rgba(138, 179, 255, 0.2);
-		color: #8ab3ff;
+		background: color-mix(in srgb, var(--accent) 10%, transparent);
+		border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
+		color: var(--accent-hover);
 		border-radius: 20px;
 		font-size: 0.9rem;
 		font-weight: 500;
···
 	}
 
 	.tag-remove:hover {
-		color: #ff6b6b;
+		color: var(--error);
 	}
 
 	.tag-remove:disabled {

frontend/src/lib/components/TrackActionsMenu.svelte

···
 		align-items: center;
 		justify-content: center;
 		background: transparent;
-		border: 1px solid #333;
+		border: 1px solid var(--border-default);
 		border-radius: 4px;
-		color: #888;
+		color: var(--text-tertiary);
 		cursor: pointer;
 		transition: all 0.2s;
 	}
 
 	.menu-button:hover {
-		background: #1a1a1a;
+		background: var(--bg-tertiary);
 		border-color: var(--accent);
 		color: var(--accent);
 	}

frontend/src/lib/components/TrackItem.svelte

···
 		display: flex;
 		align-items: center;
 		gap: 0.75rem;
-		background: #141414;
-		border: 1px solid #282828;
+		background: var(--bg-secondary);
+		border: 1px solid var(--border-subtle);
 		border-left: 3px solid transparent;
 		padding: 1rem;
 		transition: all 0.15s ease-in-out;
 	}
 
 	.track-container:hover {
-		background: #1a1a1a;
+		background: var(--bg-tertiary);
 		border-left-color: var(--accent);
-		border-color: #333;
+		border-color: var(--border-default);
 		transform: translateX(2px);
 	}
 
 	.track-container.playing {
-		background: #1a2330;
+		background: color-mix(in srgb, var(--accent) 10%, var(--bg-tertiary));
 		border-left-color: var(--accent);
-		border-color: #2a3a4a;
+		border-color: color-mix(in srgb, var(--accent) 20%, var(--border-subtle));
 	}
 
 	.track {
···
 		justify-content: center;
 		border-radius: 4px;
 		overflow: hidden;
-		background: #1a1a1a;
-		border: 1px solid #282828;
+		background: var(--bg-tertiary);
+		border: 1px solid var(--border-subtle);
 	}
 
 	.track-avatar {
···
 	}
 
 	.track-image-placeholder {
-		color: #606060;
+		color: var(--text-muted);
 	}
 
 	.track-avatar img {
 		border-radius: 50%;
-		border: 2px solid #333;
+		border: 2px solid var(--border-default);
 		transition: border-color 0.2s;
 	}
 
···
 		font-family: inherit;
 		font-weight: 600;
 		font-size: 1.05rem;
-		color: #e8e8e8;
+		color: var(--text-primary);
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
···
 		flex-direction: column;
 		align-items: flex-start;
 		gap: 0.15rem;
-		color: #b0b0b0;
+		color: var(--text-secondary);
 		font-size: 0.9rem;
 		font-family: inherit;
 		min-width: 0;
···
 	}
 
 	.artist-link {
-		color: #b0b0b0;
+		color: var(--text-secondary);
 		text-decoration: none;
 		transition: color 0.2s;
 		font-weight: 500;
···
 		display: inline-flex;
 		align-items: center;
 		gap: 0.25rem;
-		color: #b5bed1;
+		color: var(--text-secondary);
 		white-space: nowrap;
 	}
 
 	.features-label {
-		color: #8ab3ff;
+		color: var(--accent-hover);
 		font-weight: 500;
 		text-transform: lowercase;
 	}
 
 	.feature-link {
-		color: #8ab3ff;
+		color: var(--accent-hover);
 		text-decoration: none;
 		font-weight: 500;
 		transition: color 0.2s;
···
 	}
 
 	.feature-separator {
-		color: #8ab3ff;
+		color: var(--accent-hover);
 	}
 
 	.album {
-		color: #909090;
+		color: var(--text-tertiary);
 		display: inline-flex;
 		align-items: center;
 		gap: 0.35rem;
···
 	}
 
 	.album-link {
-		color: #909090;
+		color: var(--text-tertiary);
 		text-decoration: none;
 		transition: color 0.2s;
 		display: inline-block;
···
 	.tag-badge {
 		display: inline-block;
 		padding: 0.1rem 0.4rem;
-		background: rgba(138, 179, 255, 0.15);
-		color: #8ab3ff;
+		background: color-mix(in srgb, var(--accent) 15%, transparent);
+		color: var(--accent-hover);
 		border-radius: 3px;
 		font-size: 0.75rem;
 		font-weight: 500;
···
 	}
 
 	.tag-badge:hover {
-		background: rgba(138, 179, 255, 0.25);
-		color: #a8c8ff;
+		background: color-mix(in srgb, var(--accent) 25%, transparent);
+		color: var(--accent);
 	}
 
 	.track-meta {
 		font-size: 0.8rem;
-		color: #808080;
+		color: var(--text-tertiary);
 		display: flex;
 		align-items: center;
 		gap: 0.5rem;
 	}
 
 	.plays {
-		color: #999;
+		color: var(--text-tertiary);
 		font-family: inherit;
 	}
 
 	.meta-separator {
-		color: #555;
+		color: var(--text-muted);
 		font-size: 0.7rem;
 	}
 
 	.likes {
-		color: #999;
+		color: var(--text-tertiary);
 		font-family: inherit;
 		position: relative;
 		cursor: help;
···
 	}
 
 	.comments {
-		color: #999;
+		color: var(--text-tertiary);
 		font-family: inherit;
 		display: inline-flex;
 		align-items: center;
···
 		align-items: center;
 		justify-content: center;
 		background: transparent;
-		border: 1px solid #333;
+		border: 1px solid var(--border-default);
 		border-radius: 4px;
-		color: #888;
+		color: var(--text-tertiary);
 		cursor: pointer;
 		transition: all 0.2s;
 		text-decoration: none;
 	}
 
 	.action-button:hover {
-		background: #1a1a1a;
+		background: var(--bg-tertiary);
 		border-color: var(--accent);
 		color: var(--accent);
 	}

frontend/src/lib/components/player/PlaybackControls.svelte

···
 
 	.control-btn:hover {
 		color: var(--accent);
-		background: rgba(106, 159, 255, 0.1);
+		background: color-mix(in srgb, var(--accent) 10%, transparent);
 	}
 
 	.control-btn.play-pause:active {
···
 
 	.time {
 		font-size: 0.85rem;
-		color: #909090;
+		color: var(--text-tertiary);
 		min-width: 45px;
 		font-variant-numeric: tabular-nums;
 	}
···
 		display: flex;
 		align-items: center;
 		gap: 0.5rem;
-		color: #909090;
+		color: var(--text-tertiary);
 		min-width: 140px;
 		position: relative;
 	}
···
 	}
 
 	.volume-icon.muted {
-		color: #ff6b6b;
+		color: var(--error);
 		animation: shake 0.5s ease-in-out;
 	}
 
···
 	}
 
 	input[type="range"].muted::-webkit-slider-thumb {
-		background: #ff6b6b;
+		background: var(--error);
 	}
 
 	input[type="range"].max::-webkit-slider-thumb {
···
 	}
 
 	input[type="range"].muted::-moz-range-thumb {
-		background: #ff6b6b;
+		background: var(--error);
 	}
 
 	input[type="range"].max::-moz-range-thumb {

frontend/src/lib/components/player/Player.svelte

···
 		bottom: 0;
 		left: 0;
 		right: 0;
-		background: #1a1a1a;
-		border-top: 1px solid #333;
+		background: var(--bg-tertiary);
+		border-top: 1px solid var(--border-default);
 		padding: 0.75rem 2rem;
 		padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
 		z-index: 100;

frontend/src/lib/components/player/TrackInfo.svelte

···
 		height: 56px;
 		border-radius: 4px;
 		overflow: hidden;
-		background: #1a1a1a;
-		border: 1px solid #333;
+		background: var(--bg-tertiary);
+		border: 1px solid var(--border-default);
 		display: block;
 		text-decoration: none;
 		transition: transform 0.18s ease, border-color 0.2s ease;
···
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		color: #666;
+		color: var(--text-muted);
 	}
 
 	.player-info {
···
 	.player-title-link {
 		font-size: 0.95rem;
 		font-weight: 600;
-		color: #e8e8e8;
+		color: var(--text-primary);
 		margin-bottom: 0;
 		position: relative;
 		overflow: hidden;
···
 		flex-direction: column;
 		justify-content: center;
 		gap: 0.15rem;
-		color: #a0a0a0;
+		color: var(--text-secondary);
 		font-size: 0.82rem;
 		min-width: 0;
 		height: 32px;
···
 	}
 
 	.features-inline {
-		color: #b5b5b5;
+		color: var(--text-secondary);
 		display: inline-flex;
 		align-items: center;
 		gap: 0.25rem;

frontend/src/lib/preferences.svelte.ts

···
 import { API_URL } from '$lib/config';
 import { auth } from '$lib/auth.svelte';
 
+export type Theme = 'dark' | 'light' | 'system';
+
 export interface Preferences {
 	accent_color: string | null;
 	auto_advance: boolean;
 	allow_comments: boolean;
 	hidden_tags: string[];
+	theme: Theme;
 }
 
 const DEFAULT_PREFERENCES: Preferences = {
 	accent_color: null,
 	auto_advance: true,
 	allow_comments: true,
-	hidden_tags: ['ai']
+	hidden_tags: ['ai'],
+	theme: 'dark'
 };
 
 class PreferencesManager {
···
 		return this.data?.allow_comments ?? DEFAULT_PREFERENCES.allow_comments;
 	}
 
+	get theme(): Theme {
+		return this.data?.theme ?? DEFAULT_PREFERENCES.theme;
+	}
+
+	setTheme(theme: Theme): void {
+		if (browser) {
+			localStorage.setItem('theme', theme);
+			this.applyTheme(theme);
+		}
+		this.update({ theme });
+	}
+
+	applyTheme(theme: Theme): void {
+		if (!browser) return;
+		const root = document.documentElement;
+		root.classList.remove('theme-dark', 'theme-light');
+
+		let effectiveTheme: 'dark' | 'light';
+		if (theme === 'system') {
+			effectiveTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+		} else {
+			effectiveTheme = theme;
+		}
+		root.classList.add(`theme-${effectiveTheme}`);
+	}
+
 	async initialize(): Promise<void> {
 		if (!browser || this.initialized || this.loading) return;
 		this.initialized = true;
···
 					accent_color: data.accent_color ?? null,
 					auto_advance: data.auto_advance ?? DEFAULT_PREFERENCES.auto_advance,
 					allow_comments: data.allow_comments ?? DEFAULT_PREFERENCES.allow_comments,
-					hidden_tags: data.hidden_tags ?? DEFAULT_PREFERENCES.hidden_tags
+					hidden_tags: data.hidden_tags ?? DEFAULT_PREFERENCES.hidden_tags,
+					theme: data.theme ?? DEFAULT_PREFERENCES.theme
 				};
 			} else {
 				this.data = { ...DEFAULT_PREFERENCES };
+			}
+			// apply theme after fetching
+			if (browser) {
+				this.applyTheme(this.data.theme);
 			}
 		} catch (error) {
 			console.error('failed to fetch preferences:', error);

frontend/src/routes/+error.svelte

···
 
 	h1 {
 		font-size: 4rem;
-		color: #e8e8e8;
+		color: var(--text-primary);
 		margin: 0 0 1rem 0;
 		font-weight: 700;
 	}
 
 	.error-message {
 		font-size: 1.25rem;
-		color: #b0b0b0;
+		color: var(--text-secondary);
 		margin: 0 0 0.5rem 0;
 	}
 
 	.error-detail {
 		font-size: 1rem;
-		color: #808080;
+		color: var(--text-tertiary);
 		margin: 0 0 2rem 0;
 	}
 
···
 
 	.home-link:hover {
 		background: var(--accent);
-		color: #000;
+		color: var(--bg-primary);
 	}
 
 	@media (max-width: 768px) {

frontend/src/routes/+layout.svelte

···
 			document.documentElement.style.setProperty('--accent-hover', getHoverColor(savedAccent));
 		}
 
+		// apply saved theme from localStorage
+		const savedTheme = localStorage.getItem('theme') as 'dark' | 'light' | 'system' | null;
+		if (savedTheme) {
+			preferences.applyTheme(savedTheme);
+		} else {
+			// default to dark
+			document.documentElement.classList.add('theme-dark');
+		}
+
 		// restore queue visibility preference
 		const savedQueueVisibility = localStorage.getItem('showQueue');
 		if (savedQueueVisibility !== null) {
 			showQueue = savedQueueVisibility === 'true';
 		}
 
-		// add keyboard listener for queue toggle
+		// add keyboard listener for shortcuts
 		window.addEventListener('keydown', handleQueueShortcut);
+
+		// listen for system theme changes
+		const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+		const handleSystemThemeChange = () => {
+			const currentTheme = localStorage.getItem('theme');
+			if (currentTheme === 'system') {
+				preferences.applyTheme('system');
+			}
+		};
+		mediaQuery.addEventListener('change', handleSystemThemeChange);
+
+		return () => {
+			mediaQuery.removeEventListener('change', handleSystemThemeChange);
+		};
 	});
 
 	onDestroy(() => {
···
 		// prevent flash by applying saved settings immediately
 		if (typeof window !== 'undefined') {
 			(function() {
+				const root = document.documentElement;
+
+				// apply accent color
 				const savedAccent = localStorage.getItem('accentColor');
 				if (savedAccent) {
-					document.documentElement.style.setProperty('--accent', savedAccent);
+					root.style.setProperty('--accent', savedAccent);
 					// simple lightening for hover state
 					const r = parseInt(savedAccent.slice(1, 3), 16);
 					const g = parseInt(savedAccent.slice(3, 5), 16);
 					const b = parseInt(savedAccent.slice(5, 7), 16);
 					const hover = `rgb(${Math.min(255, r + 30)}, ${Math.min(255, g + 30)}, ${Math.min(255, b + 30)})`;
-					document.documentElement.style.setProperty('--accent-hover', hover);
+					root.style.setProperty('--accent-hover', hover);
+				}
+
+				// apply theme
+				const savedTheme = localStorage.getItem('theme') || 'dark';
+				let effectiveTheme = savedTheme;
+				if (savedTheme === 'system') {
+					effectiveTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
 				}
+				root.classList.add('theme-' + effectiveTheme);
 			})();
 		}
 	</script>
···
 		--accent: #6a9fff;
 		--accent-hover: #8ab3ff;
 		--accent-muted: #4a7ddd;
+		--accent-rgb: 106, 159, 255;
 
 		/* backgrounds */
 		--bg-primary: #0a0a0a;
···
 		--success: #4ade80;
 		--warning: #fbbf24;
 		--error: #ef4444;
+	}
+
+	/* light theme overrides */
+	:global(:root.theme-light) {
+		--bg-primary: #fafafa;
+		--bg-secondary: #ffffff;
+		--bg-tertiary: #f5f5f5;
+		--bg-hover: #ebebeb;
+
+		--border-subtle: #e5e5e5;
+		--border-default: #d4d4d4;
+		--border-emphasis: #a3a3a3;
+
+		--text-primary: #171717;
+		--text-secondary: #525252;
+		--text-tertiary: #737373;
+		--text-muted: #a3a3a3;
+
+		/* accent colors preserved from user preference */
+		/* accent-muted darkened for light bg readability */
+		--accent-muted: color-mix(in srgb, var(--accent) 70%, black);
+
+		/* semantic colors adjusted for light bg */
+		--success: #16a34a;
+		--warning: #d97706;
+		--error: #dc2626;
+	}
+
+	/* light theme specific overrides for components */
+	:global(:root.theme-light) :global(.track-container) {
+		background: var(--bg-secondary);
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+	}
+
+	:global(:root.theme-light) :global(.track-container:hover) {
+		background: var(--bg-tertiary);
+	}
+
+	:global(:root.theme-light) :global(.track-container.playing) {
+		background: color-mix(in srgb, var(--accent) 8%, white);
+		border-color: color-mix(in srgb, var(--accent) 30%, white);
+	}
+
+	:global(:root.theme-light) :global(header) {
+		background: var(--bg-primary);
+		border-color: var(--border-default);
+	}
+
+	:global(:root.theme-light) :global(.tag-badge) {
+		background: color-mix(in srgb, var(--accent) 12%, white);
+		color: var(--accent-muted);
 	}
 
 	:global(body) {

frontend/src/routes/+layout.ts

···
 	accent_color: null,
 	auto_advance: true,
 	allow_comments: true,
-	hidden_tags: ['ai']
+	hidden_tags: ['ai'],
+	theme: 'dark'
 };
 
 export async function load({ fetch }: LoadEvent): Promise<LayoutData> {
···
 						accent_color: data.accent_color ?? null,
 						auto_advance: data.auto_advance ?? true,
 						allow_comments: data.allow_comments ?? true,
-						hidden_tags: data.hidden_tags ?? ['ai']
+						hidden_tags: data.hidden_tags ?? ['ai'],
+						theme: data.theme ?? 'dark'
 					};
 				}
 			} catch (e) {

frontend/src/routes/+page.svelte

···
 	}
 
 	.empty {
-		color: #808080;
+		color: var(--text-tertiary);
 		padding: 2rem;
 		text-align: center;
 	}

frontend/src/routes/embed/track/[id]/+page.svelte

···
 		padding: 0;
 		overflow: hidden;
 		font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Consolas', monospace;
-		background: #000;
-		color: #fff;
+		background: var(--bg-primary);
+		color: var(--text-primary);
 	}
 
 	.embed-container {
 		display: flex;
 		height: 165px;
-		background: #1a1a1a;
+		background: var(--bg-tertiary);
 		overflow: hidden;
 		position: relative;
 	}
···
 	.art-placeholder {
 		width: 100%;
 		height: 100%;
-		background: #333;
+		background: var(--border-default);
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		font-size: 48px;
-		color: #555;
+		color: var(--text-muted);
 	}
 
 	.content {
···
 		overflow: hidden;
 		text-overflow: ellipsis;
 		text-decoration: none;
-		color: #fff;
+		color: var(--text-primary);
 	}
 
 	.title:hover {
···
 	.artist {
 		display: block;
 		font-size: 14px;
-		color: #aaa;
+		color: var(--text-secondary);
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
···
 		right: 16px;
 		font-size: 12px;
 		font-weight: 700;
-		color: #444;
+		color: var(--border-emphasis);
 		text-decoration: none;
 		text-transform: uppercase;
 		letter-spacing: 1px;
 	}
 
 	.logo:hover {
-		color: #666;
+		color: var(--text-muted);
 	}
 
 	.player-controls {
···
 
 	.time {
 		font-size: 12px;
-		color: #777;
+		color: var(--text-tertiary);
 		font-variant-numeric: tabular-nums;
 		width: 35px;
 		text-align: center;
···
 	.progress-bg {
 		width: 100%;
 		height: 4px;
-		background: #333;
+		background: var(--border-default);
 		border-radius: 2px;
 	}
 
···
 		left: 0;
 		top: 10px; /* (24 - 4) / 2 */
 		height: 4px;
-		background: #fff;
+		background: var(--text-primary);
 		border-radius: 2px;
 		pointer-events: none;
 	}
 
 	.progress-bar:hover .progress-fill {
-		background: #3b82f6; /* blue-500 */
+		background: var(--accent);
 	}
 
 	/* mobile: background image layout */

frontend/src/routes/liked/+page.svelte

···
 
 	.subtitle {
 		font-size: 0.95rem;
-		color: #888;
+		color: var(--text-tertiary);
 		margin: 0;
 	}
 
···
 	.empty-state {
 		text-align: center;
 		padding: 4rem 1rem;
-		color: #888;
+		color: var(--text-tertiary);
 	}
 
 	.empty-state svg {
 		margin: 0 auto 1.5rem;
-		color: #555;
+		color: var(--text-muted);
 	}
 
 	.empty-state h2 {
 		font-size: 1.5rem;
 		font-weight: 600;
-		color: #b0b0b0;
+		color: var(--text-secondary);
 		margin: 0 0 0.5rem 0;
 	}
 

frontend/src/routes/login/+page.svelte

···
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		background: #0a0a0a;
+		background: var(--bg-primary);
 		padding: 1rem;
 	}
 
 	.login-card {
-		background: #1a1a1a;
-		border: 1px solid #2a2a2a;
+		background: var(--bg-tertiary);
+		border: 1px solid var(--border-subtle);
 		border-radius: 8px;
 		padding: 3rem;
 		max-width: 400px;
···
 	h1 {
 		font-size: 2.5rem;
 		margin: 0 0 0.5rem 0;
-		color: #fff;
+		color: var(--text-primary);
 		text-align: center;
 	}
 
 	p {
-		color: #888;
+		color: var(--text-tertiary);
 		text-align: center;
 		margin: 0 0 2rem 0;
 		font-size: 0.95rem;
···
 	}
 
 	label {
-		color: #aaa;
+		color: var(--text-secondary);
 		font-size: 0.9rem;
 	}
 
···
 	.input-help {
 		margin: 0.5rem 0 0 0;
 		font-size: 0.85rem;
-		color: #888;
+		color: var(--text-tertiary);
 	}
 
 	.input-help a {
···
 	button {
 		width: 100%;
 		padding: 0.75rem;
-		background: #3a7dff;
+		background: var(--accent);
 		color: white;
 		border: none;
 		border-radius: 4px;
···
 	}
 
 	button:hover:not(:disabled) {
-		background: #2868e6;
+		background: var(--accent-hover);
 		transform: translateY(-1px);
-		box-shadow: 0 4px 12px rgba(58, 125, 255, 0.3);
+		box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
 	}
 
 	button:disabled {

frontend/src/routes/portal/+page.svelte

···
 		align-items: center;
 		justify-content: center;
 		min-height: 100vh;
-		color: #888;
+		color: var(--text-tertiary);
 		gap: 1rem;
 	}
 
···
 		text-decoration: none;
 		font-size: 0.9rem;
 		padding: 0.4rem 0.75rem;
-		background: #1a1a1a;
+		background: var(--bg-tertiary);
 		border-radius: 6px;
-		border: 1px solid #333;
+		border: 1px solid var(--border-default);
 		transition: all 0.2s;
 		white-space: nowrap;
 	}
···
 	.view-profile-link:hover {
 		border-color: var(--accent);
 		color: var(--accent);
-		background: #222;
+		background: var(--bg-hover);
 	}
 
 	form {
-		background: #1a1a1a;
+		background: var(--bg-tertiary);
 		padding: 2rem;
 		border-radius: 8px;
-		border: 1px solid #2a2a2a;
+		border: 1px solid var(--border-subtle);
 	}
 
 	.form-group {
···
 
 	label {
 		display: block;
-		color: #aaa;
+		color: var(--text-secondary);
 		margin-bottom: 0.5rem;
 		font-size: 0.9rem;
 	}
···
 	input[type='text'] {
 		width: 100%;
 		padding: 0.75rem;
-		background: #0a0a0a;
-		border: 1px solid #333;
+		background: var(--bg-primary);
+		border: 1px solid var(--border-default);
 		border-radius: 4px;
-		color: white;
+		color: var(--text-primary);
 		font-size: 1rem;
 		font-family: inherit;
 		transition: all 0.2s;
···
 
 	input[type='text']:focus {
 		outline: none;
-		border-color: #3a7dff;
+		border-color: var(--accent);
 	}
 
 	input[type='text']:disabled {
···
 	textarea {
 		width: 100%;
 		padding: 0.75rem;
-		background: #0a0a0a;
-		border: 1px solid #333;
+		background: var(--bg-primary);
+		border: 1px solid var(--border-default);
 		border-radius: 4px;
-		color: white;
+		color: var(--text-primary);
 		font-size: 1rem;
 		font-family: inherit;
 		transition: all 0.2s;
···
 
 	textarea:focus {
 		outline: none;
-		border-color: #3a7dff;
+		border-color: var(--accent);
 	}
 
 	textarea:disabled {
···
 	.hint {
 		margin-top: 0.5rem;
 		font-size: 0.85rem;
-		color: #666;
+		color: var(--text-muted);
 	}
 
 	.message {
···
 	}
 
 	.message.success {
-		background: rgba(46, 160, 67, 0.1);
-		border: 1px solid rgba(46, 160, 67, 0.3);
-		color: #5ce87b;
+		background: color-mix(in srgb, var(--success) 10%, transparent);
+		border: 1px solid color-mix(in srgb, var(--success) 30%, transparent);
+		color: var(--success);
 	}
 
 	.message.error {
-		background: rgba(233, 69, 96, 0.1);
-		border: 1px solid rgba(233, 69, 96, 0.3);
-		color: #ff6b6b;
+		background: color-mix(in srgb, var(--error) 10%, transparent);
+		border: 1px solid color-mix(in srgb, var(--error) 30%, transparent);
+		color: var(--error);
 	}
 
 	.avatar-preview {
···
 		height: 64px;
 		border-radius: 50%;
 		object-fit: cover;
-		border: 2px solid #333;
+		border: 2px solid var(--border-default);
 	}
 
 	input[type='file'] {
 		width: 100%;
 		padding: 0.75rem;
-		background: #0a0a0a;
-		border: 1px solid #333;
+		background: var(--bg-primary);
+		border: 1px solid var(--border-default);
 		border-radius: 4px;
-		color: white;
+		color: var(--text-primary);
 		font-size: 0.9rem;
 		font-family: inherit;
 		cursor: pointer;
···
 	.format-hint {
 		margin-top: 0.25rem;
 		font-size: 0.8rem;
-		color: #888;
+		color: var(--text-tertiary);
 	}
 
 	.file-info {
 		margin-top: 0.5rem;
 		font-size: 0.85rem;
-		color: #666;
+		color: var(--text-muted);
 	}
 
 	button {
 		width: 100%;
 		padding: 0.75rem;
-		background: #3a7dff;
-		color: white;
+		background: var(--accent);
+		color: var(--text-primary);
 		border: none;
 		border-radius: 4px;
 		font-size: 1rem;
···
 	}
 
 	button:hover:not(:disabled) {
-		background: #2868e6;
+		background: var(--accent-hover);
 		transform: translateY(-1px);
-		box-shadow: 0 4px 12px rgba(58, 125, 255, 0.3);
+		box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
 	}
 
 	button:disabled {
···
 	}
 
 	.empty {
-		color: #666;
+		color: var(--text-muted);
 		padding: 2rem;
 		text-align: center;
-		background: #1a1a1a;
+		background: var(--bg-tertiary);
 		border-radius: 8px;
-		border: 1px solid #2a2a2a;
+		border: 1px solid var(--border-subtle);
 	}
 
 	.tracks-list {
···
 		align-items: flex-start;
 		justify-content: space-between;
 		gap: 1rem;
-		background: #1a1a1a;
-		border: 1px solid #2a2a2a;
+		background: var(--bg-tertiary);
+		border: 1px solid var(--border-subtle);
 		border-radius: 6px;
 		padding: 1rem;
 		transition: all 0.2s;
···
 	}
 
 	.track-item.copyright-flagged {
-		background: rgba(233, 165, 69, 0.08);
-		border-color: rgba(233, 165, 69, 0.3);
+		background: color-mix(in srgb, var(--warning) 8%, transparent);
+		border-color: color-mix(in srgb, var(--warning) 30%, transparent);
 	}
 
 	.track-item.copyright-flagged .track-title {
-		color: #e9a545;
+		color: var(--warning);
 	}
 
 	.track-item.copyright-flagged .track-artwork img,
···
 		height: 48px;
 		border-radius: 4px;
 		overflow: hidden;
-		background: #0f0f0f;
-		border: 1px solid #282828;
+		background: var(--bg-primary);
+		border: 1px solid var(--border-subtle);
 	}
 
 	.track-artwork img {
···
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		color: #555;
+		color: var(--text-muted);
 	}
 
 	.track-item:hover {
-		background: #222;
-		border-color: #333;
+		background: var(--bg-hover);
+		border-color: var(--border-default);
 	}
 
 	.track-info {
···
 
 	.edit-label {
 		font-size: 0.85rem;
-		color: #aaa;
+		color: var(--text-secondary);
 	}
 
 	.track-title {
 		font-weight: 600;
 		font-size: 1rem;
 		margin-bottom: 0.25rem;
-		color: #fff;
+		color: var(--text-primary);
 		display: flex;
 		align-items: center;
 		gap: 0.5rem;
···
 	.copyright-flag {
 		display: inline-flex;
 		align-items: center;
-		color: #e9a545;
+		color: var(--warning);
 		flex-shrink: 0;
 		text-decoration: none;
 	}
 
 	.copyright-flag:hover {
-		color: #ffb860;
+		color: color-mix(in srgb, var(--warning) 80%, white);
 	}
 
 	a.copyright-flag {
···
 
 	.track-meta {
 		font-size: 0.9rem;
-		color: #b0b0b0;
+		color: var(--text-secondary);
 		margin-bottom: 0.25rem;
 		display: flex;
 		flex-direction: column;
···
 	}
 
 	.features-label {
-		color: #8ab3ff;
+		color: var(--accent-hover);
 		font-weight: 600;
 	}
 
 	.features-list {
-		color: #8ab3ff;
+		color: var(--accent-hover);
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
 
 	.meta-album {
-		color: #909090;
+		color: var(--text-tertiary);
 	}
 
 	.album-link {
-		color: #909090;
+		color: var(--text-tertiary);
 		text-decoration: none;
 		transition: color 0.2s;
 		white-space: nowrap;
···
 	.meta-tag {
 		display: inline-block;
 		padding: 0.1rem 0.4rem;
-		background: rgba(138, 179, 255, 0.15);
-		color: #8ab3ff;
+		background: color-mix(in srgb, var(--accent) 15%, transparent);
+		color: var(--accent-hover);
 		border-radius: 3px;
 		font-size: 0.8rem;
 		font-weight: 500;
···
 	}
 
 	.meta-tag:hover {
-		background: rgba(138, 179, 255, 0.25);
-		color: #a8c8ff;
+		background: color-mix(in srgb, var(--accent) 25%, transparent);
+		color: var(--accent-hover);
 	}
 
 	.track-date {
 		font-size: 0.85rem;
-		color: #666;
+		color: var(--text-muted);
 	}
 
 	.track-actions {
···
 		height: 36px;
 		padding: 0;
 		background: transparent;
-		border: 1px solid #444;
+		border: 1px solid var(--border-emphasis);
 		border-radius: 4px;
-		color: #888;
+		color: var(--text-tertiary);
 		font-size: 1.2rem;
 		line-height: 1;
 		cursor: pointer;
···
 	}
 
 	.edit-btn:hover {
-		background: rgba(106, 159, 255, 0.1);
-		border-color: rgba(106, 159, 255, 0.5);
+		background: color-mix(in srgb, var(--accent) 10%, transparent);
+		border-color: color-mix(in srgb, var(--accent) 50%, transparent);
 		color: var(--accent);
 		transform: none;
 		box-shadow: none;
···
 	}
 
 	.delete-btn:hover {
-		background: rgba(233, 69, 96, 0.1);
-		border-color: rgba(233, 69, 96, 0.5);
-		color: #ff6b6b;
+		background: color-mix(in srgb, var(--error) 10%, transparent);
+		border-color: color-mix(in srgb, var(--error) 50%, transparent);
+		color: var(--error);
 		transform: none;
 		box-shadow: none;
 	}
 
 	.save-btn:hover {
-		background: rgba(46, 160, 67, 0.1);
-		border-color: rgba(46, 160, 67, 0.5);
-		color: #5ce87b;
+		background: color-mix(in srgb, var(--success) 10%, transparent);
+		border-color: color-mix(in srgb, var(--success) 50%, transparent);
+		color: var(--success);
 		transform: none;
 		box-shadow: none;
 	}
 
 	.cancel-btn:hover {
-		background: rgba(136, 136, 136, 0.1);
-		border-color: rgba(136, 136, 136, 0.5);
-		color: #aaa;
+		background: color-mix(in srgb, var(--text-tertiary) 10%, transparent);
+		border-color: color-mix(in srgb, var(--text-tertiary) 50%, transparent);
+		color: var(--text-secondary);
 		transform: none;
 		box-shadow: none;
 	}
···
 	.edit-input {
 		width: 100%;
 		padding: 0.5rem;
-		background: #0a0a0a;
-		border: 1px solid #333;
+		background: var(--bg-primary);
+		border: 1px solid var(--border-default);
 		border-radius: 4px;
-		color: white;
+		color: var(--text-primary);
 		font-size: 0.9rem;
 		font-family: inherit;
 	}
···
 		align-items: center;
 		gap: 0.75rem;
 		padding: 0.5rem;
-		background: #0a0a0a;
-		border: 1px solid #333;
+		background: var(--bg-primary);
+		border: 1px solid var(--border-default);
 		border-radius: 4px;
 		margin-bottom: 0.5rem;
 	}
···
 	}
 
 	.current-image-label {
-		color: #888;
+		color: var(--text-tertiary);
 		font-size: 0.85rem;
 	}
 
···
 	}
 
 	.album-card {
-		background: #1a1a1a;
-		border: 1px solid #2a2a2a;
+		background: var(--bg-tertiary);
+		border: 1px solid var(--border-subtle);
 		border-radius: 8px;
 		padding: 1rem;
 		transition: all 0.2s;
···
 	}
 
 	.album-card:hover {
-		border-color: #3a3a3a;
+		border-color: var(--border-emphasis);
 		transform: translateY(-2px);
 	}
 
···
 		aspect-ratio: 1;
 		border-radius: 6px;
 		overflow: hidden;
-		background: #0f0f0f;
-		border: 1px solid #282828;
+		background: var(--bg-primary);
+		border: 1px solid var(--border-subtle);
 	}
 
 	.album-cover {
···
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		color: #606060;
+		color: var(--text-muted);
 		gap: 0.5rem;
 	}
 
 	.album-cover-placeholder .file-name {
 		font-size: 0.85rem;
-		color: #888;
+		color: var(--text-tertiary);
 		text-align: center;
 		word-break: break-word;
 		padding: 0 0.5rem;
···
 
 	.album-cover-placeholder .file-size {
 		font-size: 0.75rem;
-		color: #666;
+		color: var(--text-muted);
 	}
 
 	.album-info {
···
 	.album-title {
 		font-size: 1rem;
 		font-weight: 600;
-		color: #e8e8e8;
+		color: var(--text-primary);
 		margin: 0 0 0.25rem 0;
 		overflow: hidden;
 		text-overflow: ellipsis;
···
 
 	.album-stats {
 		font-size: 0.85rem;
-		color: #888;
+		color: var(--text-tertiary);
 		margin: 0;
 	}
 
···
 
 	.edit-cover-btn {
 		padding: 0.5rem;
-		background: #2a2a2a;
-		border: 1px solid #3a3a3a;
+		background: var(--border-subtle);
+		border: 1px solid var(--border-emphasis);
 		border-radius: 4px;
 		cursor: pointer;
 		transition: all 0.2s;
···
 	}
 
 	.edit-cover-btn:hover {
-		background: #3a3a3a;
+		background: var(--border-emphasis);
 		border-color: var(--accent);
 		color: var(--accent);
 	}
···
 		aspect-ratio: 1;
 		border-radius: 6px;
 		overflow: hidden;
-		background: #0f0f0f;
-		border: 1px solid #282828;
+		background: var(--bg-primary);
+		border: 1px solid var(--border-subtle);
 	}
 
 	.album-edit-actions {
···
 
 	.file-input-label {
 		font-size: 0.85rem;
-		color: #b0b0b0;
+		color: var(--text-secondary);
 		font-weight: 500;
 		margin-bottom: 0.25rem;
 	}
 
 	.album-edit-actions .file-input {
 		padding: 0.5rem;
-		background: #2a2a2a;
-		border: 1px solid #3a3a3a;
+		background: var(--border-subtle);
+		border: 1px solid var(--border-emphasis);
 		border-radius: 4px;
-		color: #e8e8e8;
+		color: var(--text-primary);
 		font-size: 0.85rem;
 		cursor: pointer;
 	}
 
 	.album-edit-actions .file-input:hover {
-		background: #3a3a3a;
+		background: var(--border-emphasis);
 		border-color: var(--accent);
 	}
 
···
 
 	.data-control {
 		padding: 1.5rem;
-		background: #1a1a1a;
-		border: 1px solid #2a2a2a;
+		background: var(--bg-tertiary);
+		border: 1px solid var(--border-subtle);
 		border-radius: 8px;
 		display: flex;
 		justify-content: space-between;
···
 		font-size: 1rem;
 		font-weight: 600;
 		margin: 0 0 0.25rem 0;
-		color: #e8e8e8;
+		color: var(--text-primary);
 	}
 
 	.control-description {
 		font-size: 0.85rem;
-		color: #888;
+		color: var(--text-tertiary);
 		margin: 0;
 	}
 
 	.export-btn {
 		padding: 0.6rem 1.25rem;
-		background: #3a7dff;
-		color: white;
+		background: var(--accent);
+		color: var(--text-primary);
 		border: none;
 		border-radius: 6px;
 		font-size: 0.9rem;
···
 	}
 
 	.export-btn:hover:not(:disabled) {
-		background: #2868e6;
+		background: var(--accent-hover);
 		transform: translateY(-1px);
-		box-shadow: 0 4px 12px rgba(58, 125, 255, 0.3);
+		box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
 	}
 
 	.export-btn:disabled {
···
 
 	/* danger zone / account deletion */
 	.danger-zone {
-		border-color: #4a2020;
-		background: #1a1010;
+		border-color: color-mix(in srgb, var(--error) 30%, var(--bg-tertiary));
+		background: color-mix(in srgb, var(--error) 8%, var(--bg-tertiary));
 		flex-direction: column;
 		align-items: stretch;
 	}
 
 	.danger-zone .control-info h3 {
-		color: #ff6b6b;
+		color: var(--error);
 	}
 
 	.danger-zone .control-description a {
-		color: #888;
+		color: var(--text-tertiary);
 		text-decoration: underline;
 	}
 
 	.danger-zone .control-description a:hover {
-		color: #aaa;
+		color: var(--text-secondary);
 	}
 
 	.delete-account-btn {
 		padding: 0.6rem 1.25rem;
 		background: transparent;
-		color: #ff6b6b;
-		border: 1px solid #ff6b6b;
+		color: var(--error);
+		border: 1px solid var(--error);
 		border-radius: 6px;
 		font-size: 0.9rem;
 		font-weight: 600;
···
 	}
 
 	.delete-account-btn:hover {
-		background: #ff6b6b;
-		color: white;
+		background: var(--error);
+		color: var(--text-primary);
 	}
 
 	.delete-confirm-panel {
 		margin-top: 1rem;
 		padding-top: 1rem;
-		border-top: 1px solid #3a2020;
+		border-top: 1px solid color-mix(in srgb, var(--error) 25%, var(--bg-tertiary));
 	}
 
 	.delete-warning {
-		color: #ff8888;
+		color: color-mix(in srgb, var(--error) 80%, white);
 		font-size: 0.9rem;
 		margin: 0 0 1rem 0;
 		line-height: 1.5;
···
 		align-items: center;
 		gap: 0.5rem;
 		font-size: 0.9rem;
-		color: #aaa;
+		color: var(--text-secondary);
 		cursor: pointer;
 	}
 
···
 	.atproto-note {
 		margin: 0.5rem 0 0 0;
 		font-size: 0.85rem;
-		color: #777;
+		color: var(--text-muted);
 	}
 
 	.atproto-note a {
-		color: #999;
+		color: var(--text-tertiary);
 		text-decoration: underline;
 	}
 
 	.atproto-note a:hover {
-		color: #bbb;
+		color: var(--text-secondary);
 	}
 
 	.atproto-warning {
 		margin: 0.75rem 0 0 0;
 		padding: 0.75rem;
-		background: rgba(255, 107, 107, 0.1);
-		border-left: 2px solid #ff6b6b;
+		background: color-mix(in srgb, var(--error) 10%, transparent);
+		border-left: 2px solid var(--error);
 		font-size: 0.85rem;
-		color: #cc8888;
+		color: color-mix(in srgb, var(--error) 70%, var(--text-secondary));
 		line-height: 1.5;
 	}
 
 	.confirm-prompt {
 		font-size: 0.9rem;
-		color: #888;
+		color: var(--text-tertiary);
 		margin: 0 0 0.5rem 0;
 	}
 
 	.confirm-prompt strong {
-		color: #e8e8e8;
+		color: var(--text-primary);
 		font-family: monospace;
 	}
 
 	.confirm-input {
 		width: 100%;
 		padding: 0.75rem;
-		background: #0a0505;
-		border: 1px solid #3a2020;
+		background: color-mix(in srgb, var(--error) 5%, var(--bg-primary));
+		border: 1px solid color-mix(in srgb, var(--error) 25%, var(--bg-tertiary));
 		border-radius: 6px;
-		color: #e8e8e8;
+		color: var(--text-primary);
 		font-size: 0.9rem;
 		font-family: monospace;
 		margin-bottom: 1rem;
···
 
 	.confirm-input:focus {
 		outline: none;
-		border-color: #ff6b6b;
+		border-color: var(--error);
 	}
 
 	.confirm-input::placeholder {
-		color: #555;
+		color: var(--text-muted);
 	}
 
 	.delete-actions {
···
 	.cancel-btn {
 		padding: 0.6rem 1.25rem;
 		background: transparent;
-		color: #888;
-		border: 1px solid #444;
+		color: var(--text-tertiary);
+		border: 1px solid var(--border-emphasis);
 		border-radius: 6px;
 		font-size: 0.9rem;
 		cursor: pointer;
···
 	}
 
 	.cancel-btn:hover:not(:disabled) {
-		border-color: #666;
-		color: #aaa;
+		border-color: var(--text-muted);
+		color: var(--text-secondary);
 	}
 
 	.cancel-btn:disabled {
···
 
 	.confirm-delete-btn {
 		padding: 0.6rem 1.25rem;
-		background: #ff4444;
-		color: white;
+		background: var(--error);
+		color: var(--text-primary);
 		border: none;
 		border-radius: 6px;
 		font-size: 0.9rem;
···
 	}
 
 	.confirm-delete-btn:hover:not(:disabled) {
-		background: #ff2222;
+		background: color-mix(in srgb, var(--error) 80%, black);
 	}
 
 	.confirm-delete-btn:disabled {
···
 	.toggle-slider {
 		width: 44px;
 		height: 24px;
-		background: #333;
+		background: var(--border-default);
 		border-radius: 12px;
 		position: relative;
 		transition: background 0.2s;
···
 		left: 2px;
 		width: 20px;
 		height: 20px;
-		background: #888;
+		background: var(--text-tertiary);
 		border-radius: 50%;
 		transition: all 0.2s;
 	}
 
 	.toggle-switch input:checked + .toggle-slider {
-		background: var(--accent, #3a7dff);
+		background: var(--accent);
 	}
 
 	.toggle-switch input:checked + .toggle-slider::after {
 		left: 22px;
-		background: white;
+		background: var(--text-primary);
 	}
 
 	.toggle-label {
 		font-size: 0.85rem;
-		color: #888;
+		color: var(--text-tertiary);
 		min-width: 60px;
 	}
 
···
 		align-items: center;
 		gap: 0.5rem;
 		font-size: 0.9rem;
-		color: #888;
+		color: var(--text-tertiary);
 	}
 
 	.expires-select {
 		padding: 0.5rem 0.75rem;
-		background: #0a0a0a;
-		border: 1px solid #333;
+		background: var(--bg-primary);
+		border: 1px solid var(--border-default);
 		border-radius: 4px;
-		color: white;
+		color: var(--text-primary);
 		font-size: 0.9rem;
 		font-family: inherit;
 		cursor: pointer;
···
 		display: flex;
 		align-items: center;
 		gap: 0.5rem;
-		background: #0a0a0a;
-		border: 1px solid #333;
+		background: var(--bg-primary);
+		border: 1px solid var(--border-default);
 		border-radius: 6px;
 		padding: 0.75rem;
 		overflow: hidden;
···
 		flex: 1;
 		font-family: monospace;
 		font-size: 0.85rem;
-		color: #5ce87b;
+		color: var(--success);
 		word-break: break-all;
 		user-select: all;
 	}
···
 	.copy-btn,
 	.dismiss-btn {
 		padding: 0.4rem 0.75rem;
-		background: #2a2a2a;
-		border: 1px solid #3a3a3a;
+		background: var(--border-subtle);
+		border: 1px solid var(--border-emphasis);
 		border-radius: 4px;
-		color: #888;
+		color: var(--text-tertiary);
 		font-size: 0.85rem;
 		cursor: pointer;
 		transition: all 0.2s;
···
 	}
 
 	.copy-btn:hover {
-		background: #3a3a3a;
+		background: var(--border-emphasis);
 		border-color: var(--accent);
 		color: var(--accent);
 	}
 
 	.dismiss-btn:hover {
-		background: #3a3a3a;
-		border-color: #666;
-		color: #aaa;
+		background: var(--border-emphasis);
+		border-color: var(--text-muted);
+		color: var(--text-secondary);
 	}
 
 	.token-warning {
 		font-size: 0.85rem;
-		color: #e9a545;
+		color: var(--warning);
 		margin: 0;
 	}
 
···
 	.tokens-header {
 		font-size: 0.9rem;
 		font-weight: 600;
-		color: #888;
+		color: var(--text-tertiary);
 		margin: 0 0 0.75rem 0;
 	}
 
···
 		align-items: center;
 		gap: 1rem;
 		padding: 0.75rem;
-		background: #0a0a0a;
-		border: 1px solid #2a2a2a;
+		background: var(--bg-primary);
+		border: 1px solid var(--border-subtle);
 		border-radius: 6px;
 	}
 
···
 	.token-name {
 		font-family: monospace;
 		font-size: 0.9rem;
-		color: #e8e8e8;
+		color: var(--text-primary);
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
···
 
 	.token-meta {
 		font-size: 0.8rem;
-		color: #666;
+		color: var(--text-muted);
 	}
 
 	.revoke-btn {
 		padding: 0.4rem 0.75rem;
 		background: transparent;
-		border: 1px solid #4a2020;
+		border: 1px solid color-mix(in srgb, var(--error) 30%, var(--bg-tertiary));
 		border-radius: 4px;
-		color: #ff6b6b;
+		color: var(--error);
 		font-size: 0.85rem;
 		cursor: pointer;
 		transition: all 0.2s;
···
 	}
 
 	.revoke-btn:hover:not(:disabled) {
-		background: rgba(255, 107, 107, 0.1);
-		border-color: #ff6b6b;
+		background: color-mix(in srgb, var(--error) 10%, transparent);
+		border-color: var(--error);
 	}
 
 	.revoke-btn:disabled {
···
 
 	.token-name-input {
 		padding: 0.5rem 0.75rem;
-		background: #0a0a0a;
-		border: 1px solid #333;
+		background: var(--bg-primary);
+		border: 1px solid var(--border-default);
 		border-radius: 4px;
-		color: white;
+		color: var(--text-primary);
 		font-size: 0.9rem;
 		font-family: inherit;
 		min-width: 150px;
···
 
 	.loading-tokens {
 		font-size: 0.9rem;
-		color: #666;
+		color: var(--text-muted);
 		margin: 0;
 	}
 </style>

frontend/src/routes/profile/setup/+page.svelte

···
 		align-items: center;
 		justify-content: center;
 		min-height: 100vh;
-		color: #888;
+		color: var(--text-tertiary);
 	}
 
 	main {
···
 	}
 
 	.subtitle {
-		color: #aaa;
+		color: var(--text-secondary);
 		margin-bottom: 2rem;
 		line-height: 1.5;
 	}
···
 		padding: 1rem;
 		border-radius: 4px;
 		margin-bottom: 1.5rem;
-		background: rgba(233, 69, 96, 0.1);
-		border: 1px solid rgba(233, 69, 96, 0.3);
-		color: #ff6b6b;
+		background: color-mix(in srgb, var(--error) 10%, transparent);
+		border: 1px solid color-mix(in srgb, var(--error) 30%, transparent);
+		color: var(--error);
 	}
 
 	form {
-		background: #1a1a1a;
+		background: var(--bg-tertiary);
 		padding: 2rem;
 		border-radius: 8px;
-		border: 1px solid #2a2a2a;
+		border: 1px solid var(--border-subtle);
 	}
 
 	.form-group {
···
 
 	label {
 		display: block;
-		color: #aaa;
+		color: var(--text-secondary);
 		margin-bottom: 0.5rem;
 		font-size: 0.9rem;
 		font-weight: 500;
···
 	textarea {
 		width: 100%;
 		padding: 0.75rem;
-		background: #0a0a0a;
-		border: 1px solid #333;
+		background: var(--bg-primary);
+		border: 1px solid var(--border-default);
 		border-radius: 4px;
-		color: white;
+		color: var(--text-primary);
 		font-size: 1rem;
 		font-family: inherit;
 		transition: all 0.2s;
···
 	input[type='url']:focus,
 	textarea:focus {
 		outline: none;
-		border-color: #3a7dff;
+		border-color: var(--accent);
 	}
 
 	input[type='text']:disabled,
···
 	.hint {
 		margin-top: 0.5rem;
 		font-size: 0.85rem;
-		color: #666;
+		color: var(--text-muted);
 	}
 
 	button {
 		width: 100%;
 		padding: 0.75rem;
-		background: #3a7dff;
+		background: var(--accent);
 		color: white;
 		border: none;
 		border-radius: 4px;
···
 	}
 
 	button:hover:not(:disabled) {
-		background: #2868e6;
+		background: var(--accent-hover);
 		transform: translateY(-1px);
-		box-shadow: 0 4px 12px rgba(58, 125, 255, 0.3);
+		box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
 	}
 
 	button:disabled {

frontend/src/routes/tag/[name]/+page.svelte

···
 		gap: 0.4rem;
 		font-size: var(--text-page-heading);
 		font-weight: 700;
-		color: #8ab3ff;
+		color: var(--accent-hover);
 		margin: 0 0 0.5rem 0;
 	}
 

frontend/src/routes/track/[id]/+page.svelte

···
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		background: #1a1a1a;
-		border: 1px solid #282828;
-		color: #606060;
+		background: var(--bg-tertiary);
+		border: 1px solid var(--border-subtle);
+		color: var(--text-muted);
 	}
 
 	.track-info-wrapper {
···
 	.track-title {
 		font-size: 2rem;
 		font-weight: 700;
-		color: #e8e8e8;
+		color: var(--text-primary);
 		margin: 0;
 		line-height: 1.2;
 		text-align: center;
···
 		justify-content: center;
 		gap: 0.75rem;
 		flex-wrap: wrap;
-		color: #b0b0b0;
+		color: var(--text-secondary);
 		font-size: 1.1rem;
 	}
 
 	.separator {
-		color: #555;
+		color: var(--text-muted);
 		font-size: 0.8rem;
 	}
 
 	.artist-link {
-		color: #b0b0b0;
+		color: var(--text-secondary);
 		text-decoration: none;
 		font-weight: 500;
 		transition: color 0.2s;
···
 	}
 
 	.features-label {
-		color: #8ab3ff;
+		color: var(--accent-hover);
 		font-weight: 500;
 	}
 
 	.feature-link {
-		color: #8ab3ff;
+		color: var(--accent-hover);
 		text-decoration: none;
 		font-weight: 500;
 		transition: color 0.2s;
···
 	}
 
 	.feature-separator {
-		color: #8ab3ff;
+		color: var(--accent-hover);
 	}
 
 	.album {
-		color: #909090;
+		color: var(--text-tertiary);
 		display: flex;
 		align-items: center;
 		gap: 0.5rem;
···
 
 	.album-link {
 		text-decoration: none;
-		color: #909090;
+		color: var(--text-tertiary);
 		transition: color 0.2s;
 		display: flex;
 		align-items: center;
···
 	}
 
 	.track-stats {
-		color: #808080;
+		color: var(--text-tertiary);
 		font-size: 0.95rem;
 		display: flex;
 		align-items: center;
···
 	.tag-badge {
 		display: inline-block;
 		padding: 0.25rem 0.6rem;
-		background: rgba(138, 179, 255, 0.15);
-		color: #8ab3ff;
+		background: color-mix(in srgb, var(--accent) 15%, transparent);
+		color: var(--accent-hover);
 		border-radius: 4px;
 		font-size: 0.85rem;
 		font-weight: 500;
···
 	}
 
 	.tag-badge:hover {
-		background: rgba(138, 179, 255, 0.25);
-		color: #a8c8ff;
+		background: color-mix(in srgb, var(--accent) 25%, transparent);
+		color: var(--accent-hover);
 	}
 
 	.mobile-side-buttons {
···
 		gap: 0.5rem;
 		padding: 0.75rem 1.5rem;
 		background: var(--accent);
-		color: #000;
+		color: var(--bg-primary);
 		border: none;
 		border-radius: 24px;
 		font-size: 0.95rem;
···
 		gap: 0.5rem;
 		padding: 0.75rem 1.5rem;
 		background: transparent;
-		color: #e8e8e8;
-		border: 1px solid #404040;
+		color: var(--text-primary);
+		border: 1px solid var(--border-emphasis);
 		border-radius: 24px;
 		font-size: 0.95rem;
 		font-weight: 500;
···
 	.btn-queue:hover {
 		border-color: var(--accent);
 		color: var(--accent);
-		background: rgba(138, 179, 255, 0.1);
+		background: color-mix(in srgb, var(--accent) 10%, transparent);
 	}
 
 	@media (max-width: 768px) {
···
 		max-width: 500px;
 		margin: 1.5rem auto 0;
 		padding-top: 1.5rem;
-		border-top: 1px solid #2a2a2a;
+		border-top: 1px solid var(--border-subtle);
 	}
 
 	.comments-title {
 		font-size: 1rem;
 		font-weight: 600;
-		color: #e8e8e8;
+		color: var(--text-primary);
 		margin: 0 0 0.75rem 0;
 		display: flex;
 		align-items: center;
···
 	}
 
 	.comment-count {
-		color: #888;
+		color: var(--text-tertiary);
 		font-weight: 400;
 	}
 
···
 	.comment-input {
 		flex: 1;
 		padding: 0.6rem 0.8rem;
-		background: #1a1a1a;
-		border: 1px solid #333;
+		background: var(--bg-tertiary);
+		border: 1px solid var(--border-default);
 		border-radius: 6px;
-		color: #e8e8e8;
+		color: var(--text-primary);
 		font-size: 0.9rem;
 		font-family: inherit;
 	}
···
 	}
 
 	.comment-input::placeholder {
-		color: #666;
+		color: var(--text-muted);
 	}
 
 	.comment-submit {
 		padding: 0.6rem 1rem;
 		background: var(--accent);
-		color: #000;
+		color: var(--bg-primary);
 		border: none;
 		border-radius: 6px;
 		font-size: 0.9rem;
···
 	}
 
 	.login-prompt {
-		color: #888;
+		color: var(--text-tertiary);
 		font-size: 0.9rem;
 		margin-bottom: 1rem;
 	}
···
 	}
 
 	.no-comments {
-		color: #666;
+		color: var(--text-muted);
 		font-size: 0.9rem;
 		text-align: center;
 		padding: 1rem;
···
 		max-height: 300px;
 		overflow-y: auto;
 		scrollbar-width: thin;
-		scrollbar-color: #333 #0a0a0a;
+		scrollbar-color: var(--border-default) var(--bg-primary);
 	}
 
 	.comments-list::-webkit-scrollbar {
···
 	}
 
 	.comments-list::-webkit-scrollbar-track {
-		background: #0a0a0a;
+		background: var(--bg-primary);
 		border-radius: 4px;
 	}
 
 	.comments-list::-webkit-scrollbar-thumb {
-		background: #333;
+		background: var(--border-default);
 		border-radius: 4px;
 	}
 
 	.comments-list::-webkit-scrollbar-thumb:hover {
-		background: #444;
+		background: var(--border-emphasis);
 	}
 
 	.comment {
···
 		align-items: flex-start;
 		gap: 0.6rem;
 		padding: 0.5rem 0.6rem;
-		background: #1a1a1a;
+		background: var(--bg-tertiary);
 		border-radius: 6px;
 		transition: background 0.15s;
 	}
 
 	.comment:hover {
-		background: #222;
+		background: var(--bg-hover);
 	}
 
 	.comment-timestamp {
 		font-size: 0.8rem;
 		font-weight: 600;
 		color: var(--accent);
-		background: rgba(138, 179, 255, 0.1);
+		background: color-mix(in srgb, var(--accent) 10%, transparent);
 		padding: 0.2rem 0.5rem;
 		border-radius: 4px;
 		white-space: nowrap;
···
 	}
 
 	.comment-timestamp:hover {
-		background: rgba(138, 179, 255, 0.25);
+		background: color-mix(in srgb, var(--accent) 25%, transparent);
 		transform: scale(1.05);
 	}
 
···
 	}
 
 	.comment-separator {
-		color: #444;
+		color: var(--border-emphasis);
 		font-size: 0.6rem;
 	}
 
 	.comment-time {
 		font-size: 0.75rem;
-		color: #666;
+		color: var(--text-muted);
 	}
 
 	.comment-avatar {
···
 		width: 20px;
 		height: 20px;
 		border-radius: 50%;
-		background: #333;
+		background: var(--border-default);
 	}
 
 	.comment-author {
 		font-size: 0.85rem;
 		font-weight: 500;
-		color: #b0b0b0;
+		color: var(--text-secondary);
 		text-decoration: none;
 	}
 
···
 
 	.comment-text {
 		font-size: 0.9rem;
-		color: #e8e8e8;
+		color: var(--text-primary);
 		margin: 0;
 		line-height: 1.4;
 		word-break: break-word;
···
 	}
 
 	.edited-indicator {
-		color: #555;
+		color: var(--text-muted);
 		font-style: italic;
 	}
 
···
 		background: none;
 		border: none;
 		padding: 0;
-		color: #666;
+		color: var(--text-muted);
 		font-size: 0.8rem;
 		cursor: pointer;
 		transition: color 0.15s;
···
 	}
 
 	.comment-action-btn.delete:hover {
-		color: #ff6b6b;
+		color: var(--error);
 	}
 
 	/* mobile: always show actions */
···
 	.comment-edit-input {
 		width: 100%;
 		padding: 0.5rem;
-		background: #0a0a0a;
-		border: 1px solid #333;
+		background: var(--bg-primary);
+		border: 1px solid var(--border-default);
 		border-radius: 4px;
-		color: #e8e8e8;
+		color: var(--text-primary);
 		font-size: 0.9rem;
 		font-family: inherit;
 	}
···
 
 	.edit-form-btn.save {
 		background: var(--accent);
-		color: #000;
+		color: var(--bg-primary);
 		border: none;
 		font-weight: 500;
 	}
···
 
 	.edit-form-btn.cancel {
 		background: transparent;
-		color: #888;
-		border: 1px solid #444;
+		color: var(--text-tertiary);
+		border: 1px solid var(--border-emphasis);
 	}
 
 	.edit-form-btn.cancel:hover {
-		border-color: #666;
-		color: #aaa;
+		border-color: var(--text-muted);
+		color: var(--text-secondary);
 	}
 
 	/* comments container prevents layout shift during transition */
···
 	}
 
 	.comment.skeleton:hover {
-		background: #1a1a1a;
+		background: var(--bg-tertiary);
 	}
 
 	.skeleton-bar {
 		background: linear-gradient(
 			90deg,
-			#1a1a1a 0%,
-			#242424 50%,
-			#1a1a1a 100%
+			var(--bg-tertiary) 0%,
+			var(--bg-hover) 50%,
+			var(--bg-tertiary) 100%
 		);
 		background-size: 200% 100%;
 		animation: shimmer 1.5s ease-in-out infinite;

frontend/src/routes/u/[handle]/+error.svelte

···
 
 	h1 {
 		font-size: 4rem;
-		color: #e8e8e8;
+		color: var(--text-primary);
 		margin: 0 0 1rem 0;
 		font-weight: 700;
 	}
 
 	.error-message {
 		font-size: 1.25rem;
-		color: #b0b0b0;
+		color: var(--text-secondary);
 		margin: 0 0 0.5rem 0;
 	}
 
 	.error-detail {
 		font-size: 1rem;
-		color: #808080;
+		color: var(--text-tertiary);
 		margin: 0 0 2rem 0;
 	}
 
···
 
 	.bsky-link {
 		background: var(--accent);
-		color: #000;
+		color: var(--bg-primary);
 	}
 
 	.bsky-link:hover {
-		background: #6a9fff;
-		border-color: #6a9fff;
+		background: var(--accent-hover);
+		border-color: var(--accent-hover);
 	}
 
 	.home-link:hover {
 		background: var(--accent);
-		color: #000;
+		color: var(--bg-primary);
 	}
 
 	@media (max-width: 768px) {

frontend/src/routes/u/[handle]/+page.svelte

···
 		gap: 2rem;
 		margin-bottom: 3rem;
 		padding: 2rem;
-		background: #141414;
-		border: 1px solid #282828;
+		background: var(--bg-secondary);
+		border: 1px solid var(--border-subtle);
 		border-radius: 8px;
 	}
 
···
 		height: 120px;
 		border-radius: 50%;
 		object-fit: cover;
-		border: 3px solid #333;
+		border: 3px solid var(--border-default);
 	}
 
 	.artist-info h1 {
 		font-size: 2.5rem;
 		margin: 0 0 0.5rem 0;
-		color: #e8e8e8;
+		color: var(--text-primary);
 		word-wrap: break-word;
 		overflow-wrap: break-word;
 		hyphens: auto;
 	}
 
 	.handle {
-		color: #909090;
+		color: var(--text-tertiary);
 		font-size: 1.1rem;
 		margin: 0 0 1rem 0;
 		text-decoration: none;
···
 	}
 
 	.bio {
-		color: #b0b0b0;
+		color: var(--text-secondary);
 		line-height: 1.6;
 		margin: 0;
 	}
···
 
 	.analytics h2 {
 		margin-bottom: 1.5rem;
-		color: #e8e8e8;
+		color: var(--text-primary);
 		font-size: 1.8rem;
 	}
 
···
 	}
 
 	.section-header span {
-		color: #808080;
+		color: var(--text-tertiary);
 		font-size: 0.9rem;
 		text-transform: uppercase;
 		letter-spacing: 0.1em;
···
 		gap: 1rem;
 		align-items: center;
 		padding: 1rem;
-		background: #141414;
-		border: 1px solid #282828;
+		background: var(--bg-secondary);
+		border: 1px solid var(--border-subtle);
 		border-radius: 10px;
 		color: inherit;
 		text-decoration: none;
···
 		border-radius: 6px;
 		overflow: hidden;
 		flex-shrink: 0;
-		background: #1a1a1a;
-		border: 1px solid #333;
+		background: var(--bg-tertiary);
+		border: 1px solid var(--border-default);
 		display: flex;
 		align-items: center;
 		justify-content: center;
···
 	}
 
 	.album-cover-placeholder {
-		color: #666;
+		color: var(--text-muted);
 		display: flex;
 		align-items: center;
 		justify-content: center;
···
 	.album-card-meta h3 {
 		margin: 0 0 0.35rem 0;
 		font-size: 1.05rem;
-		color: #fafafa;
+		color: var(--text-primary);
 		text-transform: lowercase;
 		white-space: nowrap;
 		overflow: hidden;
···
 
 	.album-card-meta p {
 		margin: 0;
-		color: #9a9a9a;
+		color: var(--text-tertiary);
 		font-size: 0.9rem;
 		display: flex;
 		align-items: center;
···
 
 	.album-card-meta .dot {
 		font-size: 0.65rem;
-		color: #555;
+		color: var(--text-muted);
 	}
 
 	.stat-card {
-		background: #141414;
-		border: 1px solid #282828;
+		background: var(--bg-secondary);
+		border: 1px solid var(--border-subtle);
 		border-radius: 8px;
 		padding: 1.5rem;
 		transition: border-color 0.2s;
 	}
 
 	.stat-card:hover {
-		border-color: #404040;
+		border-color: var(--border-emphasis);
 	}
 
 	.stat-value {
···
 	}
 
 	.stat-label {
-		color: #909090;
+		color: var(--text-tertiary);
 		font-size: 0.9rem;
 		text-transform: lowercase;
 		line-height: 1;
···
 	.stat-card.top-item:hover {
 		border-color: var(--accent);
 		transform: translateY(-2px);
-		box-shadow: 0 4px 12px rgba(138, 179, 255, 0.2);
+		box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 20%, transparent);
 	}
 
 	.top-item-title {
 		font-size: 1.2rem;
-		color: #e8e8e8;
+		color: var(--text-primary);
 		margin: 0.5rem 0;
 		font-weight: 500;
 		line-height: 1;
···
 	.skeleton-bar {
 		background: linear-gradient(
 			90deg,
-			#1a1a1a 0%,
-			#242424 50%,
-			#1a1a1a 100%
+			var(--bg-tertiary) 0%,
+			var(--bg-hover) 50%,
+			var(--bg-tertiary) 100%
 		);
 		background-size: 200% 100%;
 		animation: shimmer 1.5s ease-in-out infinite;
···
 
 	.tracks h2 {
 		margin-bottom: 1.5rem;
-		color: #e8e8e8;
+		color: var(--text-primary);
 		font-size: 1.8rem;
 	}
 
 	.tracks-loading {
 		margin-left: 0.75rem;
 		font-size: 0.95rem;
-		color: #9ea5b4;
+		color: var(--text-secondary);
 		font-weight: 400;
 		text-transform: lowercase;
 	}
···
 	.empty-state {
 		text-align: center;
 		padding: 3rem;
-		background: #141414;
-		border: 1px solid #282828;
+		background: var(--bg-secondary);
+		border: 1px solid var(--border-subtle);
 		border-radius: 8px;
 	}
 
 	.empty-message {
-		color: #b0b0b0;
+		color: var(--text-secondary);
 		font-size: 1.25rem;
 		margin: 0 0 0.5rem 0;
 	}
 
 	.empty-detail {
-		color: #808080;
+		color: var(--text-tertiary);
 		margin: 0 0 1.5rem 0;
 	}
 
···
 
 	.bsky-link:hover {
 		background: var(--accent);
-		color: #000;
+		color: var(--bg-primary);
 	}
 
 	/* respect reduced motion preference */

frontend/src/routes/u/[handle]/album/[slug]/+page.svelte

···
 		width: 200px;
 		height: 200px;
 		border-radius: 8px;
-		background: #1a1a1a;
-		border: 1px solid #282828;
+		background: var(--bg-tertiary);
+		border: 1px solid var(--border-subtle);
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		color: #606060;
+		color: var(--text-muted);
 	}
 
 	.album-info-wrapper {
···
 		font-size: 0.75rem;
 		font-weight: 600;
 		letter-spacing: 0.1em;
-		color: #808080;
+		color: var(--text-tertiary);
 		margin: 0;
 	}
 
···
 		font-size: 3rem;
 		font-weight: 700;
 		margin: 0;
-		color: #ffffff;
+		color: var(--text-primary);
 		line-height: 1.1;
 		word-wrap: break-word;
 		overflow-wrap: break-word;
···
 		align-items: center;
 		gap: 0.75rem;
 		font-size: 0.95rem;
-		color: #b0b0b0;
+		color: var(--text-secondary);
 	}
 
 	.artist-link {
-		color: #b0b0b0;
+		color: var(--text-secondary);
 		text-decoration: none;
 		font-weight: 600;
 		transition: color 0.2s;
···
 	}
 
 	.meta-separator {
-		color: #555;
+		color: var(--text-muted);
 		font-size: 0.7rem;
 	}
 
···
 
 	.play-button {
 		background: var(--accent);
-		color: #000;
+		color: var(--bg-primary);
 	}
 
 	.play-button:hover {
···
 
 	.queue-button {
 		background: transparent;
-		color: #e8e8e8;
-		border: 1px solid #333;
+		color: var(--text-primary);
+		border: 1px solid var(--border-default);
 	}
 
 	.queue-button:hover {
···
 	.section-heading {
 		font-size: 1.25rem;
 		font-weight: 600;
-		color: #e8e8e8;
+		color: var(--text-primary);
 		margin-bottom: 1rem;
 		text-transform: lowercase;
 	}