Simplify design

web-player/src/lib/components/player/PlayerBar.svelte

@@ -32,7 +32,7 @@
 	<div class="flex min-w-0 flex-1 flex-col items-center gap-2">
 		<TransportControls />
 		<div class="flex w-full max-w-hero items-center gap-3">
-			<span class="min-w-8 text-right text-xs text-fg-3 tabular-nums">
+			<span class="min-w-8 text-right text-xs text-fg-2 tabular-nums">
 				{fmtTime(player.progress)}
 			</span>
 			<Slider
@@ -42,13 +42,13 @@
 				oninput={seek}
 				variant="seek"
 			/>
-			<span class="min-w-8 text-xs text-fg-3 tabular-nums">
+			<span class="min-w-8 text-xs text-fg-2 tabular-nums">
 				{fmtTime(player.current.duration)}
 			</span>
 		</div>
 	</div>
 	<div class="hidden w-(--mf-player-side-w) shrink-0 items-center justify-end gap-3.5 sm:flex">
-		<Volume2 class="size-icon-sm shrink-0 text-fg-3" strokeWidth={1.8} />
+		<Volume2 class="size-icon-sm shrink-0 text-fg-2" strokeWidth={1.8} />
 		<Slider
 			value={player.volume}
 			max={100}

web-player/src/lib/components/player/PlayerDock.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import PlayerBar from './PlayerBar.svelte';
 	import TabsBar from '../layout/TabsBar.svelte';
-	import Alert from '$lib/components/ui/primitives/Alert.svelte';
 	import { player } from '$lib/player/player.svelte';
 	import type { SessionUser } from '$lib/types';
 
@@ -17,11 +16,6 @@
 <div
 	class="pointer-events-none fixed inset-x-0 bottom-0 z-(--z-sticky) flex flex-col lg:left-(--mf-sidebar-w)"
 >
-	{#if player.error}
-		<div class="pointer-events-auto px-4 pb-2.5">
-			<Alert tone="danger">{player.error}</Alert>
-		</div>
-	{/if}
 	{#if hasTrack}
 		<PlayerBar />
 	{/if}

web-player/src/lib/components/player/Queue.svelte

@@ -7,7 +7,7 @@
 	import { fmtTime } from '$lib/utils/format';
 	import X from '@lucide/svelte/icons/x';
 	import { fly } from 'svelte/transition';
-	import { cubicOut } from 'svelte/easing';
+	import { expoOut } from 'svelte/easing';
 
 	const upcoming = $derived.by(() => {
 		const idx = player.tracks.findIndex((t) => t.id === player.currentId);
@@ -17,7 +17,7 @@
 
 {#if queuePanel.open}
 	<aside
-		transition:fly={{ x: 24, duration: 220, easing: cubicOut }}
+		transition:fly={{ x: 24, duration: 200, easing: expoOut }}
 		class="hidden shrink-0 flex-col border-l border-hairline px-4 pt-5 sm:flex"
 		style="width:var(--mf-queue-w); padding-bottom:calc(var(--mf-player-h) + 2rem)"
 	>
@@ -29,8 +29,8 @@
 		</div>
 
 		{#if player.current.id}
-			<p class="mb-3 text-eyebrow text-fg-3">Reproduciendo</p>
-			<div class="mb-6 rounded-control bg-accent-tint p-2.5">
+			<p class="mb-3 text-eyebrow text-fg-2">Reproduciendo</p>
+			<div class="mb-6 rounded-control surface-active p-2.5">
 				<MediaIdentity
 					trackId={player.current.id}
 					title={player.current.title}
@@ -42,12 +42,12 @@
 		{/if}
 
 		<div class="mb-3 flex items-center justify-between gap-3">
-			<span class="min-w-0 flex-1 truncate text-eyebrow text-fg-3"> A continuación </span>
+			<span class="min-w-0 flex-1 truncate text-eyebrow text-fg-2"> A continuación </span>
 			{#if upcoming.length > 0}
 				<button
 					type="button"
 					onclick={() => player.clearUpcoming()}
-					class="shrink-0 text-xs text-fg-3 transition-colors hover:text-fg"
+					class="shrink-0 text-xs text-fg-2 transition-colors hover:text-fg"
 				>
 					Vaciar
 				</button>
@@ -68,13 +68,12 @@
 				>
 					{#snippet trailing()}
 						{#if track.duration}
-							<span class="shrink-0 text-xs text-muted tabular-nums">{fmtTime(track.duration)}</span
-							>
+							<span class="shrink-0 text-xs text-fg-2 tabular-nums">{fmtTime(track.duration)}</span>
 						{/if}
 					{/snippet}
 				</ListRow>
 			{:else}
-				<p class="px-2 py-6 text-center text-xs text-fg-3">No hay más canciones en la cola.</p>
+				<p class="px-2 py-6 text-center text-xs text-fg-2">No hay más canciones en la cola.</p>
 			{/each}
 		</div>
 	</aside>

web-player/src/lib/components/player/TrackInfo.svelte

@@ -49,7 +49,7 @@
 		<ArtistLink
 			name={player.current.artist || '—'}
 			ownerUserId={player.current.ownerUserId}
-			class="mt-0.5 text-xs text-fg-3"
+			class="mt-0.5 text-xs text-fg-2"
 		/>
 	</div>
 	{#if !compact}

web-player/src/lib/components/player/TransportControls.svelte

@@ -13,7 +13,7 @@
 	const sideClass = $derived(
 		compact
 			? 'grid size-10 place-items-center text-fg opacity-70 transition active:scale-90'
-			: 'flex text-fg-2 transition-colors hover:text-fg active:scale-90'
+			: 'flex text-fg-2 transition hover:text-fg active:scale-90'
 	);
 </script>
 
@@ -24,7 +24,7 @@
 			onclick={() => player.toggleShuffle()}
 			aria-pressed={player.shuffle}
 			aria-label="Aleatorio"
-			class="transition-colors hover:text-fg {player.shuffle ? 'text-accent' : 'text-fg-3'}"
+			class="transition-colors hover:text-fg {player.shuffle ? 'text-accent' : 'text-fg-2'}"
 		>
 			<Shuffle class="size-4" strokeWidth={1.8} />
 		</button>
@@ -56,7 +56,7 @@
 			onclick={() => player.toggleRepeat()}
 			aria-pressed={player.repeat}
 			aria-label="Repetir"
-			class="transition-colors hover:text-fg {player.repeat ? 'text-accent' : 'text-fg-3'}"
+			class="transition-colors hover:text-fg {player.repeat ? 'text-accent' : 'text-fg-2'}"
 		>
 			<Repeat class="size-4" strokeWidth={1.8} />
 		</button>