web-player: base design system tokens

Add, additively (no component migration yet), the tokens from
section B.1 of the refactor plan: radii (tag/thumb), cover and icon
sizes, container widths, typographic tracking/leading, button colors
(--color-btn*), typography @utility recipes (text-display-*,
text-eyebrow, text-body, text-count), icon stroke
(stroke-thin/regular/bold), surfaces/grids (glass-bar, grid-cards*,
theme-transition), and the .animate-enter stagger via --i. Add
layout variables (--mf-player-side-w, --mf-menu-w, --mf-submenu-w,
--mf-range-*) and semantic z-index in theme.css. Clean up unused
color utilities (--color-accent-dim/glow/hair/line/muted,
--color-on-accent) and remove --mf-sidebar-bg (no importers) from
theme.css and tokens.ts. Scrollbar moves to tokens with a light-mode
variant.

Verified with npm run build (Tailwind compiles the @utility recipes
with responsive variants inside @apply).

web-player/docs/frontend-refactor-plan.md

@@ -773,7 +773,7 @@ Tareas:
 | Parte | Estado | Commit | Notas / decisiones tomadas |
 | ----- | ------ | ------ | -------------------------- |
 | P0    | ✅     | (pendiente) | Button primary/secondary se mantienen iguales (decisión del usuario) |
-| P1    | ⬜     |        |                            |
+| P1    | ✅     | (pendiente) | Verificado con `build` (Tailwind compila `@apply sm:` dentro de `@utility`); sin QA visual autenticada (Docker no disponible en esta sesión) |
 | P2    | ⬜     |        |                            |
 | P3    | ⬜     |        |                            |
 | P4    | ⬜     |        |                            |

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

@@ -44,7 +44,7 @@
 		secondary: subtleButton,
 		secondaryOnGlow: subtleButtonOnGlow,
 		accent: 'bg-accent-btn text-accent-soft hover:bg-accent-btn-hover',
