# Quickstart: Semantic Hover Tokens

## What This Feature Does

Replaces hardcoded hover colors across UI components with three semantic CSS custom properties (tokens), so all hover colors can be changed from one place in the theme.

## Key Files

- **Theme**: `apps/web/src/index.css` — define the six new `--color-hover-*` tokens in the `@theme` block
- **Components to update**:
  - `apps/web/src/components/combatant-row.tsx` — 6× neutral, 1× destructive
  - `apps/web/src/components/condition-tags.tsx` — neutral text + bg
  - `apps/web/src/components/condition-picker.tsx` — neutral bg
  - `apps/web/src/components/turn-navigation.tsx` — 2× action, 1× destructive
  - `apps/web/src/components/action-bar.tsx` — neutral bg
  - `apps/web/src/components/stat-block-panel.tsx` — neutral text (close button)
  - `apps/web/src/components/bestiary-search.tsx` — neutral text + bg
  - `apps/web/src/components/ui/button.tsx` — outline + ghost variant hovers

## Token → Tailwind Class Mapping

| Token | Tailwind Text Class | Tailwind BG Class |
|-------|--------------------|--------------------|
| `--color-hover-neutral` | `hover:text-hover-neutral` | — |
| `--color-hover-action` | `hover:text-hover-action` | — |
| `--color-hover-destructive` | `hover:text-hover-destructive` | — |
| `--color-hover-neutral-bg` | — | `hover:bg-hover-neutral-bg` |
| `--color-hover-action-bg` | — | `hover:bg-hover-action-bg` |
| `--color-hover-destructive-bg` | — | `hover:bg-hover-destructive-bg` |

## How to Verify

1. `pnpm --filter web dev` — start dev server
2. Hover over editable fields (name, HP, AC, initiative) → should turn blue (primary)
3. Hover over navigation buttons (prev/next, Roll All) → should be blue
4. Hover over remove/clear buttons → should be red
5. Change `--color-hover-neutral` to a bright color in DevTools → all editable fields should update