feat(mvp): phase 7 - UI polish & ambient backgrounds

Add layout system (sidebar, header, main layout), dark/light/system theme
with HSL customization, 3 ambient backgrounds (mesh gradient, particle field,
aurora), Cmd/Ctrl+K search dialog, page transitions, card hover effects,
status pulse animations, skeleton loaders, and responsive design. Polish
all existing pages with consistent theming.

src/lib/components/board/Board.svelte

@@ -34,8 +34,8 @@
 
 <div class="space-y-6">
 	{#if sections.length === 0}
-		<div class="rounded-lg border border-gray-700 bg-gray-800/50 p-12 text-center">
-			<p class="text-gray-400">This board has no sections yet.</p>
+		<div class="rounded-xl border border-border bg-card/50 p-12 text-center">
+			<p class="text-muted-foreground">This board has no sections yet.</p>
 		</div>
 	{:else}
 		{#each sections as section (section.id)}

src/lib/components/board/BoardCard.svelte

@@ -20,36 +20,36 @@
 
 <a
 	href="/boards/{board.id}"
-	class="group block rounded-lg border border-gray-700 bg-gray-800/50 p-5 transition-colors hover:border-indigo-500/50 hover:bg-gray-800"
+	class="card-hover group block rounded-xl border border-border bg-card p-5 transition-colors hover:border-primary/50"
 >
 	<div class="flex items-start gap-3">
 		{#if board.icon}
 			<span class="text-xl">{board.icon}</span>
 		{:else}
-			<span class="flex h-8 w-8 items-center justify-center rounded-md bg-gray-700 text-sm text-gray-400">
+			<span class="flex h-8 w-8 items-center justify-center rounded-md bg-muted text-sm text-muted-foreground">
 				B
 			</span>
 		{/if}
 		<div class="min-w-0 flex-1">
 			<div class="flex items-center gap-2">
-				<h3 class="truncate font-semibold text-white group-hover:text-indigo-300 transition-colors">
+				<h3 class="truncate font-semibold text-foreground transition-colors group-hover:text-primary">
 					{board.name}
 				</h3>
 				{#if board.isDefault}
-					<span class="shrink-0 rounded bg-indigo-600/20 px-1.5 py-0.5 text-xs text-indigo-400">
+					<span class="shrink-0 rounded bg-primary/15 px-1.5 py-0.5 text-xs text-primary">
 						Default
 					</span>
 				{/if}
 				{#if board.isGuestAccessible}
-					<span class="shrink-0 rounded bg-green-600/20 px-1.5 py-0.5 text-xs text-green-400">
+					<span class="shrink-0 rounded bg-accent px-1.5 py-0.5 text-xs text-accent-foreground">
 						Guest
 					</span>
 				{/if}
 			</div>
 			{#if board.description}
-				<p class="mt-1 line-clamp-2 text-sm text-gray-400">{board.description}</p>
+				<p class="mt-1 line-clamp-2 text-sm text-muted-foreground">{board.description}</p>
 			{/if}
-			<p class="mt-2 text-xs text-gray-500">
+			<p class="mt-2 text-xs text-muted-foreground/70">
 				{sectionCount} section{sectionCount === 1 ? '' : 's'}
 			</p>
 		</div>

src/lib/components/board/BoardHeader.svelte

@@ -16,9 +16,9 @@
 			<span class="text-2xl">{icon}</span>
 		{/if}
 		<div>
-			<h1 class="text-3xl font-bold text-white">{name}</h1>
+			<h1 class="text-3xl font-bold text-foreground">{name}</h1>
 			{#if description}
-				<p class="mt-1 text-sm text-gray-400">{description}</p>
+				<p class="mt-1 text-sm text-muted-foreground">{description}</p>
 			{/if}
 		</div>
 	</div>
@@ -26,14 +26,14 @@
 	<div class="flex items-center gap-2">
 		<a
 			href="/boards"
-			class="rounded-lg bg-gray-700 px-3 py-2 text-sm text-gray-200 hover:bg-gray-600 transition-colors"
+			class="rounded-lg border border-border px-3 py-2 text-sm text-foreground transition-colors hover:bg-accent"
 		>
 			All Boards
 		</a>
 		{#if canEdit}
 			<a
 				href="/boards/{boardId}/edit"
-				class="rounded-lg bg-indigo-600 px-3 py-2 text-sm font-medium text-white hover:bg-indigo-500 transition-colors"
+				class="rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
 			>
 				Edit
 			</a>