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/globals.css

@@ -11,8 +11,8 @@
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-outfit);
-  --font-serif: var(--font-newsreader);
+  --font-sans: var(--font-inter);
+  --font-serif: var(--font-lora);
   --font-mono: var(--font-ibm-plex-mono);
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
@@ -51,38 +51,50 @@
 
 :root {
   --radius: 0.5rem;
-  /* Stackless warm beige palette */
-  --background: #f6f4f0;
-  --foreground: #1a1a1a;
-  --card: #ffffff;
-  --card-foreground: #1a1a1a;
-  --popover: #ffffff;
-  --popover-foreground: #1a1a1a;
-  --primary: #1a1a1a;
-  --primary-foreground: #ffffff;
-  --secondary: #f0ece4;
-  --secondary-foreground: #1a1a1a;
-  --muted: #f0ece4;
-  --muted-foreground: #a09a90;
-  --accent: #eae6de;
-  --accent-foreground: #1a1a1a;
-  --destructive: #d32f2f;
-  --border: #e8e4dc;
-  --input: #e0dcd4;
-  --ring: #d0ccc4;
+  /* Justine UX pack — ink & parchment (aligned with master-ai/justine/00_design-tokens.css) */
+  --vibn-ink: #1a1510;
+  --vibn-ink2: #2c2c2a;
+  --vibn-ink3: #444441;
+  --vibn-mid: #5f5e5a;
+  --vibn-muted: #888780;
+  --vibn-stone: #b4b2a9;
+  --vibn-parch: #d3d1c7;
+  --vibn-cream: #f1efe8;
+  --vibn-paper: #f7f4ee;
+  --vibn-white: #fdfcfa;
+  --vibn-border: #e8e2d9;
+
+  --background: var(--vibn-paper);
+  --foreground: var(--vibn-ink);
+  --card: var(--vibn-white);
+  --card-foreground: var(--vibn-ink);
+  --popover: var(--vibn-white);
+  --popover-foreground: var(--vibn-ink);
+  --primary: var(--vibn-ink);
+  --primary-foreground: var(--vibn-paper);
+  --secondary: var(--vibn-cream);
+  --secondary-foreground: var(--vibn-ink);
+  --muted: var(--vibn-cream);
+  --muted-foreground: var(--vibn-muted);
+  --accent: var(--vibn-cream);
+  --accent-foreground: var(--vibn-ink);
+  --destructive: #b42318;
+  --border: var(--vibn-border);
+  --input: var(--vibn-border);
+  --ring: var(--vibn-stone);
   --chart-1: oklch(0.70 0.15 60);
   --chart-2: oklch(0.70 0.12 210);
   --chart-3: oklch(0.55 0.10 220);
   --chart-4: oklch(0.40 0.08 230);
   --chart-5: oklch(0.75 0.15 70);
-  --sidebar: #ffffff;
-  --sidebar-foreground: #1a1a1a;
-  --sidebar-primary: #1a1a1a;
-  --sidebar-primary-foreground: #ffffff;
-  --sidebar-accent: #f6f4f0;
-  --sidebar-accent-foreground: #1a1a1a;
-  --sidebar-border: #e8e4dc;
-  --sidebar-ring: #d0ccc4;
+  --sidebar: var(--vibn-white);
+  --sidebar-foreground: var(--vibn-ink);
+  --sidebar-primary: var(--vibn-ink);
+  --sidebar-primary-foreground: var(--vibn-paper);
+  --sidebar-accent: var(--vibn-paper);
+  --sidebar-accent-foreground: var(--vibn-ink);
+  --sidebar-border: var(--vibn-border);
+  --sidebar-ring: var(--vibn-stone);
 }
 
 .dark {
@@ -111,8 +123,8 @@
   --chart-5: oklch(0.645 0.246 16.439);
   --sidebar: oklch(0.205 0 0);
   --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.85 0.02 85);
+  --sidebar-primary-foreground: oklch(0.18 0.02 60);
   --sidebar-accent: oklch(0.269 0 0);
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
@@ -125,21 +137,24 @@
   }
   body {
     @apply bg-background text-foreground;
-    font-family: var(--font-outfit), 'Outfit', sans-serif;
+    font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
+  }
+  h1, h2, h3 {
+    font-family: var(--font-lora), ui-serif, Georgia, serif;
   }
   button {
-    font-family: var(--font-outfit), 'Outfit', sans-serif;
+    font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
     cursor: pointer;
   }
   input, textarea, select {
-    font-family: var(--font-outfit), 'Outfit', sans-serif;
+    font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
   }
   input::placeholder {
-    color: #b5b0a6;
+    color: var(--muted-foreground);
   }
   ::selection {
-    background: #1a1a1a;
-    color: #fff;
+    background: var(--foreground);
+    color: var(--background);
   }
   ::-webkit-scrollbar {
     width: 4px;
@@ -149,7 +164,7 @@
     background: transparent;
   }
   ::-webkit-scrollbar-thumb {
-    background: #d0ccc4;
+    background: var(--vibn-stone);
     border-radius: 10px;
   }
 }