/* The site-wide keyboard focus indicator (task 15.6, Requirement 8.2).

   The theme's `a:focus { outline: thin dotted; }` draws a 1px ring, under the
   2 CSS px Requirement 8.2 asks for, and only the Design_System's own components
   carried a proper ring. This gives every focusable element the same ring on
   keyboard focus (`:focus-visible`, so a mouse click draws nothing): `medium` is
   3px, in the focus token, which clears 3:1 against the page in both
   appearances. Same specificity as the theme rule, and loaded after it, so it
   wins without `!important`. Components that set their own ring keep it. */

a:focus-visible,
area:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
iframe:focus-visible,
[tabindex]:focus-visible {
  outline: medium solid var(--tkc-color-focus);
  outline-offset: var(--tkc-space-1);
}

/* Over the hero photo (the theme paints `#222` under it) the focus token drops
   to 2.8:1. A half-and-half mix of the page and text colors is light in both
   appearances: about 5.6:1 in light and 3.9:1 in dark against `#222`. The
   selector also outranks the theme's `.menu-button:focus { outline: 0; }`. */
.main-header a:focus-visible {
  outline: medium solid color-mix(in srgb, var(--tkc-color-bg) 50%, var(--tkc-color-text));
  outline-offset: var(--tkc-space-1);
}