web-player: single source of truth for theme, no light-mode flash

Remove the duplication of the ~18 per-hue dynamic tokens between
theme.css and buildThemeTokens(): theme.css now only defines fixed
neutrals, surfaces, layout and z-index; hue/mode-dependent values
come solely from tokens.ts, injected via SSR as an inline <style> in
+layout.svelte (tokensToCss helper) and reapplied on every hue
change. app.html sets data-theme before first paint by reading
localStorage, removing the dark flash when light mode was saved.

The two inline-style backgrounds become @utility
app-backdrop/app-vignette; the main's bottom padding becomes
@utility app-main, driven by --mf-dock-h via [data-has-track].

Note: <style>{expr}</style> doesn't interpolate in Svelte (it
compiles as component-scoped CSS) — the SSR block is injected with
{@html `<style>${css}</style>`} since the content is fully generated
(no user input).

Verified in the browser: --mf-accent/--mf-bg resolve correctly during
SSR, data-theme='light' applies before the first render with no
flash.

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

@@ -97,3 +97,9 @@ export function applyThemeTokens(
 ) {
 	for (const [key, value] of Object.entries(tokens)) target.style.setProperty(key, value);
 }
+
+export function tokensToCss(tokens: ThemeTokens): string {
+	return Object.entries(tokens)
+		.map(([key, value]) => `${key}:${value}`)
+		.join(';');
+}