Design system overhaul: tokens, UI chrome, panel polish, icon redraw

[mracette]

Summary

Three slices of the Soundscape design overhaul (all still separate from the full app-wide redesign — landing page, per-screen layout rework, and mobile/desktop specifics remain ahead).

Design system + shared UI chrome — implements docs/superpowers/specs/2026-07-02-design-system-overhaul-design.md:

• Adds glow-shadow token companions to the existing accent quartet (pink/green/blue/gold) and an organic easing token — base color values untouched, so scene lighting and the landing page render identically to before.
• Restyles the app's one shared "Panel" surface (MenuButtonContentWrapper) with a translucent tint + glow border — kept translucent so the WebGL scene stays visible behind open panels (a "fake glass" texture was tried and explicitly dropped after live testing showed it fought that principle).
• Restyles the effects panel's toggle switches with a translucent unchecked state and a glow on the checked/green state.
• Small glow touches on the moon icon and "new song" badge.
• Radial menu buttons got a smoother easing polish; per-icon accent coloring was tried and explicitly reverted — buttons stay neutral white.

In-app panel polish — implements docs/superpowers/specs/2026-07-02-in-app-panels-design.md:

• New pill-shaped pillButton style applied to HomePanel's Proceed button and EffectsPanel's preset/reset/randomize buttons.
• SongInfoPanel's credit color sourced from the hotGreen token instead of a hardcoded string.
• EffectsPanel's three toggle switches (Voices/Effects/Pause Visuals) grouped into one visually-bounded cluster, with a pre-existing alignment inconsistency fixed.
• EffectsPanel's sliders now have a primary/secondary visual hierarchy (time-warp/energy prominent, highpass/lowpass/ambience visually secondary but always fully visible — no progressive disclosure), plus a restyled "Fine Tune" divider.

Icon redraw — implements docs/superpowers/specs/2026-07-02-icon-redraw-design.md:

• Replaces the hand-authored SVG icon sprite with Lucide (lucide-react) for the 5 icons actually used in the shipped app (home, music, equalizer, plus, info) — MenuButtonParent.tsx/MenuButtonChild.tsx needed zero changes.
• Deletes 3 unused icons (twitter/github/envelope) and everything that only existed to render them (SocialIcons.tsx, SharingIcons.tsx, iconography.css.ts) — all of it was only reachable from a dev-only Studio story, unused in the live app.
• Fixed a real rendering bug found during live verification: Lucide icons are stroke-based, but the shared .icon-white/.icon-moon classes forced fill (correct for the old solid-shape sprite artwork) which, via CSS inheritance, silently filled in Lucide's outline paths solid. Fixed locally in Icon.tsx's own render rather than touching those shared classes, which ToggleButtonView.tsx also depends on for a genuinely solid-filled shape.

No changes to interaction logic, audio-timing behavior, DOM structure beyond what's described above, typography, or the landing page.

Test plan

• pnpm typecheck clean on every commit across all three slices
• pnpm lint clean (0 errors, same pre-existing warnings throughout)
• pnpm test:e2e full suite (40 tests) passing after every commit, and again after merging all three branches together
• Manual visual verification via live dev server + browser across multiple iterations, including several live design corrections made after seeing the work running (dropped per-button accent colors, dropped the glass-texture panel treatment, fixed the Lucide fill/stroke rendering bug)
• Per-task spec-compliance + code-quality review, plus a final whole-branch review after each slice — all clean, no unresolved Critical/Important findings