Tie secondary button color to the page background instead of a flat tint

secondary was fully bg-transparent (invisible at rest) or a flat neutral
overlay (clashed next to accent-tinted buttons and looked different
depending on what surface it sat on). Use bg-elevated instead, which is
already derived from the same hue as --mf-bg, so the button is always a
faint, minimal step above whatever page background it's on, and shifts
with it automatically.

Drop the now-unused --color-btn/--mf-btn-bg tokens.

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

@@ -36,7 +36,7 @@
 
 	const variants = {
 		primary: 'bg-cta-strong text-ink hover:brightness-95',
-		secondary: 'bg-btn backdrop-blur-md text-fg-2 hover:bg-btn-hover hover:text-fg',
+		secondary: 'bg-elevated text-fg-2 hover:bg-btn-hover hover:text-fg',
 		accent: 'bg-accent-btn text-accent-soft hover:bg-accent-btn-hover',
 		danger: 'bg-danger text-on-art hover:brightness-110'
 	};

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

@@ -14,7 +14,6 @@
 	--mf-surface: rgba(255, 255, 255, 0.022);
 	--mf-surface-2: rgba(255, 255, 255, 0.045);
 	--mf-surface-hover: rgba(255, 255, 255, 0.06);
-	--mf-btn-bg: rgba(255, 255, 255, 0.06);
 	--mf-btn-bg-hover: var(--mf-surface-hover);
 
 	--mf-border: rgba(255, 255, 255, 0.04);
@@ -80,7 +79,6 @@
 	--mf-surface: rgba(0, 0, 0, 0.035);
 	--mf-surface-2: rgba(0, 0, 0, 0.06);
 	--mf-surface-hover: #e8eceb;
-	--mf-btn-bg: rgba(0, 0, 0, 0.07);
 	--mf-btn-bg-hover: var(--mf-surface-hover);
 
 	--mf-scrollbar: rgba(0, 0, 0, 0.18);

web-player/src/routes/layout.css

@@ -30,7 +30,6 @@
 	--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);
 
 	--radius-tag: 0.25rem;