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>