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/project-creation/setup-shared.tsx

@@ -41,7 +41,7 @@ export function SetupHeader({
         </button>
         <div>
           <h2 style={{
-            fontFamily: "Newsreader, serif", fontSize: "1.3rem", fontWeight: 400,
+            fontFamily: "var(--font-lora), ui-serif, serif", fontSize: "1.3rem", fontWeight: 400,
             color: "#1a1a1a", margin: 0, marginBottom: 3,
           }}>
             {label}
@@ -94,7 +94,7 @@ export function TextInput({
     width: "100%", padding: "11px 14px", marginBottom: 16,
     borderRadius: 8, border: "1px solid #e0dcd4",
     background: "#faf8f5", fontSize: "0.9rem",
-    fontFamily: "Outfit, sans-serif", color: "#1a1a1a",
+    fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", color: "#1a1a1a",
     outline: "none", boxSizing: "border-box",
   };
   return (
@@ -135,7 +135,7 @@ export function PrimaryButton({
         background: active ? "#1a1a1a" : "#e0dcd4",
         color: active ? "#fff" : "#b5b0a6",
         fontSize: "0.88rem", fontWeight: 600,
-        fontFamily: "Outfit, sans-serif",
+        fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
         cursor: active ? "pointer" : "not-allowed",
         display: "flex", alignItems: "center", justifyContent: "center", gap: 8,
       }}