feat(web): migrate to Next.js App Router and add design tokens (ADR 0018)

The Sprint 1 shell moves to /app with its own root layout so its dark theme does not leak. Figma tokens ported with light and dark parity.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014SdXCbrN5PtGExkpvMaMHx

web/src/LegacyApp.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useState } from 'react';
 import { ApproveBar } from './components/ApproveBar.tsx';
 import { ChatPanel } from './components/ChatPanel.tsx';
@@ -19,7 +21,7 @@ async function signUp(email: string, password: string): Promise<string> {
   return body.sessionToken;
 }
 
-export function App() {
+export function LegacyApp() {
   const [sessionToken, setSessionToken] = useState<string | null>(null);
   const [applied, setApplied] = useState(false);
   const chat = useChat(sessionToken);

web/src/main.tsx

@@ -1,10 +0,0 @@
-import { StrictMode } from 'react';
-import { createRoot } from 'react-dom/client';
-import { App } from './App.tsx';
-import './styles/global.css';
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-);

web/src/styles/marketing.css

@@ -0,0 +1,12 @@
+*, *::before, *::after { box-sizing: border-box; }
+html { -webkit-text-size-adjust: 100%; }
+body {
+  margin: 0;
+  background: var(--color-bg-canvas);
+  color: var(--color-text-primary);
+  font: 400 16px/24px var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+}
+a { color: inherit; text-decoration: none; }
+button { font: inherit; color: inherit; }
+:focus-visible { outline: 2px solid var(--color-accent-default); outline-offset: 2px; }

web/src/styles/tokens.css

@@ -0,0 +1,168 @@
+/*
+ * Wursor design tokens, ported from the Figma file "Wursor - weown.net"
+ * (Design system page). Light is the default; dark follows the device
+ * unless data-theme forces one (PX-10). Change a value here, not in a component.
+ * Figma letter-spacing is a percentage, so it is written in em here.
+ */
+:root {
+  --icon-color: #14120b;
+
+  --color-bg-canvas: #f7f7f4;
+  --color-bg-surface: #ffffff;
+  --color-bg-sunken: #f1f0eb;
+  --color-bg-inverse: #14120b;
+
+  --color-text-primary: #14120b;
+  --color-text-secondary: #6b675e;
+  --color-text-tertiary: #8f8b80;
+  --color-text-inverse: #f2f1ec;
+  --color-text-on-accent: #ffffff;
+  --color-text-link: #2a52b0;
+
+  --color-border-subtle: #14120b14;
+  --color-border-default: #dddcd5;
+  --color-border-strong: #c4c2b8;
+
+  --color-accent-default: #e8590c;
+  --color-accent-text: #b8420a;
+  --color-accent-subtle: #fdede3;
+
+  --color-status-working-dot: #3b6fe0;
+  --color-status-working-fg: #2a52b0;
+  --color-status-working-bg: #e8eefb;
+  --color-status-needs-you-dot: #c98a12;
+  --color-status-needs-you-fg: #8a5a00;
+  --color-status-needs-you-bg: #fff6e5;
+  --color-status-success-dot: #2f8f5b;
+  --color-status-success-fg: #1f6b42;
+  --color-status-success-bg: #e4f2e8;
+
+  --color-diff-add-fg: #1f6b42;
+  --color-diff-remove-fg: #a12a2a;
+
+  --space-0: 0px;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-16: 64px;
+
+  --radius-xs: 4px;
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 24px;
+  --radius-full: 999px;
+
+  --size-control-sm: 28px;
+  --size-control-md: 36px;
+  --size-control-lg: 44px;
+
+  --shadow-modal: 0 24px 64px -8px #14120b24, 0 2px 6px 0 #14120b0f;
+
+  --font-sans: var(--font-geist-sans), system-ui, -apple-system, sans-serif;
+  --font-mono: var(--font-geist-mono), ui-monospace, monospace;
+
+  color-scheme: light;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --icon-color: #f2f1ec;
+
+    --color-bg-canvas: #0e0e0c;
+    --color-bg-surface: #171714;
+    --color-bg-sunken: #1e1e1a;
+    --color-bg-inverse: #f2f1ec;
+
+    --color-text-primary: #f2f1ec;
+    --color-text-secondary: #8f8b80;
+    --color-text-tertiary: #6b675e;
+    --color-text-inverse: #14120b;
+    --color-text-on-accent: #14120b;
+    /* Figma keeps the light value (#2a52b0) in dark, which fails AA on #0e0e0c. Lightened to the dark "working" blue. */
+    --color-text-link: #7c9cf0;
+
+    --color-border-subtle: #f2f1ec14;
+    --color-border-default: #2c2c27;
+    --color-border-strong: #4a473f;
+
+    --color-accent-default: #ff7a33;
+    --color-accent-text: #ff9a5e;
+    --color-accent-subtle: #3a1a08;
+
+    --color-status-working-dot: #7c9cf0;
+    --color-status-working-fg: #7c9cf0;
+    --color-status-working-bg: #1b2440;
+    --color-status-needs-you-dot: #e8b04a;
+    --color-status-needs-you-fg: #e8b04a;
+    --color-status-needs-you-bg: #3a2d12;
+    --color-status-success-dot: #5cc48a;
+    --color-status-success-fg: #5cc48a;
+    --color-status-success-bg: #17301f;
+
+    --color-diff-add-fg: #5cc48a;
+    --color-diff-remove-fg: #e86a6a;
+
+    color-scheme: dark;
+  }
+}
+
+:root[data-theme="dark"] {
+  --icon-color: #f2f1ec;
+
+  --color-bg-canvas: #0e0e0c;
+  --color-bg-surface: #171714;
+  --color-bg-sunken: #1e1e1a;
+  --color-bg-inverse: #f2f1ec;
+
+  --color-text-primary: #f2f1ec;
+  --color-text-secondary: #8f8b80;
+  --color-text-tertiary: #6b675e;
+  --color-text-inverse: #14120b;
+  --color-text-on-accent: #14120b;
+  --color-text-link: #7c9cf0;
+
+  --color-border-subtle: #f2f1ec14;
+  --color-border-default: #2c2c27;
+  --color-border-strong: #4a473f;
+
+  --color-accent-default: #ff7a33;
+  --color-accent-text: #ff9a5e;
+  --color-accent-subtle: #3a1a08;
+
+  --color-status-working-dot: #7c9cf0;
+  --color-status-working-fg: #7c9cf0;
+  --color-status-working-bg: #1b2440;
+  --color-status-needs-you-dot: #e8b04a;
+  --color-status-needs-you-fg: #e8b04a;
+  --color-status-needs-you-bg: #3a2d12;
+  --color-status-success-dot: #5cc48a;
+  --color-status-success-fg: #5cc48a;
+  --color-status-success-bg: #17301f;
+
+  --color-diff-add-fg: #5cc48a;
+  --color-diff-remove-fg: #e86a6a;
+
+  color-scheme: dark;
+}
+
+/* Type styles (Figma text styles). */
+.t-display-xl { font: 300 72px/72px var(--font-sans); letter-spacing: -0.03em; }
+.t-display-l { font: 300 48px/52px var(--font-sans); letter-spacing: -0.025em; }
+.t-display-m { font: 300 36px/40px var(--font-sans); letter-spacing: -0.02em; }
+.t-title-l { font: 400 28px/34px var(--font-sans); letter-spacing: -0.015em; }
+.t-title-m { font: 500 20px/28px var(--font-sans); letter-spacing: -0.01em; }
+.t-title-s { font: 500 16px/24px var(--font-sans); letter-spacing: -0.005em; }
+.t-body-l { font: 400 16px/24px var(--font-sans); }
+.t-body-m { font: 400 14px/20px var(--font-sans); }
+.t-body-m-strong { font: 500 14px/20px var(--font-sans); }
+.t-label-m { font: 500 13px/16px var(--font-sans); }
+.t-label-s { font: 500 12px/16px var(--font-sans); }
+.t-caption { font: 400 12px/16px var(--font-sans); }
+.t-overline { font: 600 11px/16px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; }
+.t-mono-s { font: 400 12px/16px var(--font-mono); }