feat(ui): apply Justine ink & parchment design system

- Map Justine tokens to shadcn CSS variables (--vibn-* aliases)
- Switch fonts to Inter + Lora via next/font (IBM Plex Mono for code)
- Base typography: body Inter, h1–h3 Lora; marketing hero + wordmark serif
- Project shell and global chrome use semantic colors
- Replace Outfit/Newsreader references across TSX inline styles

Made-with: Cursor

components/layout/project-shell.tsx

@@ -59,15 +59,15 @@ function ProjectShellInner({
       <div style={{
         display: "flex", flexDirection: "column",
         height: "100dvh", overflow: "hidden",
-        fontFamily: "Outfit, sans-serif",
-        background: "#f6f4f0",
+        fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
+        background: "var(--background)",
       }}>
 
         {/* ── Top bar ── */}
         <header style={{
           height: 48, flexShrink: 0,
           display: "flex", alignItems: "stretch",
-          background: "#fff", borderBottom: "1px solid #e8e4dc",
+          background: "var(--card)", borderBottom: "1px solid var(--border)",
           zIndex: 10,
         }}>
 
@@ -75,7 +75,7 @@ function ProjectShellInner({
           <div style={{
             display: "flex", alignItems: "center",
             padding: "0 16px", gap: 9, flexShrink: 0,
-            borderRight: "1px solid #e8e4dc",
+            borderRight: "1px solid var(--border)",
           }}>
             <Link
               href={`/${workspace}/projects`}
@@ -86,7 +86,7 @@ function ProjectShellInner({
               </div>
             </Link>
             <span style={{
-              fontSize: "0.82rem", fontWeight: 600, color: "#1a1a1a",
+              fontSize: "0.82rem", fontWeight: 600, color: "var(--foreground)",
               maxWidth: 160, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
             }}>
               {projectName}
@@ -105,13 +105,13 @@ function ProjectShellInner({
                     padding: "5px 12px", borderRadius: 8,
                     fontSize: "0.8rem",
                     fontWeight: isActive ? 600 : 440,
-                    color: isActive ? "#1a1a1a" : "#8a8478",
-                    background: isActive ? "#f0ece4" : "transparent",
+                    color: isActive ? "var(--foreground)" : "var(--muted-foreground)",
+                    background: isActive ? "var(--secondary)" : "transparent",
                     textDecoration: "none",
                     transition: "background 0.1s, color 0.1s",
                     whiteSpace: "nowrap",
                   }}
-                  onMouseEnter={e => { if (!isActive) (e.currentTarget as HTMLElement).style.background = "#f6f4f0"; }}
+                  onMouseEnter={e => { if (!isActive) (e.currentTarget as HTMLElement).style.background = "var(--muted)"; }}
                   onMouseLeave={e => { if (!isActive) (e.currentTarget as HTMLElement).style.background = "transparent"; }}
                 >
                   {s.label}
@@ -128,9 +128,9 @@ function ProjectShellInner({
               title={`${session?.user?.name ?? session?.user?.email ?? "Account"} — Sign out`}
               style={{
                 width: 28, height: 28, borderRadius: "50%",
-                background: "#f0ece4", border: "none", cursor: "pointer",
+                background: "var(--secondary)", border: "none", cursor: "pointer",
                 display: "flex", alignItems: "center", justifyContent: "center",
-                fontSize: "0.65rem", fontWeight: 700, color: "#6b6560", flexShrink: 0,
+                fontSize: "0.65rem", fontWeight: 700, color: "var(--muted-foreground)", flexShrink: 0,
               }}
             >
               {userInitial}