Focus

The focus ring is outline: 2px solid var(--accent) with outline-offset: 2px — applied via :focus-visible, not :focus (so mouse clicks don't paint rings on buttons).

Live (Tab through these)

Idle vs focused (visual)

Why outline, not box-shadow

Outline lives outside the layout box — it never shifts adjacent content. Inset box-shadow masks the element's border + can be clipped by parent overflow: hidden. The 2px offset prevents the ring from touching the element's border, so contrast stays clean even on edge cases.

Contrast guarantee

The accent token MUST clear 3:1 against every adjacent --bg-* level. Verify on theme switch.