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/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}