Phase 0: project scaffold

- Go module + chi server with embedded SPA serving and /api/health
- internal/config env loader (local-dev defaults; auth/copyleaks deferred)
- React 19 + Vite 6 + Tailwind v4 frontend with full Petal design tokens
- Frontend embedded into the binary via web/embed.go (go:embed all:dist)
- README dev workflow, .env.example, BUILD_PLAN progress tracker
- Verified end-to-end: binary serves health, embedded SPA, and SPA fallback

web/src/App.tsx

@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'react'
+
+// Phase 0 placeholder: proves the stack end-to-end — React + Tailwind v4 tokens
+// rendering, and the Go backend reachable via the /api proxy. Real UI lands in
+// later phases (DocList, Editor, StatusBar).
+export default function App() {
+  const [api, setApi] = useState<'checking' | 'ok' | 'down'>('checking')
+
+  useEffect(() => {
+    fetch('/api/health')
+      .then((r) => setApi(r.ok ? 'ok' : 'down'))
+      .catch(() => setApi('down'))
+  }, [])
+
+  return (
+    <div className="flex h-full flex-col items-center justify-center gap-6 px-6 text-center">
+      <div
+        className="flex flex-col items-center gap-3 bg-surface px-12 py-10"
+        style={{ borderRadius: 'var(--radius-card)', boxShadow: 'var(--shadow-soft)' }}
+      >
+        <span className="text-5xl">🌸</span>
+        <h1 className="text-3xl font-extrabold text-plum">Petal</h1>
+        <p className="max-w-xs text-muted" style={{ fontFamily: 'var(--font-body)' }}>
+          A cozy place to write.
+        </p>
+        <span
+          className="mt-2 inline-flex items-center gap-2 px-4 py-1.5 text-sm font-semibold"
+          style={{ borderRadius: 'var(--radius-pill)', background: 'var(--color-surface-alt)' }}
+        >
+          <span
+            className="inline-block h-2 w-2 rounded-full"
+            style={{
+              background:
+                api === 'ok'
+                  ? 'var(--color-success)'
+                  : api === 'down'
+                    ? 'var(--color-accent)'
+                    : 'var(--color-muted)',
+            }}
+          />
+          {api === 'checking' ? 'Checking backend…' : api === 'ok' ? 'Backend connected' : 'Backend offline'}
+        </span>
+      </div>
+    </div>
+  )
+}

web/src/index.css

@@ -0,0 +1,55 @@
+@import "tailwindcss";
+
+/* Petal design tokens — soft, warm, bubbly stationery aesthetic.
+   Defined in @theme so they generate Tailwind utilities (bg-bg, text-plum,
+   rounded-card, font-ui, etc.). See petal-spec.md → Design System. */
+@theme {
+  /* Palette */
+  --color-bg: #FDF6F0;          /* warm cream canvas */
+  --color-surface: #FFFFFF;     /* card/panel surfaces */
+  --color-surface-alt: #FFF0F5; /* rose-tinted alt surface */
+  --color-border: #F0E0EB;      /* soft pink-grey border */
+  --color-plum: #3D2E39;        /* warm dark plum text (not harsh black) */
+  --color-muted: #9B8CA3;       /* muted lavender-grey */
+  --color-accent: #E8A0BF;      /* soft rose — primary interactive */
+  --color-accent-hover: #D98AAF;/* deeper rose on hover */
+
+  /* Suggestion type colors */
+  --color-mint: #A8D8C8;        /* grammar */
+  --color-peach: #F4B8A0;       /* phrasing */
+  --color-lavender: #C5B4E8;    /* idiom */
+  --color-sky: #A8CCE8;         /* clarity */
+  --color-honey: #CE9B4F;       /* voice */
+  --color-success: #8FCFA8;     /* saved / accepted */
+
+  /* Typography */
+  --font-ui: "Nunito", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
+  --font-body: "Lora", Georgia, serif;
+  --font-mono: "JetBrains Mono", ui-monospace, monospace;
+
+  /* Shape language */
+  --radius-card: 16px;
+  --radius-modal: 24px;
+  --radius-pill: 999px;
+  --radius-input: 12px;
+
+  /* Soft, warm, lifted shadow */
+  --shadow-soft: 0 4px 20px rgba(180, 130, 160, 0.12);
+}
+
+html, body, #root {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  background: var(--color-bg);
+  color: var(--color-plum);
+  font-family: var(--font-ui);
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Gentle, consistent motion across interactive elements */
+button, a, input {
+  transition: all 200ms ease;
+}

web/src/main.tsx

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