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

app/[workspace]/project/[projectId]/settings/page.tsx

@@ -122,7 +122,7 @@ export default function ProjectSettingsPage() {
 
   if (loading) {
     return (
-      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", fontFamily: "Outfit, sans-serif" }}>
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
         <Loader2 style={{ width: 24, height: 24, color: "#a09a90" }} className="animate-spin" />
       </div>
     );
@@ -131,10 +131,10 @@ export default function ProjectSettingsPage() {
   return (
     <div
       className="vibn-enter"
-      style={{ padding: "28px 32px", overflow: "auto", fontFamily: "Outfit, sans-serif" }}
+      style={{ padding: "28px 32px", overflow: "auto", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}
     >
       <div style={{ maxWidth: 480 }}>
-        <h3 style={{ fontFamily: "Newsreader, serif", fontSize: "1.2rem", fontWeight: 400, color: "#1a1a1a", marginBottom: 4 }}>
+        <h3 style={{ fontFamily: "var(--font-lora), ui-serif, serif", fontSize: "1.2rem", fontWeight: 400, color: "#1a1a1a", marginBottom: 4 }}>
           Project Settings
         </h3>
         <p style={{ fontSize: "0.8rem", color: "#a09a90", marginBottom: 24 }}>