Polish typography, button states, and login screen

Applies the display typeface (already used for small section labels)
consistently to every major heading — page titles, hero titles on
album/playlist/mix pages, the home hero, the sidebar/mobile wordmark, and
empty-state titles — instead of only the smaller ones, fixing an
inconsistent visual hierarchy. Also fixes a couple of real bugs found along
the way: Input had a focus border color with no border width to show it,
Button/IconButton had no focus-visible ring at all, and SectionHeading's
letter-spacing only applied when it had an actions slot.

Button's secondary/subtle variants drop their harsh border and flat grey
hover for a softer accent-tinted wash. The accent (and the per-track
extracted accent) is desaturated for a calmer, more pastel feel without
touching lightness, so on-accent text contrast is unaffected.

The login screen gets the same treatment plus a subtle ambient glow (reusing
the home page's existing accent-gradient technique) and a fluid,
viewport-scaled headline instead of a few fixed breakpoints, so it fills the
available space on wide screens instead of staying pinned to one size.

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

@@ -22,7 +22,7 @@
 <header
 	class="sticky top-0 z-40 flex h-14 items-center justify-between border-b border-line bg-bg/85 page-x backdrop-blur-md md:hidden"
 >
-	<a href="/" class="text-lg font-semibold tracking-wide">Musify</a>
+	<a href="/" class="font-display text-lg font-semibold tracking-tight text-fg">Musify</a>
 
 	<div class="relative" bind:this={menuRef}>
 		<button

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

@@ -82,7 +82,7 @@
 	class="sticky top-0 hidden h-screen shrink-0 flex-col gap-7 border-r border-line px-4.5 py-6.5 md:flex"
 	style="width:var(--mf-sidebar-w)"
 >
-	<a href="/" class="px-3 text-xl font-medium tracking-wide">Musify</a>
+	<a href="/" class="px-3 font-display text-xl font-semibold tracking-tight text-fg">Musify</a>
 
 	<div class="relative flex flex-col gap-7" bind:this={navBox}>
 		<div

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

@@ -36,13 +36,13 @@
 
 	const variants = {
 		primary: 'bg-accent-soft text-on-accent active:scale-[0.97]',
-		secondary: 'border border-line text-fg hover:bg-hover',
-		subtle: 'bg-surface-2 text-fg hover:bg-surface-hover',
+		secondary: 'bg-surface-2 text-fg hover:bg-accent/12',
+		subtle: 'bg-white/10 text-fg hover:bg-accent/18',
 		danger: 'bg-danger text-on-accent hover:brightness-110'
 	};
 
 	const classes = $derived(
-		`inline-flex items-center justify-center gap-2 rounded-control transition disabled:opacity-40 ${sizes[size]} ${variants[variant]} ${klass}`
+		`inline-flex items-center justify-center gap-2 rounded-control font-medium transition focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg focus-visible:outline-none disabled:opacity-40 ${sizes[size]} ${variants[variant]} ${klass}`
 	);
 </script>
 

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

@@ -20,7 +20,7 @@
 		</span>
 	{/if}
 	{#if title}
-		<h3 class="mt-5 text-2xl font-semibold tracking-tight text-fg">{title}</h3>
+		<h3 class="mt-5 font-display text-2xl font-semibold tracking-tight text-fg">{title}</h3>
 	{/if}
 	{#if description}
 		<p class="mt-2 text-fg-2">{description}</p>

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

@@ -29,7 +29,7 @@
 	{onclick}
 	aria-label={label}
 	title={label}
-	class="grid place-items-center rounded-control text-muted transition hover:bg-hover hover:text-fg {sizes[
+	class="grid place-items-center rounded-control text-muted transition hover:bg-hover hover:text-fg focus-visible:bg-hover focus-visible:text-fg focus-visible:ring-2 focus-visible:ring-accent focus-visible:outline-none {sizes[
 		size
 	]} {revealOnHover
 		? 'sm:opacity-0 sm:group-hover:opacity-100 sm:focus-visible:opacity-100'

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

@@ -52,7 +52,7 @@
 		{autocomplete}
 		{oninput}
 		bind:value
-		class="w-full rounded-control bg-surface py-3 text-base text-fg transition placeholder:text-muted focus:border-accent/50 focus:outline-none {Icon
+		class="w-full rounded-control border border-line bg-surface py-3 text-base text-fg transition placeholder:text-muted focus:border-accent/60 focus:outline-none {Icon
 			? 'pr-4 pl-11'
 			: 'px-4'} {klass}"
 	/>

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

@@ -13,7 +13,7 @@
 
 <div class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between {klass}">
 	<div class="min-w-0">
-		<h1 class="text-2xl font-semibold tracking-tight text-fg sm:text-4xl">{title}</h1>
+		<h1 class="font-display text-2xl font-semibold tracking-tight text-fg sm:text-4xl">{title}</h1>
 		{#if subtitle}
 			<p class="mt-2 text-sm text-fg-2 sm:text-base">{subtitle}</p>
 		{/if}

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

@@ -11,14 +11,14 @@
 </script>
 
 {#if actions}
-	<div class="mb-3 flex items-baseline justify-between gap-4 sm:mb-4 {klass} tracking-widest">
-		<h2 class="font-display font-medium text-fg sm:text-xl">
+	<div class="mb-3 flex items-baseline justify-between gap-4 sm:mb-4 {klass}">
+		<h2 class="font-display font-medium tracking-tight text-fg sm:text-xl">
 			{title}
 		</h2>
 		{@render actions()}
 	</div>
 {:else}
-	<h2 class="mb-3 font-display font-medium text-fg sm:mb-4 sm:text-xl {klass}">
+	<h2 class="mb-3 font-display font-medium tracking-tight text-fg sm:mb-4 sm:text-xl {klass}">
 		{title}
 	</h2>
 {/if}

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

@@ -1,5 +1,5 @@
 export const ACCENT_LIGHTNESS = 60;
-export const ACCENT_CHROMA = 0.17;
+export const ACCENT_CHROMA = 0.1;
 export const ACCENT_HUE = 145;
 
 export const DEFAULT_ACCENT = `oklch(${ACCENT_LIGHTNESS}% ${ACCENT_CHROMA} ${ACCENT_HUE})`;

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

@@ -100,7 +100,7 @@ export async function extractAccent(url: string): Promise<Accent | null> {
 	if (best < 0) return null;
 
 	const hue = ((Math.atan2(hueSin[best], hueCos[best]) * 180) / Math.PI + 360) % 360;
-	const chroma = Math.min(0.19, Math.max(0.1, chromaSum[best] / weight[best]));
+	const chroma = Math.min(0.11, Math.max(0.045, chromaSum[best] / weight[best]));
 
 	const h = hue.toFixed(1);
 	const c = chroma.toFixed(3);

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

@@ -15,7 +15,7 @@
 	--mf-border-strong: rgba(255, 255, 255, 0.12);
 	--mf-track: rgba(255, 255, 255, 0.12);
 
-	--mf-accent: oklch(60% 0.17 145);
+	--mf-accent: oklch(60% 0.1 145);
 	--mf-accent-soft: color-mix(in oklch, var(--mf-accent) 80%, transparent);
 
 	--mf-scrim: #000000;