Distill mobile-first design round-trip into the contract

Phase C/D of the /design round-trip (Claude Design "Venture-CRM mobile
redesign", 2026-06-19). Captures the cloud output and folds it into the
durable design/ contract; no frontend reskin in this pass.

- _imports/2026-06-19/: provenance — GridApp.dc.html (byte-exact canonical
  surface) + a manifest README (project URL/inventory, data model, derived-
  field formulas, per-surface interaction model). DesignSync can't bulk-
  download, so screenshots/other sources stay recoverable from the cloud URL.
- DESIGN.md: §8 Responsive rewritten to the landed mobile-first system
  (4-tab bottom bar, card/detail, bottom sheets, swipe/snap, safe areas);
  §4 mobile component states; §3 15px mobile type scale; §2 stage/staleness
  + light-theme palette pointers.
- tokens.tokens.json: new `mobile` group (type scale, radii, touch sizing,
  safe-area) + `motion.sheet`; `color.light` palette — light theme adopted
  as a planned, toggle-gated feature (dark stays default).
- ROADMAP.md: mobile-first implementation backlog (contract-vs-code gap),
  gated on the inline-style->CSS migration and the locked pipeline spec.

design/DESIGN.md

@@ -9,7 +9,9 @@ not the visual language below.*
 
 ## 1. Visual theme
 
-A dense, professional, **dark** venture-CRM workspace — calm, data-forward, slightly
+A dense, professional, **dark** venture-CRM workspace (a **light** theme is planned as an
+optional toggle — see §8 — but dark is the default and the brand's primary identity) — calm,
+data-forward, slightly
 "terminal/financial." Cool blue-greys throughout, a single saturated blue as the only vivid
 accent, and IBM Plex's engineered-but-humane character. Monospace (IBM Plex Mono) carries
 all numbers, dates, and codes, reinforcing the data-tool feel. The mood is *trustworthy
@@ -35,6 +37,15 @@ Canonical values live in `design/tokens.tokens.json`. Summary:
 
 White (`#ffffff`) appears only as text on accent fills and in the brand mark.
 
+- **Pipeline-stage chips (redesign)** reuse existing semantic tints — no new hues: lead =
+  subtle grey, engaged = accent blue, diligence = due-soon `#e0b341`, commitment = success
+  `#10b981`/`#6ee7b7`. **Staleness** (last-contact age) overlays the same ramp: fresh grey →
+  due-soon amber `#e0b341` → danger-soft red `#e06c6c`/`#f87171`. Both are tinted-fill + tinted-
+  text badges, consistent with the badge rule above.
+- **Light theme (planned)** mirrors every slot above in `tokens.tokens.json` `color.light` (e.g.
+  base `#eaeef3`, panel `#ffffff`, text-primary `#16202c`); accent `#3b82c4` is unchanged. Dark is
+  the default — see §8.
+
 ## 3. Typography
 
 - **Families:** `IBM Plex Sans` (UI/body), `IBM Plex Mono` (numbers, dates, badges, logs,
@@ -44,8 +55,12 @@ White (`#ffffff`) appears only as text on accent fills and in the brand mark.
   title · 24px login title & KPI value.
 - **Treatments:** global letter-spacing `0.01em`; table headers uppercase with `0.08em`
   tracking; badges uppercase `0.5px`; numbers use `font-variant-numeric: tabular-nums`.
-- **Mobile note:** 13px body is comfortable for desktop and tight on a phone — the redesign
-  bumps the mobile base toward 15–16px. See `BRIEF.md`.
+- **Mobile scale (redesign, sourced from the 2026-06-19 comps):** body/inputs/list rows
+  **15px** (up from desktop's 13px); card investor name 16/600; mono amounts 15/600; screen
+  title 21/600 (vs desktop 20); full-screen detail title 22/600; sheet title 18/600; section
+  labels mono-uppercase 11/600 `0.08em`; chips mono-uppercase 10–11/600; meta/last-contact
+  mono 12; bottom-tab label mono 10. Inputs are 44–46px tall for touch. The mono-for-numbers
+  and uppercase-tracked-badge rules are unchanged — only the base size grows.
 
 ## 4. Component styling
 
@@ -64,6 +79,29 @@ White (`#ffffff`) appears only as text on accent fills and in the brand mark.
 - **Other:** kanban cards (radius 6), toasts (bottom-right), accent spinner, shimmer
   skeletons, left-marker timeline for activity feeds.
 
+**Mobile component states (redesign, from the 2026-06-19 comps — see §8 and `_imports/`):**
+- **Bottom tab bar:** exactly four tabs (Grid · Pipeline · Reminders · Contacts), 56px tall,
+  border-top, translucent panel bg + `backdrop-filter: blur(8px)`, `padding-bottom` for
+  `env(safe-area-inset-bottom)`. Active tab = accent (icon + 10px mono label); inactive =
+  subtle. 20px line-icons.
+- **Bottom sheet** (replaces the centered modal + right slide-over on mobile): panel bg,
+  strong top border, **radius-20 top corners**, 38×4 grey drag handle, slide-up
+  (`translateY(100%)→0`, 280ms `cubic-bezier(.2,.8,.2,1)`), scrim `rgba(4,9,16,0.55)` fade-in,
+  max-height ~88–90%, scroll-body; tap-scrim or × to dismiss. One field/action per sheet.
+- **Mobile card** (the table→card transform): panel, 1px border, **radius-10**, card shadow,
+  12–14px padding; name 16/600 + Priority corner badge (top-right); mono amount + stage chip +
+  staleness last-contact. Existing-LP = quiet accent **corner earmark** (star is the lighter
+  alternative; not a per-card banner).
+- **Full-screen detail** (promotes the desktop slide-over): `screenIn` slide (translateX 14px,
+  200ms), "‹ Grid" back affordance, grouped read-only sections with per-field edit entry points.
+- **Swipe actions** (Reminders): pointer-drag a card to reveal complete (swipe-left) / snooze
+  (swipe-right) at a 70px threshold; the action color tints in under the card.
+- **Snap-scroll stages** (Pipeline): full-width stage columns, `scroll-snap-type: x mandatory`,
+  a segmented stage control + page dots; per-card `‹ / ›` stage move.
+- **Account control:** a top-bar avatar opening a small popover (profile + logout) — the only
+  non-tab navigation on mobile.
+- **Toast:** mobile position is bottom-center **above the tab bar** (not bottom-right).
+
 ## 5. Layout
 
 Desktop shell = **fixed 250px left sidebar + flexible main content** with a top header bar
@@ -102,11 +140,40 @@ sidebar simply `display:none`s below 768px with no real mobile navigation; wide
 overflow horizontally; the 400px slide-over overflows a 375px screen. A correct viewport
 meta tag is present.
 
-**Target: mobile-first, mobile-preferred — active redesign.** The team increasingly works
-from phones, so mobile is becoming the primary surface. The full plan (navigation
-re-architecture to a bottom tab bar, table→card transforms, bottom sheets, touch sizing,
-type bump) lives in **`design/BRIEF.md`**. Update this section to describe the new
-mobile-first system once that redesign lands.
+**Target: mobile-first, mobile-preferred.** The design landed via a Claude Design round-trip
+(2026-06-19; source + per-surface interaction model in `design/_imports/2026-06-19/`, input
+brief in `design/BRIEF.md`). The system:
+
+- **Author base = a 375px column, enhance up** with `min-width` breakpoints for tablet/desktop
+  (inverting today's `max-width` rules). **Prerequisite:** responsive layout must live in the
+  CSS `<style>` block / utility classes — the ~1,300 inline `style={{}}` objects can't respond
+  to media queries, so an **inline-style→CSS migration** gates this work (tracked in `ROADMAP.md`).
+- **Mobile is a focused subset, not the whole app:** only **four surfaces** ship on mobile —
+  **Fundraising Grid · Pipeline · Reminders · Contacts** — in a **bottom tab bar**; every other
+  screen (Dashboard, Thesis, Outreach, Settings, …) is desktop-only and absent, with just a
+  minimal top-bar account/logout control.
+- **Navigation:** the 250px sidebar → a safe-area-aware **bottom tab bar of four**. No "More"
+  menu.
+- **Transforms:** wide data table → **investor card list + full-screen detail**; Pipeline kanban
+  → **swipe-between-stages** (snap-scroll, segmented control, per-card stage move); centered
+  modal + 400px slide-over → **drag-to-dismiss bottom sheets** / full-screen detail; Grid saved
+  *views* → a tappable view-name opening a **bottom-sheet view picker**.
+- **Editing on mobile** is the on-the-go core only — investor name, contact pills, notes/comm
+  log, pipeline stage, reminders, and new-investor create (via the Grid, the canonical write
+  path). Commitments/amounts and the full column set stay **read-only / desktop-only**. (Write
+  paths use the targeted one-row `log-communication` endpoint + the pipeline link→stage flow,
+  **not** whole-grid saves — see `BRIEF.md` §3a "Backend reality.")
+- **Touch + safe areas:** 44px minimum primary touch targets; body type bumped 13→15px (§3);
+  sticky bottom nav respects `env(safe-area-inset-bottom)` and content gets bottom padding so
+  the nav never overlaps it.
+- **Light theme — planned (adopted 2026-06-19).** Ship the light palette (`tokens.tokens.json`
+  `color.light`) behind a `[data-theme]` switch + a top-bar toggle. **Dark stays the default and
+  the brand's primary identity;** light is the optional alternative. It co-lands with the
+  inline-style→CSS migration (theming needs CSS custom properties, not per-element inline values).
+  Full per-component light tints (stage/staleness/note badges) are in `_imports/2026-06-19/`.
+
+The gap between this section and the current `index.html` is the implementation backlog in
+`ROADMAP.md` (incl. the inline-style→CSS migration and the locked pipeline-stages/flags spec).
 
 ## 9. Agent prompt guide