feat(ui): elegant wedding white/silver/gold redesign

Reskin the whole app via design tokens in tailwind-theme.css (remapped
color ramps) plus a define-once component layer in lib/styles/components.css
(.btn, .card, .input, .chip, .badge, .sheet, …). Buttons are muted/outlined
gold rather than flat fills. Self-host Inter + Fraunces (woff2) under the
existing font-src 'self' CSP. Restyle the shared components and the account,
admin, host, join, recover and upload screens against the new tokens.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/lib/styles/components.css

@@ -0,0 +1,120 @@
+/* ─────────────────────────────────────────────────────────────────────────
+ * EventSnap component layer — the shared, "define-once" building blocks.
+ *
+ * Colours/type/spacing tokens live in `tailwind-theme.css`; this file turns the
+ * *recurring UI patterns* (buttons, inputs, cards, badges, chips, sheets) into
+ * named classes so every page consumes the same look. Change a button here and
+ * it changes everywhere.
+ *
+ * These live in the `components` layer, which Tailwind emits BEFORE `utilities`
+ * — so a one-off inline utility (e.g. `rounded-lg`, `w-full`) on an element
+ * still overrides the component class. Reach for a component class first; drop
+ * to inline utilities only for genuinely one-off tweaks.
+ * ───────────────────────────────────────────────────────────────────────── */
+
+@layer components {
+	/* ── Buttons ──────────────────────────────────────────────────────────
+	 * Base + intent modifier (+ optional size). e.g. `class="btn btn-primary"`,
+	 * `class="btn btn-secondary btn-sm"`, `class="btn btn-primary btn-block"`. */
+	.btn {
+		@apply inline-flex select-none items-center justify-center gap-2 rounded-xl border border-transparent px-4 py-3 text-sm font-semibold transition;
+		@apply focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40;
+		@apply active:scale-[0.99] disabled:cursor-not-allowed;
+	}
+	.btn-lg {
+		@apply px-5 py-3.5 text-base;
+	}
+	.btn-sm {
+		@apply rounded-lg px-3 py-2;
+	}
+	.btn-block {
+		@apply w-full;
+	}
+
+	/* Primary = muted champagne fill + gold border + gold text (an elegant,
+	 * outlined "signal" rather than an aggressive solid gold block). */
+	.btn-primary {
+		@apply border-primary-400 bg-primary-100 text-primary-800 shadow-sm hover:border-primary-500 hover:bg-primary-200;
+		@apply disabled:border-gray-200 disabled:bg-gray-100 disabled:text-gray-400 disabled:shadow-none;
+		@apply dark:border-primary-500/50 dark:bg-primary-950/40 dark:text-primary-200 dark:hover:border-primary-500 dark:hover:bg-primary-900/40;
+	}
+	.btn-secondary {
+		@apply border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 disabled:opacity-50;
+		@apply dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700;
+	}
+	.btn-ghost {
+		@apply text-gray-600 hover:bg-gray-100 hover:text-gray-900 disabled:opacity-50;
+		@apply dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100;
+	}
+	.btn-danger {
+		@apply bg-red-600 text-white shadow-sm hover:bg-red-700 disabled:opacity-50;
+		@apply dark:bg-red-600 dark:hover:bg-red-500;
+	}
+
+	/* ── Form inputs ──────────────────────────────────────────────────────
+	 * Covers text/number inputs and textareas. */
+	.input {
+		@apply w-full rounded-xl border border-gray-300 bg-white px-4 py-3 text-gray-900 placeholder-gray-400 transition;
+		@apply focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/25;
+		@apply dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500;
+	}
+
+	/* ── Surfaces ─────────────────────────────────────────────────────────
+	 * `card`  — the standard raised surface (page → card → surface-muted is the
+	 *           three-level elevation ramp).
+	 * `surface-muted` — a nested/inset panel inside a card. */
+	.card {
+		@apply rounded-2xl border border-gray-200/70 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900;
+	}
+	.surface-muted {
+		@apply rounded-xl bg-gray-50 dark:bg-gray-800/60;
+	}
+
+	/* ── Badges (status / role pills) ─────────────────────────────────────
+	 * `class="badge badge-gold"` etc. A leading dot is optional in markup. */
+	.badge {
+		@apply inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-semibold;
+	}
+	.badge-primary {
+		@apply bg-primary-100 text-primary-700 dark:bg-primary-900/40 dark:text-primary-200;
+	}
+	.badge-gold {
+		@apply bg-purple-100 text-purple-800 dark:bg-purple-900/40 dark:text-purple-200;
+	}
+	.badge-gray {
+		@apply bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-300;
+	}
+	.badge-success {
+		@apply bg-green-100 text-green-700 dark:bg-green-950/50 dark:text-green-300;
+	}
+	.badge-danger {
+		@apply bg-red-100 text-red-700 dark:bg-red-950/50 dark:text-red-300;
+	}
+
+	/* ── Chips (filter / toggle) ──────────────────────────────────────────
+	 * `class="chip chip-active"` / `class="chip chip-inactive"`. */
+	.chip {
+		@apply rounded-full border border-transparent px-4 py-2 text-sm font-medium transition;
+	}
+	.chip-inactive {
+		@apply bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700;
+	}
+	/* Active = gold outline + soft champagne fill (matches .btn-primary). */
+	.chip-active {
+		@apply border-primary-400 bg-primary-100 text-primary-800 dark:border-primary-500/50 dark:bg-primary-950/40 dark:text-primary-200;
+	}
+
+	/* ── Bottom-sheet surface ─────────────────────────────────────────────
+	 * The rounded top panel shared by upload / context / confirm sheets. */
+	.sheet {
+		@apply rounded-t-3xl bg-white p-6 shadow-2xl dark:bg-gray-900 sm:rounded-2xl;
+	}
+
+	/* ── Page scaffold + section heading ──────────────────────────────────*/
+	.page {
+		@apply min-h-screen bg-gray-50 dark:bg-gray-950;
+	}
+	.section-title {
+		@apply font-display text-lg font-semibold text-gray-900 dark:text-gray-100;
+	}
+}