Interactive states — press and hold any button to see lit state
Primary
Press: --fg-heading fill (warm cream)
Text stays dark — readable
Secondary
Hover: gold tint + text brightens
Press: gold-bright fill + white text
Danger
Hover: red tint + text brightens
Press: red-bright fill + white text
Success
Hover: green tint + text brightens
Press: green-bright fill + white text
Disabled
Opacity 0.5
pointer-events: none
Loading
Spinner + neutral
cursor: not-allowed
Timing — press: 55ms ease-out · release: 180ms ease-out
:active → transition: 55ms ease-out
release → transition: 180ms ease-out
:hover → transition: 150ms ease-out
Lit color = --fg-heading (#fbf1c7)
Text = --bg-shell (#1d2021)
Ratio ≈ 12:1 — passes AAA