# Sub-task 7: Enhance SpellsTab & LootTab

## Scope

Refactor the `SpellsTab` and `LootTab` components to use the new design system primitives.

### Key Deliverables:
1. Update `SpellsTab` to use `GameCard`, `SectionHeader`, `ElementBadge` primitives
2. Update `LootTab` to use `GameCard`, `StatRow`, `ElementBadge` primitives
3. Style spell cards with proper visual treatment
4. Add `ElementBadge` for spell element types
5. Ensure loot items are clearly displayed

## Acceptance Criteria

1. Spell cards use `GameCard` with appropriate variant
2. Spell elements display using `ElementBadge` primitive
3. Loot items use `GameCard` with proper styling
4. Stat rows use `StatRow` primitive with highlighting
5. Section headers use `SectionHeader` primitive
6. No raw hex values - all colors use CSS variables
7. Active spell has proper highlight (--mana-light border)

## Dependencies

- **ST1 (Sub-task 1)** - Must be completed first (design system must exist)

## Status

🟡 **PENDING** - Waiting for ST1 completion

## Notes

- SpellsTab location: `src/components/game/tabs/SpellsTab.tsx`
- LootTab location: `src/components/game/tabs/LootTab.tsx`
- Spells can be cast during combat
- Loot includes essences from defeated enemies
- Spell cards should show cast speed and damage