web-player: buttons (Button, IconButton, PlayButton)

Button: subtle variants (primary/secondary, left unchanged per the
user's call), glass (formerly secondaryOnGlow, with its own
font-normal), accent, strong (cta-strong/ink, replacing the `!`
overrides on the Home hero), danger. Uses the --color-btn* tokens
instead of bg-[var(--mf-btn-...)]. Radius unified to rounded-control.

IconButton: adds shape (square/round), size (xs/sm/md/lg), tone
(muted/subtle/plain), pressed (aria-pressed + text-accent),
href/reload (links), surface (permanent background + hover to
surface-hover instead of the generic `hover` alias, which matched
surface-2 and gave no contrast).

New PlayButton: a single place for the play/pause SVGs, strong/glass
variants, as="span" for non-interactive overlays. Replaces
TransportControls' main button, the MixTile overlay, and the "Top
result" circle in Explore.

Migrated to IconButton: close queue, "Create playlist" (Sidebar),
Like (TrackInfo, with pressed), queue (PlayerExtras), back (TopBar),
login (MobileHeader), and the row actions in tables (remove/add, size
xs). BackLink uses size-icon-sm and drops a duplicate hover.

Decision (not blocking): remove TopBar's decorative "forward" button
and PlayerExtras' decorative AlignJustify icon (visually dead code).
TransportControls' buttons (shuffle/prev/next/repeat) are
deliberately left unmigrated: they currently have no background or
hit-box of their own, and IconButton always applies a fixed-size
box — migrating them would have added a visible hover pill that
couldn't be verified without Docker this session.

Verified with npm run check/build.

web-player/src/lib/components/ui/MixTile.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import Play from '@lucide/svelte/icons/play';
 	import Artwork from './Artwork.svelte';
+	import PlayButton from './PlayButton.svelte';
 	import { player } from '$lib/player/player.svelte';
 	import { queueItemForTarget } from '$lib/tracks';
 	import { mixItemTarget, type Mix } from '$lib/mixes';
@@ -36,14 +36,13 @@
 		<div
 			class="pointer-events-none absolute inset-0 bg-linear-to-b from-transparent from-45% to-scrim/40"
 		></div>
-		<button
-			type="button"
+		<PlayButton
+			variant="glass"
+			size="sm"
 			onclick={play}
-			aria-label="Reproducir {mix.title}"
-			class="absolute right-2.5 bottom-2.5 grid h-9.5 w-9.5 place-items-center rounded-full border border-on-art/12 bg-ink/76 text-fg opacity-0 backdrop-blur transition-opacity duration-150 group-hover/tile:opacity-100"
-		>
-			<Play class="h-3.5 w-3.5" fill="currentColor" />
-		</button>
+			label="Reproducir {mix.title}"
+			class="absolute right-2.5 bottom-2.5 opacity-0 transition-opacity duration-150 group-hover/tile:opacity-100"
+		/>
 	</Artwork>
 	<div class="mt-3.25 truncate text-sm font-semibold text-fg">
 		{mix.title}