:root {
  --congar-focus-ink: #263e33;
  --congar-focus-paper: #f6f7f2;
  --congar-focus-halo: #83977966;
}

:where(.dark, [data-theme='dark']) {
  --congar-focus-ink: #f6f7f2;
  --congar-focus-paper: #17231f;
}

:where(a[href], button, input, textarea, select, summary, [tabindex]) {
  outline-offset: 8px;
}

/* One focus treatment takes precedence over component rings without moving content. */
:focus-visible:not([tabindex='-1']) {
  outline: 2px solid var(--congar-focus-ink) !important;
  outline-offset: 4px !important;
  box-shadow:
    0 0 0 2px var(--congar-focus-paper),
    0 0 0 6px var(--congar-focus-halo) !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition-property:
    color, background-color, border-color, text-decoration-color,
    background-size, outline-color, outline-offset, box-shadow, scale,
    transform, translate, opacity !important;
  transition-duration: 240ms !important;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
}

@media (prefers-reduced-motion: reduce) {
  :focus-visible:not([tabindex='-1']) {
    transition: none !important;
  }
}

@media (forced-colors: active) {
  :focus-visible:not([tabindex='-1']) {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}