# Cards

A surface for grouping related content. Two canonical variants: `default` (flat, hairline border) and `elevated` (lifted shadow).

## Anatomy

See `anatomy.svg`. Standard parts: `CardHeader` · `CardTitle` · `CardDescription` · `CardAction` (top-right slot) · `CardContent` · `CardFooter`. Reference: `kdcvault/frontend/src/components/ui/card.tsx`.

## Variants

| Token | Background | Border | Shadow | Radius | Padding |
|-------|------------|--------|--------|--------|---------|
| `card.default` | `surface.background` | `border.default` (1px) | `elevation.1` | `rounded.lg` (12px) | 24px |
| `card.elevated` | `surface.background` | none | `elevation.3` | `rounded.xl` (16px) | 28px |
| `card.muted` | `surface.subtle` | `border.subtle` | none | `rounded.lg` | 24px |
| `card.outlined` | `surface.background` | `border.strong` (1px) | none | `rounded.lg` | 24px |

## States

- **Hover (interactive cards only)** — bump shadow one level (`1` → `2`) and shift `translateY(-2px)` over `motion.duration.fast`.
- **Focus-visible** — apply `elevation.focusRing` on the card root.
- **Selected** — 2px `brand.primary` left border or full `border.strong` ring.

## Tokens used

`components.card.*`, `elevation.1`–`3`, `colors.surface.*`, `colors.border.*`.

## Accessibility

- If the card is clickable, the entire card is the hit target; expose it as a `<button>` or `<a>` (not a `<div onClick>`).
- Don't rely on hover state alone to indicate interactivity — pair with cursor + raised elevation.

## Do / Don't

- ✅ Use `card.default` for list rows and grid tiles. Reserve `card.elevated` for modals, popovers, and feature highlights.
- ❌ Don't nest cards more than one level deep — collapse to sections instead.
- ❌ Don't mix `card.default` and `card.elevated` in the same grid.