Make dark mode more colorful and give chrome bars a full tint

Mirror the earlier light-mode pastel/colorful pass for dark mode:
boost tc()'s lightness and chroma, and richen --mf-bg/--mf-elevated/
--mf-panel-bg/--mf-bar-bg/--mf-hairline the same way, so dark mode
reads as colorful instead of near-grayscale.

Sidebar, Queue, and MobileHeader used bg-bg directly, so in dark mode
they stayed almost black regardless of hue. Add --mf-chrome-bg (an
alias to --mf-bg in light mode, a solid color-mix of --mf-hero-tint
into --mf-bg in dark mode) and switch those three to bg-chrome, so
they read as a full, solid colored bar in dark mode instead of a
fading gradient (per feedback: a whole bar, not a gradient).

Also fixes glass-bar (PlayerBar/TabsBar): it set
`background-image: var(--mf-bar-bg)`, but --mf-bar-bg is a plain
color, not a valid <image>, so the declaration was silently dropped
and these bars never actually showed their tint in either mode. Changed
to background-color.

web-player/src/lib/components/layout/MobileHeader.svelte

@@ -18,7 +18,7 @@
 </script>
 
 <header
-	class="sticky top-0 z-(--z-sticky) flex h-14 items-center justify-between border-b border-hairline bg-bg/85 page-x backdrop-blur-md sm:hidden"
+	class="sticky top-0 z-(--z-sticky) flex h-14 items-center justify-between border-b border-hairline bg-chrome/85 page-x backdrop-blur-md sm:hidden"
 >
 	<a href="/">
 		<Logo size="sm" />

web-player/src/lib/components/layout/Sidebar.svelte

@@ -31,7 +31,7 @@
 </script>
 
 <aside
-	class="hidden shrink-0 flex-col border-r border-hairline bg-bg p-5 lg:flex"
+	class="hidden shrink-0 flex-col border-r border-hairline bg-chrome p-5 lg:flex"
 	style="width:var(--mf-sidebar-w)"
 >
 	<nav class="flex flex-col gap-1">