Add theming infrastructure (task 08)

CSS-variable multi-theme system (default + warm) × {light, dark, system}; per-user theme/theme_mode columns; no-flash pre-paint script; useTheme hook + ThemePicker component on /settings.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/settings/page.tsx

@@ -0,0 +1,34 @@
+import { getCurrentSession } from "@/lib/session";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { ThemePicker } from "@/components/theme-picker";
+import Link from "next/link";
+
+export default async function SettingsPage() {
+  const { user } = await getCurrentSession();
+
+  return (
+    <div className="container max-w-2xl py-8 space-y-6">
+      <h1 className="text-2xl font-semibold">Settings</h1>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Appearance</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <ThemePicker
+            initialTheme={user.theme as "default" | "warm"}
+            initialMode={user.themeMode as "light" | "dark" | "system"}
+            signedIn
+          />
+        </CardContent>
+      </Card>
+
+      <Link
+        href="/settings/household"
+        className="inline-flex items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-sm hover:bg-accent hover:text-accent-foreground"
+      >
+        Household Settings
+      </Link>
+    </div>
+  );
+}