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) <noreply@anthropic.com>
Signed-off-by: Justin Paul <justin@jpaul.me>

frontend/app/trees/[id]/page.tsx

@@ -52,11 +52,11 @@ export default function TreeDetailPage() {
     }
   }
 
-  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">
-      <Link href="/trees" className="text-sm text-neutral-500 hover:underline">
+      <Link href="/trees" className="text-sm text-[var(--muted)] hover:underline">
         ← All trees
       </Link>
 
@@ -76,14 +76,14 @@ export default function TreeDetailPage() {
       <div>
         <h2 className="mb-2 text-lg font-semibold">People</h2>
         {persons.length === 0 ? (
-          <p className="text-neutral-500">No people yet.</p>
+          <p className="text-[var(--muted)]">No people yet.</p>
         ) : (
           <ul className="space-y-2">
             {persons.map((person) => (
               <li key={person.id}>
                 <Card>
                   <CardContent className="p-4">
-                    {person.primary_name ?? <span className="text-neutral-400">Unnamed</span>}
+                    {person.primary_name ?? <span className="text-[var(--muted)]">Unnamed</span>}
                   </CardContent>
                 </Card>
               </li>

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>