feat(web): full layout overhaul — Linear design system

Complete UI/UX overhaul, not just style changes:

Layout:
- Dark-mode-first (near-black #08090a canvas, whiteOpacity borders)
- Sticky header with brand + nav + theme toggle
- Sticky sidebar (xl+) with hierarchical doc tree
- Main content in max-w-3xl centered column
- Inter font system (via @font-face + CSS vars)
- Font feature settings cv01/ss03 for Linear-geometric Inter

Components rewritten in Linear aesthetic:
- Homepage: editorial-style doc listing with tags, section headers
- Doc page: breadcrumb-style nav links, metadata bar (author/date/tags),
  clean prose, Related + History sections
- TOC: rehype-slug heading anchors + github-slugger matching
- Create/Edit: inline form with Linear-style inputs/buttons
- Login: centered card-style, brand-indigo CTA button
- Docs index: sectioned listing with tag previews
- Search: dark-themed search with result cards + snippets
- ThemeToggle: system-default + localStorage persistence

Typography:
- prose with custom Tailwind classes matching Linear's:
  headings #f7f8f8 font-light, body #d0d6e0,
  links #7170ff with hover #828fff,
  code blocks #191a1b bg with #23252a border

New deps: rehype-slug (heading anchors), github-slugger (TOC matching)
Files: layout.tsx (overhaul), page.tsx, create/, login/, docs/,
       [section]/[...slug]/page.tsx, Sidebar.tsx, ThemeToggle.tsx,
       TOC.tsx, DocForm.tsx, Markdown.tsx, Search page

apps/web/app/docs/page.tsx

@@ -3,39 +3,49 @@ import { listDocuments } from "@mcpedia/core";
 
 export const dynamic = "force-dynamic";
 
-const SECTIONS = ["docs", "writeups", "research", "notes"] as const;
+const SECTIONS = [
+  { id: "docs", label: "Documentation" },
+  { id: "writeups", label: "Writeups" },
+  { id: "research", label: "Research" },
+  { id: "notes", label: "Notes" },
+] as const;
 
 export default async function DocsIndexPage() {
   const all = await listDocuments();
   const bySection = SECTIONS.map((section) => ({
     section,
-    docs: all.filter((d) => d.section === section),
+    docs: all.filter((d) => d.section === section.id),
   }));
 
   return (
-    <div className="space-y-8">
-      <h1 className="text-2xl font-semibold tracking-tight">All Documents</h1>
-      {bySection.map(({ section, docs }) => (
-        <section key={section}>
-          <h2 className="text-lg font-medium capitalize mb-3">{section}</h2>
-          {docs.length === 0 ? (
-            <p className="text-sm text-zinc-500">No documents in this section.</p>
-          ) : (
+    <div>
+      <h1 className="text-2xl font-light text-[#f7f8f8] mb-6">All Documents</h1>
+
+      {bySection.map(({ section, docs }) => {
+        if (docs.length === 0) return null;
+        return (
+          <section key={section.id} className="mb-10">
+            <h2 className="text-sm font-medium text-[#d0d6e0] uppercase mb-4">
+              {section.label}
+            </h2>
             <ul className="space-y-2">
               {docs.map((d) => (
                 <li key={d.slug}>
-                  <Link href={`/${d.slug}`} className="hover:underline">
+                  <Link
+                    href={`/${d.slug}`}
+                    className="text-[#d0d6e0] hover:text-[#f7f8f8] transition-colors"
+                  >
                     {d.title}
                   </Link>
-                  <span className="text-xs text-zinc-500 ml-2">
-                    {d.author || "unknown"}
+                  <span className="text-xs text-[#62666d] ml-2">
+                    {d.tags.slice(0, 2).map((t) => `#${t}`).join(" ") || "—"}
                   </span>
                 </li>
               ))}
             </ul>
-          )}
-        </section>
-      ))}
+          </section>
+        );
+      })}
     </div>
   );
 }