/**
 * styles/tokens/_focus.less
 *
 * Module-wide focus ring pattern.
 *
 * High-contrast outer ring + inner offset that must survive all 9 state
 * background combinations and both Foundry dark/light themes.
 * Never rely on browser default focus outline alone.
 *
 * Applied via: .scrying-pool *:focus-visible
 */

.scrying-pool {
  *:focus-visible {
    outline: none; /* suppress browser default - visible fallback via box-shadow */
    box-shadow: var(--sp-focus-ring), 0 0 0 4px var(--sp-surface);
    /* Inner offset (--sp-surface) creates separation so the ring is visible
       against any state background. The outer ring uses --sp-focus (#63c287).
       NOTE: Parent containers must NOT have overflow:hidden to avoid clipping. */
  }

  /* Elevated contrast for interactive elements with state backgrounds */
  [role="button"]:focus-visible,
  button:focus-visible {
    outline: none;
    box-shadow:
      0 0 0 2px var(--sp-surface),        /* inner offset */
      0 0 0 4px var(--sp-focus);          /* outer ring */
  }
}