feat(redesign): aurora foundation — tokens, glass sidebar, dashboard

Foundation pass on the Aurora redesign:

- app.css: full token swap to lavender/orchid/mint/sky pastel palette,
  vivid aurora gradient backdrop, frosted glass surface tokens, two
  themes (Aurora dark + Pearl light), shadow recipe for floating glass.
- fonts: add Geist Sans / Geist Mono / Newsreader, drop DM Sans usage
  (legacy fontsource entries kept in package.json until full migration).
- layout.svelte: sidebar becomes a floating glass rail with a conic-
  gradient brand orb, Newsreader italic 'Bridge' wordmark, soft glass
  hovers on nav links, gradient active indicator, gradient user avatar.
- Card.svelte: glass surface + inner highlight + soft hover lift.
- PageHeader.svelte: Newsreader serif display title.
- +page.svelte (dashboard): stat cards become glass with colored
  accent 'orb', event timeline gets soft glass rows + slide-on-hover.

Build clean (0 errors, pre-existing a11y warnings unchanged).
Other pages still inherit old chrome via shared tokens but will need
component-specific passes; tracked separately.

frontend/src/lib/components/Card.svelte

@@ -1,30 +1,55 @@
 <script lang="ts">
-	let { children, class: className = '', hover = false, entityId = undefined, ...rest } = $props<{
-		children: import('svelte').Snippet;
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		children: Snippet;
 		class?: string;
 		hover?: boolean;
 		entityId?: number | string;
-		[key: string]: any;
-	}>();
+		[key: string]: unknown;
+	}
+
+	let { children, class: className = '', hover = false, entityId = undefined, ...rest }: Props = $props();
 </script>
 
 <div
 	class="card-component {hover ? 'card-hover' : ''} {className}"
-	style="background: var(--color-card); border: 1px solid var(--color-border); border-radius: 0.75rem; padding: 1.25rem;"
 	data-entity-id={entityId}
 	{...rest}
 >
-	{@render children()}
+	<div class="card-component__inner">
+		{@render children()}
+	</div>
 </div>
 
 <style>
 	.card-component {
-		transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+		position: relative;
+		background: var(--color-glass);
+		backdrop-filter: blur(28px) saturate(160%);
+		-webkit-backdrop-filter: blur(28px) saturate(160%);
+		border: 1px solid var(--color-border);
+		border-radius: 22px;
+		box-shadow: var(--shadow-card);
+		transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease;
+		overflow: hidden;
+	}
+	.card-component::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		pointer-events: none;
+		background: linear-gradient(180deg, var(--color-highlight), transparent 30%);
+		opacity: 0.4;
+	}
+	.card-component__inner {
+		position: relative;
+		z-index: 1;
+		padding: 1.25rem 1.4rem;
 	}
-
 	.card-hover:hover {
-		border-color: var(--color-primary);
-		box-shadow: 0 4px 16px var(--color-glow), 0 0 0 1px var(--color-glow);
+		border-color: var(--color-rule-strong);
+		transform: translateY(-2px);
 	}
 </style>

frontend/src/lib/components/PageHeader.svelte

@@ -1,16 +1,20 @@
 <script lang="ts">
-	let { title, description = '', children } = $props<{
+	import type { Snippet } from 'svelte';
+
+	interface Props {
 		title: string;
 		description?: string;
-		children?: import('svelte').Snippet;
-	}>();
+		children?: Snippet;
+	}
+
+	let { title, description = '', children }: Props = $props();
 </script>
 
-<div class="flex items-center justify-between mb-8">
+<div class="page-header">
 	<div class="animate-fade-slide-in">
-		<h2 class="text-2xl font-semibold tracking-tight">{title}</h2>
+		<h2 class="page-header__title">{title}</h2>
 		{#if description}
-			<p class="text-sm mt-1.5" style="color: var(--color-muted-foreground);">{description}</p>
+			<p class="page-header__desc">{description}</p>
 		{/if}
 	</div>
 	{#if children}
@@ -19,3 +23,29 @@
 		</div>
 	{/if}
 </div>
+
+<style>
+	.page-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: 2rem;
+		gap: 1rem;
+		flex-wrap: wrap;
+	}
+	.page-header__title {
+		font-family: var(--font-display);
+		font-weight: 400;
+		font-size: 2.25rem;
+		letter-spacing: -0.025em;
+		line-height: 1.05;
+		color: var(--color-foreground);
+		margin: 0;
+	}
+	.page-header__desc {
+		font-size: 0.9rem;
+		color: var(--color-muted-foreground);
+		margin-top: 0.4rem;
+		line-height: 1.5;
+	}
+</style>