-		danger: 'bg-danger text-on-accent hover:brightness-110'
+		danger: 'bg-danger text-on-art hover:brightness-110'
 	};
 
 	const classes = $derived(

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)`,

web-player/src/routes/layout.css

@@ -20,15 +20,9 @@
 	--color-muted: var(--mf-text-4);
 	--color-accent: var(--mf-accent);
 	--color-accent-soft: var(--mf-accent-title);
-	--color-accent-muted: var(--mf-accent-muted);
 	--color-accent-tint: var(--mf-accent-soft-bg);
-	--color-accent-line: var(--mf-accent-line);
-	--color-accent-hair: var(--mf-accent-hair);
 	--color-accent-btn: var(--mf-accent-btn-bg);
 	--color-accent-btn-hover: var(--mf-accent-btn-bg-hover);
-	--color-accent-glow: var(--mf-accent-glow);
-	--color-accent-dim: var(--mf-accent-dim);
-	--color-on-accent: var(--mf-on-art);
 	--color-ink: var(--mf-ink);
 	--color-cta-strong: var(--mf-cta-strong-bg);
 	--color-scrim: var(--mf-scrim);
@@ -36,13 +30,42 @@
 	--color-on-art-2: var(--mf-on-art-2);
 	--color-danger: oklch(63.7% 0.15 25.331);
 	--color-danger-fg: oklch(88.5% 0.062 18.334);
+	--color-btn: var(--mf-btn-bg);
+	--color-btn-hover: var(--mf-btn-bg-hover);
+	--color-btn-glass: var(--mf-btn-secondary-bg);
+	--color-btn-glass-hover: var(--mf-btn-secondary-bg-hover);
 
+	--radius-tag: 0.25rem;
+	--radius-thumb: 0.5rem;
 	--radius-control: 0.625rem;
-	--radius-panel: 1.125rem;
-	--radius-panel-lg: 1.375rem;
 	--radius-art: 0.8125rem;
 	--radius-art-lg: 1.125rem;
-	--radius-art-round: 1.75rem;
+	--radius-panel: 1.125rem;
+	--radius-panel-lg: 1.375rem;
+
+	--spacing-cover-xs: 2.25rem;
+	--spacing-cover-sm: 2.625rem;
+	--spacing-cover-md: 3rem;
+	--spacing-cover-lg: 3.5rem;
+	--spacing-cover-xl: 5.5rem;
+	--spacing-cover-2xl: 8.5rem;
+	--spacing-cover-hero: 9rem;
+	--spacing-cover-hero-sm: 10.25rem;
+
+	--spacing-icon-xs: 0.875rem;
+	--spacing-icon-sm: 1rem;
+	--spacing-icon-md: 1.125rem;
+	--spacing-icon-lg: 1.25rem;
+	--spacing-icon-xl: 2.25rem;
+
+	--container-prose-sm: 26rem;
+	--container-hero: 34rem;
+	--container-search: 30rem;
+	--container-cta: 20rem;
+
+	--tracking-display: -0.02em;
+	--tracking-eyebrow: 0.1em;
+	--leading-body: 1.65;
 }
 
 @utility page-x {
@@ -73,6 +96,84 @@
 	scrollbar-gutter: stable;
 }
 
+@utility stroke-thin {
+	stroke-width: 1.3;
+}
+@utility stroke-regular {
+	stroke-width: 1.8;
+}
+@utility stroke-bold {
+	stroke-width: 2.5;
+}
+
+@utility text-display-1 {
+	@apply font-display text-3xl font-medium tracking-tight sm:text-4xl;
+}
+@utility text-display-2 {
+	@apply font-display text-2xl font-medium tracking-tight;
+}
+@utility text-display-3 {
+	@apply font-display text-xl font-medium tracking-display;
+}
+@utility text-display-4 {
+	@apply font-display text-lg font-medium tracking-tight;
+}
+@utility text-eyebrow {
+	@apply text-xs font-medium tracking-widest uppercase;
+}
+@utility text-body {
+	@apply text-sm leading-body;
+}
+@utility text-count {
+	@apply text-xs tabular-nums;
+}
+
+@utility theme-transition {
+	transition: background 0.5s ease-out;
+}
+@utility glass-bar {
+	background-image: var(--mf-bar-bg);
+	border-top: 1px solid var(--mf-hairline);
+	backdrop-filter: blur(24px);
+	transition: background 0.5s ease-out;
+}
+@utility grid-cards {
+	display: grid;
+	gap: --spacing(3);
+	grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr));
+
+	@media (width >= 40rem) {
+		gap: --spacing(4);
+		grid-template-columns: repeat(auto-fill, minmax(10.3125rem, 1fr));
+	}
+}
+@utility grid-cards-lg {
+	display: grid;
+	gap: --spacing(3);
+	grid-template-columns: repeat(auto-fill, minmax(11.25rem, 1fr));
+
+	@media (width >= 40rem) {
+		gap: --spacing(4);
+		grid-template-columns: repeat(auto-fill, minmax(13.125rem, 1fr));
+	}
+}
+@utility grid-tiles {
+	display: grid;
+	gap: --spacing(5);
+	grid-template-columns: repeat(auto-fill, minmax(10.25rem, 1fr));
+}
+@utility grid-wide {
+	display: grid;
+	gap: --spacing(3.5);
+	grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
+}
+
+@layer base {
+	svg.lucide {
+		stroke-width: 1.8;
+	}
+}
+
 :root {
 	color-scheme: dark;
 }
@@ -161,6 +262,7 @@ button:disabled {
 
 .animate-enter {
 	animation: fade-up 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
+	animation-delay: calc(min(var(--i, 0), 10) * 45ms);
 }
 
 .animate-pop {
@@ -193,7 +295,7 @@ button:disabled {
 html {
 	scroll-behavior: smooth;
 	scrollbar-width: thin;
-	scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
+	scrollbar-color: var(--mf-scrollbar) transparent;
 	background-color: var(--mf-bg);
 	-webkit-tap-highlight-color: transparent;
 	overflow-x: hidden;
@@ -212,7 +314,7 @@ body::after {
 	content: '';
 	position: fixed;
 	inset: 0;
-	z-index: 80;
+	z-index: var(--z-grain);
 	pointer-events: none;
 	opacity: 0.035;
 	mix-blend-mode: overlay;
@@ -225,12 +327,12 @@ body::after {
 }
 
 ::-webkit-scrollbar-thumb {
-	background-color: rgba(255, 255, 255, 0.18);
+	background-color: var(--mf-scrollbar);
 	border-radius: 9999px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-	background-color: rgba(255, 255, 255, 0.32);
+	background-color: var(--mf-scrollbar-hover);
 }
 
 ::-webkit-scrollbar-track {