/* SLE-T7-focus-rings — canonical themable :focus-visible patterns.
 *
 * Outline-based ring using --focus-ring token. Apps can re-theme by
 * overriding --focus-ring locally (e.g., dark-mode media query for
 * higher contrast).
 *
 * Pairs with a brief focus-pulse animation that calls attention without
 * being distracting. Animation respects prefers-reduced-motion.
 *
 * Depends on tokens.css for --focus-ring/-fade/-fade-soft.
 */
:where(
    button:not(.no-focus-ring),
    a,
    input,
    select,
    textarea,
    [tabindex]:not([tabindex='-1']),
    [role='button'],
    [role='link']
  ):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
  animation: focus-pulse 0.6s ease-out;
}

@keyframes focus-pulse {
  0%   { outline-offset: 2px; outline-color: var(--focus-ring-fade); }
  50%  { outline-offset: 4px; outline-color: var(--focus-ring-fade-soft); }
  100% { outline-offset: 2px; outline-color: var(--focus-ring); }
}

/* Reduced-motion — keep the ring but drop the animation. */
@media (prefers-reduced-motion: reduce) {
  :where(button, a, input, select, textarea, [tabindex]):focus-visible {
    animation: none;
  }
}

/* High-contrast adjustment — fully saturated outline. */
@media (prefers-contrast: more) {
  :where(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--y);
    outline-offset: 2px;
  }
}