# 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