Redesign editor UI with dark-first "Graphite" theme

[lzrscg]

Summary

Refreshes the cspec editor with a cohesive, dark-first IDE aesthetic ("Graphite"), driven by a single CSS custom-property token layer so one [data-theme] flip recolors the entire app — the CodeMirror surface included. No features or layout regions were removed; this is visual/UX polish plus a first-class dark mode.

The direction came out of a multi-agent design pass (audit → competing directions → judge → unified spec); "Graphite" (single indigo accent, strictly-semantic cyan reference rail) won over editorial/paper and two-accent variants, with the best ideas grafted in.

What changed

App (cspec-app)

• Full design-token layer (dark default + light) for color, three-tier elevation, typography, radii, spacing, and motion. Every surface is driven from it — the status bar now harmonizes with the theme instead of a fixed dark slab.
• Persistent Sun/Moon theme toggle in the status bar; honors prefers-color-scheme on first load and persists to localStorage. An inline script in index.html sets the theme before mount to avoid a flash. Loads Inter for UI chrome.
• Three button tiers (primary Build / tonal Save / ghost Check), a segmented Source/Hybrid control with a sliding thumb, a path breadcrumb in the toolbar, a Problems count badge, iconified/color-coded status segments, and intentional centered empty states.
• Hover/active/focus-visible states and a single motion curve across sliding indicators, the active file-row rail, dirty-dot pulse, and a one-shot Save/Check success ring — all gated behind prefers-reduced-motion.

Editor (cspec-editor)

• Every hardcoded color in the CodeMirror theme is now a var(--cm-*) reference (with fallbacks), so the editor adapts to the active theme. Zero hardcoded colors remain outside the token definitions.
• Two-accent semantics: an indigo left-rail marks a file's own block headers; a strictly-semantic cyan rail/label marks embed/reference cards ("mine" vs. "borrowed").
• Added IDE affordances: line-number gutter, active-line highlight, drawn selection, line wrapping. Rounded the block "S" marker, rendered the child/leaf meta as a pill, and added embed hover elevation.

Test plan

• turbo build passes
• turbo check (typecheck) passes
• turbo test passes (updated one app render test for the new empty-state copy)
• Verified light + dark render correctly via headless browser (pixel-decoded)
• Exercised every new control (Save/Check pulses, theme toggle, segmented control, tabs, block collapse) with zero console errors

Reviewing locally

```sh
npm install && npm run dev # http://127.0.0.1:5173
```
Toggle theme via the Sun/Moon button at the far right of the status bar.

🤖 Generated with Claude Code