/* ════════════════════════════════════════════════════════════════
   VILKAX · Accessibility system (web / static-site edition)
   ----------------------------------------------------------------
   Mirror of assets/tokens/vilkax-a11y.css for the statically-served
   marketing + login + downloads site (Cloudflare Pages can't resolve
   a bundler @import to /assets/tokens/). Linked on every page right
   after vilkax-bridge.css so it applies site-wide. KEEP IN SYNC with
   the canonical copy. See docs/a11y/ACCESSIBILITY.md.
   ════════════════════════════════════════════════════════════════ */

:root {
  --a11y-focus-ring:        #4DA9FF;
  --a11y-focus-ring-width:  2px;
  --a11y-focus-ring-offset: 2px;
  --a11y-motion-scale: 1;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="switch"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: var(--a11y-focus-ring-width) solid var(--a11y-focus-ring);
  outline-offset: var(--a11y-focus-ring-offset);
  border-radius: 4px;
}

.a11y-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.a11y-skip-link {
  position: fixed;
  top: -100px; left: 12px;
  z-index: 100000;
  padding: 10px 16px;
  background: var(--a11y-focus-ring, #4DA9FF);
  color: #04060A;
  border-radius: 8px;
  font-weight: 600;
  transition: top 120ms ease;
}
.a11y-skip-link:focus { top: 12px; outline: var(--a11y-focus-ring-width) solid #fff; }

/* ── prefers-reduced-motion — global respect (WCAG 2.3.3) ─────────
   Only for users whose OS asks for it. Neutralise animations +
   transitions, stop auto-playing/looping motion, kill glow-pulses. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --a11y-motion-scale: 0;
    --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; --dur-5: 0ms;
  }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .vlx-pulse, .vlx-glow-pulse, [class*="-pulse"], [class*="-breathe"],
  [class*="-shimmer"], [class*="-blink"] {
    animation: none !important;
  }
}

/* The hidden attribute always wins. Component rules such as display:grid outrank
   the browser default, which left error cards showing on pages that loaded fine. */
[hidden] { display: none !important; }