Apply brand identity to the frontend (ink + bronze + paper)

Replaces the default black/gray with the docs/brand palette: warm ink text on paper surfaces, bronze accent, serif headings and the Origin-mark wordmark in the header, favicon, and the 'where it came from matters' tagline. Light/dark adapt via CSS vars (ink/paper flip); bronze and paper are constant. Tailwind v4 @theme exposes bronze/paper/ink tokens and the serif stack. Buttons/inputs/cards restyled to match; brand SVGs vendored into public/.

Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
Signed-off-by: Justin Paul <[email protected]>

frontend/app/trees/page.tsx

@@ -47,7 +47,7 @@ export default function TreesPage() {
     router.push("/login");
   }
 
-  if (!ready) return <p className="text-neutral-500">Loading…</p>;
+  if (!ready) return <p className="text-[var(--muted)]">Loading…</p>;
 
   return (
     <div className="space-y-6">
@@ -75,16 +75,16 @@ export default function TreesPage() {
       </Card>
 
       {trees.length === 0 ? (
-        <p className="text-neutral-500">No trees yet — create your first one above.</p>
+        <p className="text-[var(--muted)]">No trees yet — create your first one above.</p>
       ) : (
         <ul className="space-y-2">
           {trees.map((tree) => (
             <li key={tree.id}>
               <Link href={`/trees/${tree.id}`}>
-                <Card className="transition-colors hover:bg-neutral-50">
+                <Card className="transition-colors hover:border-bronze/50">
                   <CardContent className="flex items-center justify-between p-4">
                     <span className="font-medium">{tree.name}</span>
-                    <span className="text-xs uppercase tracking-wide text-neutral-400">
+                    <span className="text-xs uppercase tracking-wide text-bronze">
                       {tree.visibility}
                     </span>
                   </CardContent>