web-player: P4 — botones (Button, IconButton, PlayButton)

Button: variantes subtle (primary/secondary, se mantienen iguales por
decisión del usuario), glass (antes secondaryOnGlow, con font-normal
propio), accent, strong (cta-strong/ink, sustituye los overrides `!`
del hero de Inicio), danger. Usa los tokens --color-btn* de P1 en vez
de bg-[var(--mf-btn-...)]. Radio unificado a rounded-control.

IconButton: añade shape (square/round), size (xs/sm/md/lg), tone
(muted/subtle/plain), pressed (aria-pressed + text-accent), href/reload
(enlaces), surface (fondo permanente + hover a surface-hover en vez del
alias `hover` genérico, que coincide con surface-2 y no daba contraste).

PlayButton nuevo: un solo sitio para los SVG de play/pausa, variantes
strong/glass, as="span" para overlays no interactivos. Sustituye el
botón principal de TransportControls, el overlay de MixTile y el
círculo de "Mejor resultado" en Explorar.

Migra a IconButton: cerrar cola, "Crear playlist" (Sidebar), Me gusta
(TrackInfo, con pressed), cola (PlayerExtras), atrás (TopBar), login
(MobileHeader) y las acciones de fila en tablas (quitar/añadir,
size xs). BackLink usa size-icon-sm y quita un hover duplicado.

Decisión (sin bloquear): se elimina el botón "adelante" decorativo de
TopBar y el icono AlignJustify decorativo de PlayerExtras (código
muerto visual). Los botones de TransportControls (shuffle/prev/next/
repeat) se dejan sin migrar a propósito: hoy no tienen fondo ni
hit-box propios y IconButton siempre aplica una caja de tamaño fijo —
migrarlos habría añadido una píldora de hover visible no verificable
sin Docker en esta sesión.

Verificado con npm run check/build.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

web-player/src/routes/+page.svelte

@@ -150,18 +150,12 @@
 				</p>
 				<div class="mt-6.5 flex flex-wrap items-center gap-2.5">
 					{#if spotlight}
-						<Button
-							variant="accent"
-							class="!bg-cta-strong !text-ink hover:!brightness-95"
-							onclick={playSpotlight}
-						>
+						<Button variant="strong" onclick={playSpotlight}>
 							{heroPlaying ? 'Pausar' : 'Reanudar'}
 							{spotlight.name}
 						</Button>
 					{/if}
-					<Button href="/explore" variant="secondaryOnGlow" class="!font-normal"
-						>Explorar música</Button
-					>
+					<Button href="/explore" variant="glass">Explorar música</Button>
 				</div>
 			</div>
 
@@ -274,7 +268,7 @@
 					</p>
 					<div class="mt-5 flex gap-2.5">
 						<Button variant="accent" onclick={playSpotlight}>Reproducir</Button>
-						<Button variant="secondaryOnGlow" onclick={shuffleSpotlight}>Aleatorio</Button>
+						<Button variant="glass" onclick={shuffleSpotlight}>Aleatorio</Button>
 					</div>
 				</div>
 				<div class="flex flex-col gap-0.5 p-5.5 sm:p-6">