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/MobileHeader.svelte

@@ -6,6 +6,7 @@
 	import MenuItem from './ui/MenuItem.svelte';
 	import AccountMenu from './ui/AccountMenu.svelte';
 	import Avatar from './ui/Avatar.svelte';
+	import IconButton from './ui/IconButton.svelte';
 
 	interface Props {
 		user: SessionUser | null;
@@ -50,14 +51,9 @@
 				{/snippet}
 			</AccountMenu>
 		{:else}
-			<a
-				href="/auth/login"
-				data-sveltekit-reload
-				aria-label="Iniciar sesión"
-				class="flex items-center rounded-full p-1.5 text-fg-3 transition hover:bg-hover hover:text-fg"
-			>
-				<LogIn class="h-6 w-6" strokeWidth={2} />
-			</a>
+			<IconButton href="/auth/login" reload label="Iniciar sesión" shape="round" size="md">
+				<LogIn class="size-icon-lg" strokeWidth={2} />
+			</IconButton>
 		{/if}
 	</div>
 </header>