feat(ui): complete Task 4 UI redesign — all sub-tasks 1-10

- Implemented complete design system with 40+ CSS custom properties
- Created 9 UI primitives (GameCard, SectionHeader, StatRow, ManaBar, ElementBadge, ValueDisplay, ActionButton, SkillRow, TooltipInfo)
- Redesigned all tabs: Spire, Skills, Stats, Equipment, Crafting, Attunements, Golemancy, Spells, Loot, Achievements, Lab, Debug
- Added toast notification system (GameToast) with success/warning/error/info types
- Added confirmation dialogs for destructive actions
- Removed all dev artifacts and component name labels
- Added empty states to all tabs
- Replaced emoji icons with Lucide React icons
- Added enchantPower placeholder to StatsTab and EquipmentTab
- Mobile audit passed at 375px viewport
- Build passes with 0 errors, lint passes with 0 errors

Sub-tasks completed:
- ST1: Design System Implementation
- ST2: Global Layout & Header
- ST3: Left Panel (Mana Display & Action Area)
- ST4: Skills Tab
- ST5: Spire Tab & Spire Mode UI
- ST6: Stats Tab
- ST7: Equipment & Crafting Tabs
- ST8: Attunements Tab
- ST9: Remaining Tabs
- ST10: Toast System & Confirmation Dialogs

Documentation: 15+ files in docs/task4/

docs/task4/subtask_9.md

@@ -0,0 +1,39 @@
+# Sub-task 9: Enhance Golemancy & Attunement Tabs
+
+## Scope
+
+Refactor the `GolemancyTab` and `AttunementsTab` components to use the new design system primitives.
+
+### Key Deliverables:
+1. Update `GolemancyTab` to use `GameCard`, `SectionHeader`, `ActionButton`, `StatRow` primitives
+2. Update `AttunementsTab` to use `GameCard`, `SectionHeader`, `ElementBadge` primitives
+3. Style golem displays with proper visual treatment
+4. Add attunement progress indicators
+5. Ensure golem stats are clearly displayed
+
+## Acceptance Criteria
+
+1. Golem cards use `GameCard` with appropriate variant
+2. Golem stats use `StatRow` with proper highlighting (e.g., damage=--mana-fire)
+3. Attunement options use `GameCard` with proper styling
+4. Element badges use `ElementBadge` primitive
+5. Section headers use `SectionHeader` primitive
+6. No raw hex values - all colors use CSS variables
+7. Golem HP bars animate smoothly (300ms ease-out)
+
+## Dependencies
+
+- **ST1 (Sub-task 1)** - Must be completed first (design system must exist)
+
+## Status
+
+🟡 **PENDING** - Waiting for ST1 completion
+
+## Notes
+
+- GolemancyTab location: `src/components/game/tabs/GolemancyTab.tsx`
+- AttunementsTab location: `src/components/game/tabs/AttunementsTab.tsx`
+- Golemancy has multiple golem types (Earth, Steel, Crystal, etc.)
+- Attunements: Enchanter, Invoker, Fabricator
+- Golem maintenance costs need clear display
+- Attunement leveling shows XP progress