/focus — Focus Ring System

Generate focus styles for all interactive elements:

Default Focus Ring

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: inherit;
}

Adapt the ring color to work against both light and dark backgrounds. Use outline (not box-shadow) for reliability. Always set outline-offset for breathing room.