web-player: P1 — tokens base del sistema de diseño

Añade de forma aditiva (sin migrar componentes) los tokens de la
sección B.1 del plan de refactor: radios (tag/thumb), tamaños de
carátula e icono, anchos de contenedor, tracking/leading tipográfico,
colores de botón (--color-btn*), recetas @utility de tipografía
(text-display-*, text-eyebrow, text-body, text-count), trazo de icono
(stroke-thin/regular/bold), superficies/grids (glass-bar, grid-cards*,
theme-transition) y el stagger de .animate-enter vía --i. Añade
variables de layout (--mf-player-side-w, --mf-menu-w, --mf-submenu-w,
--mf-range-*) y z-index semántico en theme.css. Limpia utilidades de
color sin uso (--color-accent-dim/glow/hair/line/muted, --color-on-accent)
y borra --mf-sidebar-bg (sin importadores) de theme.css y tokens.ts.
Scrollbar pasa a tokens con variante de modo claro.

Verificado con npm run build (Tailwind compila los @utility con
variantes responsive dentro de @apply).

web-player/src/lib/theme/theme.css

@@ -4,7 +4,6 @@
 	   page never flashes unstyled before hydration. See theme/tokens.ts. */
 	--mf-bg: oklch(0.068 0.008 145);
 	--mf-elevated: oklch(0.11 0.012 145);
-	--mf-sidebar-bg: linear-gradient(180deg, oklch(0.095 0.012 145), oklch(0.068 0.007 145));
 	--mf-panel-bg: oklch(0.09 0.01 145 / 0.28);
 	--mf-bar-bg: oklch(0.105 0.012 145 / 0.9);
 	--mf-hairline: oklch(0.62 0.03 145 / 0.08);
@@ -82,6 +81,23 @@
 	--mf-nav-h: 66px;
 	--mf-player-h: 78px;
 	--mf-safe-b: env(safe-area-inset-bottom, 0px);
+	--mf-player-side-w: 16rem;
+	--mf-menu-w: 15rem;
+	--mf-submenu-w: 16rem;
+	--mf-range-h: 3.5px;
+	--mf-range-thumb: 11px;
+	--mf-volume-w: 84px;
+
+	--mf-scrollbar: rgba(255, 255, 255, 0.18);
+	--mf-scrollbar-hover: rgba(255, 255, 255, 0.32);
+
+	--z-raised: 10;
+	--z-sticky: 20;
+	--z-backdrop: 30;
+	--z-menu: 40;
+	--z-submenu: 50;
+	--z-modal: 60;
+	--z-grain: 80;
 }
 
 /* PlayerBar switches from its compact row to the full layout at `sm` (640px). */
@@ -110,7 +126,6 @@
 :root[data-theme='light'] {
 	--mf-bg: oklch(0.97 0.006 90);
 	--mf-elevated: oklch(0.99 0.003 90);
-	--mf-sidebar-bg: oklch(0.97 0.006 90); /*linear-gradient(180deg, oklch(0.985 0.004 90), oklch(0.965 0.006 90));*/
 	--mf-panel-bg: oklch(0.97 0.006 90 / 0.7);
 	--mf-bar-bg: oklch(0.97 0.006 90 / 0.9);
 	--mf-hairline: rgba(0, 0, 0, 0.08);
@@ -128,6 +143,9 @@
 	--mf-btn-secondary-bg: rgba(0, 0, 0, 0.09);
 	--mf-btn-secondary-bg-hover: rgba(0, 0, 0, 0.14);
 
+	--mf-scrollbar: rgba(0, 0, 0, 0.18);
+	--mf-scrollbar-hover: rgba(0, 0, 0, 0.32);
+
 	--mf-border: rgba(0, 0, 0, 0.08);
 	--mf-border-strong: rgba(0, 0, 0, 0.14);
 	--mf-track: rgba(0, 0, 0, 0.12);

web-player/src/lib/theme/tokens.ts

@@ -67,9 +67,6 @@ export function buildThemeTokens(hue: number, mode: 'dark' | 'light' = 'dark'):
 		'--mf-accent-btn-bg-hover': `oklch(${r(accentL)} ${r(accentC)} ${H} / 0.24)`,
 		'--mf-bg': light ? `oklch(0.97 0.006 ${H})` : `oklch(0.068 0.008 ${H})`,
 		'--mf-elevated': light ? `oklch(0.99 0.003 ${H})` : `oklch(0.11 0.012 ${H})`,
-		'--mf-sidebar-bg': light
-			? `linear-gradient(180deg, oklch(0.985 0.004 ${H}), oklch(0.965 0.006 ${H}))`
-			: `linear-gradient(180deg, oklch(0.095 0.012 ${H}), oklch(0.068 0.007 ${H}))`,
 		'--mf-panel-bg': light ? `oklch(0.97 0.006 ${H} / 0.7)` : `oklch(0.09 0.01 ${H} / 0.28)`,
 		'--mf-bar-bg': light ? `oklch(0.97 0.006 ${H} / 0.9)` : `oklch(0.105 0.012 ${H} / 0.9)`,
 		'--mf-hairline': light ? `oklch(0.3 0.02 ${H} / 0.1)` : `oklch(0.62 0.03 ${H} / 0.08)`,