Focus state — outward halo, semantic color
Width
3px, expands outward from field edge
Outline
suppressed (outline: none) to prevent stacking with global :focus-visible ring
Transition
--transition-hover (150ms ease-out) on border-color + box-shadow
Default
border --gold-bright · halo rgba(215, 153, 33, 0.35)
35% opacity — matches card hover. Used for neutral fields with no semantic state.
Invalid
border --red-bright · halo rgba(204, 36, 29, 0.5)
50% opacity — keeps the red signal on focus rather than overriding to gold.
Verified
border --green-bright · halo rgba(152, 151, 26, 0.5)
50% opacity — keeps the green signal on focus rather than overriding to gold.
Semantic states (invalid/verified) preserve their color through focus so meaning doesn't flip on interaction. Their dim variants read quieter than gold-dim at the same opacity, so they're bumped to 50% to match perceived intensity.