[Design] Unified AI-state color system derived from systemBlue

[dushaobindoudou]

Problem (verified by founder during dogfooding)

Floating orb cycles random colors. "Thinking" is purple in one place, indigo in CSS. Same concept, 3 colors. See docs/UI_DESIGN_AUDIT.md -> S1.

3 inconsistent state machines

• CSS tokens src/index.css:31-34 (idle/watching/thinking/executing - systemBlue family)
• AnimatedLogo src/components/shared/AnimatedLogo.tsx:5 (same names, WeChat green colors)
• FloatingIcon src/components/FloatingIcon/FloatingIcon.tsx:21 (different names, green/purple/yellow/red)

Decision

One state enum + one mapping, derived from systemBlue. Color-coding by state is functional (tells user what AI is doing) but must be a coherent family.

Proposed palette:

State	Color
idle	#8e8e93 gray
observing	#007aff systemBlue
thinking	#5856d6 indigo
acting	#34c759 green
alert	#ff9500 orange

Acceptance

• Single AppState enum: idle/observing/thinking/acting/alert
• One STATE_PALETTE consumed by FloatingIcon orb + AnimatedLogo + CSS tokens
• Orb reads STATE_PALETTE not hardcoded PALETTE (FloatingIcon.tsx:22-27)
• All state colors a family rooted in systemBlue
• Dark mode variants
• GIF showing orb cycling with new palette