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/routes/(app)/albums/[id]/components/AlbumHeader.svelte

@@ -55,7 +55,7 @@
 	<div class="min-w-0 flex-1">
 		<p class="text-sm tracking-[0.14em] text-fg-3 uppercase">Álbum</p>
 		<h1
-			class="mt-1.5 text-3xl font-semibold tracking-tight break-words text-fg sm:text-5xl md:text-7xl"
+			class="mt-1.5 font-display text-3xl font-semibold tracking-tight break-words text-fg sm:text-5xl md:text-7xl"
 		>
 			{title}
 		</h1>

web-player/src/routes/(app)/albums/youtube/[albumId]/+page.svelte

@@ -93,7 +93,7 @@
 				{album.isSingle ? 'Single' : album.isEp ? 'EP' : 'Álbum'}
 			</p>
 			<h1
-				class="mt-1.5 text-3xl font-semibold tracking-tight break-words text-fg sm:text-5xl md:text-7xl"
+				class="mt-1.5 font-display text-3xl font-semibold tracking-tight break-words text-fg sm:text-5xl md:text-7xl"
 			>
 				{album.title}
 			</h1>

web-player/src/routes/(app)/mixes/[id]/+page.svelte

@@ -72,7 +72,7 @@
 		<div class="min-w-0 flex-1">
 			<p class="text-sm tracking-[0.14em] text-fg-3 uppercase">Mezcla</p>
 			<h1
-				class="mt-1.5 text-3xl font-semibold tracking-tight break-words text-fg sm:text-5xl md:text-7xl"
+				class="mt-1.5 font-display text-3xl font-semibold tracking-tight break-words text-fg sm:text-5xl md:text-7xl"
 			>
 				{mix.title}
 			</h1>

web-player/src/routes/(app)/playlists/[id]/components/PlaylistHeader.svelte

@@ -36,7 +36,7 @@
 	<div class="min-w-0 flex-1">
 		<p class="text-sm tracking-[0.14em] text-fg-3 uppercase">Lista</p>
 		<h1
-			class="mt-1.5 text-3xl font-semibold tracking-tight break-words text-fg sm:text-5xl md:text-7xl"
+			class="mt-1.5 font-display text-3xl font-semibold tracking-tight break-words text-fg sm:text-5xl md:text-7xl"
 		>
 			{name}
 		</h1>

web-player/src/routes/+page.svelte

@@ -155,7 +155,7 @@
 	></div>
 	<div class="animate-enter relative flex flex-col gap-2 sm:gap-2.5">
 		<p class="text-sm tracking-[0.14em] text-fg-2 uppercase sm:text-base">{data.greeting}</p>
-		<h1 class="text-3xl leading-[1.05] font-semibold text-fg sm:text-6xl">
+		<h1 class="font-display text-3xl leading-[1.05] font-semibold tracking-tight text-fg sm:text-6xl">
 			Tu música. Sin límites.
 		</h1>
 	</div>

web-player/src/routes/layout.css

@@ -22,7 +22,7 @@
 	--color-on-accent: var(--mf-on-art);
 	--color-scrim: var(--mf-scrim);
 	--color-on-art: var(--mf-on-art);
-	--color-danger: oklch(63.7% 0.237 25.331);
+	--color-danger: oklch(63.7% 0.15 25.331);
 	--color-danger-fg: oklch(88.5% 0.062 18.334);
 
 	--radius-control: 0.625rem;

web-player/src/routes/login/+page.svelte

@@ -11,18 +11,30 @@
 	<meta name="description" content="Inicia sesión o crea una cuenta en Musify." />
 </svelte:head>
 
-<div class="grid min-h-screen place-items-center bg-bg px-6 text-fg">
-	<div class="flex w-full max-w-110 flex-col items-center gap-9 text-center">
-		<div class="text-3xl font-semibold tracking-tight">Musify</div>
+<div class="relative grid min-h-screen place-items-center overflow-hidden bg-bg px-6 text-fg">
+	<div
+		class="pointer-events-none absolute inset-0"
+		style="background:radial-gradient(ellipse 46rem 28rem at 50% 36%, color-mix(in oklch, var(--color-accent), transparent 82%), transparent 70%)"
+	></div>
 
-		<div>
-			<h1 class="text-4xl font-semibold tracking-tight">Tu música. Sin límites.</h1>
-			<p class="mt-3 text-base text-fg-2">Inicia sesión para continuar.</p>
+	<div class="relative flex w-full max-w-4xl flex-col items-center gap-12 text-center">
+		<div class="font-display text-[clamp(1.5rem,3vw,2.5rem)] font-semibold tracking-tight">
+			Musify
 		</div>
 
-		<div class="flex w-full flex-col gap-5">
+		<div class="animate-enter flex flex-col items-center gap-5">
+			<h1
+				class="font-display text-[clamp(2.75rem,9vw,8rem)] leading-[1.05] font-semibold tracking-tight"
+			>
+				<span class="block">Tu música.</span>
+				<span class="block">Sin límites.</span>
+			</h1>
+			<p class="text-lg text-fg-2">Inicia sesión para continuar.</p>
+		</div>
+
+		<div class="flex w-full max-w-80 flex-col gap-3">
 			<Button href={`/auth/login?${returnParam}`} reload size="lg" class="w-full">
-				Iniciar Sesión
+				Iniciar sesión
 			</Button>
 			<Button
 				href={`/auth/login?mode=register&${returnParam}`}
@@ -31,7 +43,7 @@
 				size="lg"
 				class="w-full"
 			>
-				Crear Cuenta
+				Crear cuenta
 			</Button>
 		</div>
 	</div>