Card states

Default

Static surface — no hover effect, no cursor change.

Background

--bg-surface + --gradient-card

Border

1px solid --border

Clickable

Apply .clickable, role="button", or use <a>/<button> — opts the card into hover + press.

Hover

border --gold-dim · halo 0 0 0 3px rgba(215, 153, 33, 0.35)

— width

3px, grows OUTWARD from card edge

— opacity

35% — translucent so the halo reads as a soft accent, not a hard second ring

— transition

--transition-hover (150ms ease-out)

Press

background + border --gold-bright · text #fff · halo cleared

— transition

--transition-press (55ms ease-out) on enter, --transition-hover on release

— mirrors

.btn-secondary:active — same press treatment as ghost-style buttons

The hover halo only appears when a card is actually interactive. Surface cards (data display) get no hover effect at all — clickable cards opt in via class or semantic element. Press fills with gold-bright to match the secondary-button click pattern, so a clicked card reads consistently with the rest of the interactive system.