:root {
  --focus-ring-color: var(--color-bg);
  --focus-ring-contrast: var(--color-primary);
  --focus-ring-width: 3px;
  --focus-ring-offset: 4px;
}

html body :is(
  a[href],
  area[href],
  button:not([disabled]),
  input:not([type="hidden"]):not([disabled]),
  select:not([disabled]),
  textarea:not([disabled]),
  summary,
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  box-shadow: 0 0 0 2px var(--focus-ring-contrast);
}