feat: design system overhaul — sidebar, AI chats, settings, brainstorm, color cleanup

- Sidebar: dynamic brand-accent colors, brainstorm section restyled
- AI chat general: popup panel with expand/collapse, hides when contextual AI open
- AI chat contextual: tabs reordered (Actions first), X close button, height fix
- Settings: all tabs restyled, 6 new color presets (sage, terracotta, iron, etc.)
- Global color cleanup: emerald/orange hardcoded → brand-accent dynamic
- Brainstorm page: orange → brand-accent throughout
- PageEntry animation component added to key pages
- Floating AI button: bg-brand-accent instead of hardcoded black
- i18n: all 15 locales updated with new AI/billing keys
- Billing: freemium quota tracking, BYOK, stripe subscription scaffolding
- Admin: integrated into new design
- AGENTS.md + CLAUDE.md project rules added

.agent/skills/wds-4-ux-design/data/modular-architecture/03-quick-refs/benefits.md

@@ -0,0 +1,128 @@
+# Benefits of Three-Tier Architecture
+
+**Why this approach works**
+
+---
+
+## 1. Prevents Overwhelming Specs
+
+**Before:**
+
+- 800-line monolithic file
+- Everything mixed together
+- Hard to find anything
+
+**After:**
+
+- 3 focused files (100-200 lines each)
+- Clear separation
+- Easy to navigate
+
+---
+
+## 2. Clean Handoffs
+
+**Visual Designer** receives:
+
+- `Components/` folder only
+- Clear visual specifications
+- Creates Figma components
+
+**Developer** receives:
+
+- `Features/` folder only
+- Clear business logic
+- Implements functionality
+
+**You** maintain:
+
+- `Pages/` folder
+- Design system integrity
+- Page-specific content
+
+---
+
+## 3. Nothing Gets Missed
+
+**Problem:** Prototype missing leaderboard, week view wrong
+
+**Cause:** Monolithic spec, developer overwhelmed
+
+**Solution:**
+
+- Component file lists ALL visual elements
+- Feature file lists ALL interactions
+- Storyboard shows ALL states
+- **Nothing gets missed**
+
+---
+
+## 4. Easy to Update
+
+**Change request:** "Add countdown timers"
+
+**Before (Code):**
+
+- Regenerate code
+- Previous features break
+- 2+ hours fixing
+
+**After (Spec):**
+
+- Update Feature file (15 minutes)
+- Regenerate with full context
+- Everything works
+
+---
+
+## 5. Reusability
+
+**Same component, different pages:**
+
+```
+Pages/02-calendar-page.md ──┐
+Pages/05-dashboard.md ──────┼→ Components/calendar-widget.component.md
+Pages/08-mobile-view.md ────┘         ↓
+                                Features/calendar-logic.feature.md
+```
+
+Update Component or Feature once, all pages benefit.
+
+---
+
+## 6. Team Collaboration
+
+**UX Designers** → Focus on `Components/` (Figma specs)  
+**Developers** → Focus on `Features/` (logic implementation)  
+**Content Writers** → Focus on `Pages/` (translations)  
+**Product Managers** → Focus on `Features/` (business rules)
+
+Everyone works in parallel, no conflicts.
+
+---
+
+## 7. Design System Integrity
+
+**Page files** reference components:
+
+```markdown
+**Component:** button-primary.component.md
+```
+
+Ensures consistency across pages.
+
+Easy to update design system globally.
+
+---
+
+## ROI
+
+**Time saved per feature:** 2 hours  
+**Over 10 features:** 20 hours  
+**Over product lifecycle:** 100+ hours
+
+**Quality improvement:**
+
+- Zero missing features
+- Consistent design
+- Maintainable codebase