/**
 * xot-focus — :focus-visible baseline.
 *
 * Single canonical rule. Replaces two prior inline duplicates that were
 * echo'd from `inc/xot-security.php` and `inc/xot-features.php` — one
 * used `!important`, the other did not, and both hardcoded the coral hex
 * instead of the brand token. Removed in the same change-set as this file.
 *
 * Contract (WCAG 2.2 SC 2.4.7 Focus Visible + SC 2.4.13 Focus Appearance):
 *   - 2px solid outline (meets the 2px-minimum thickness requirement)
 *   - 2px outline-offset so the ring clears rounded corners
 *   - Colour: var(--color-accent) — ≥3:1 contrast against the dark
 *     surface tokens (--color-bg, --color-surface, --color-surface-2)
 *   - :focus-visible only — pointer focus (mouse click on buttons / cards)
 *     stays clean; keyboard, screen-reader and a11y-tree focus shows the
 *     ring
 *   - Forced-colors mode → system `Highlight` colour so user palette
 *     overrides (Windows high-contrast) still produce a visible indicator
 *   - Modern browsers (>= 2022) wrap outline around border-radius
 *     automatically, so cards / chips / pills inherit a rounded ring with
 *     no per-component override required
 *
 * Cascade strategy:
 *   - Wrapped in `@layer base` so any un-layered component CSS that needs
 *     a custom focus visual (e.g. an inset ring on a flat tile) can
 *     override without specificity wars — un-layered rules always win
 *     against layered rules regardless of specificity.
 *
 * @since v1.1 — Phase 5 a11y close
 */

@layer base {
    /* Suppress legacy :focus when the focus isn't visible (mouse).
       Without this, browsers that still draw the native ring on click
       would show a flash on every button press. */
    :focus:not(:focus-visible) {
        outline: none;
    }

    /* The ring.
       `!important` is intentional and load-bearing here. A11y baseline
       has to win against inline `style="outline:none"` (specificity 1000)
       that appears on individual inputs/buttons across the codebase, and
       against per-component `outline:0` resets in 76 places. This is the
       standard accessibility pattern used by GitHub Primer, Adobe Spectrum,
       Tailwind UI a11y resets. Confined to the focus-visible state only,
       so the non-focused base layer of inline `outline:none` styles still
       takes effect when the element isn't focused. */
    :focus-visible {
        outline: 2px solid var(--color-accent) !important;
        outline-offset: 2px !important;
    }

    /* Forced-colors / Windows high-contrast — defer to the user palette. */
    @media (forced-colors: active) {
        :focus-visible {
            outline-color: Highlight !important;
        }
    }
}