/* CLIXHOUSE design system — accessibility layer
   ─────────────────────────────────────────────────────────────────
   Focus indicators, motion preferences, forced-colors mode, and
   print baseline. Every site gets these for free — they live in
   @layer base so site components can override per-context if needed
   (they almost never should).

   Focus pattern: Sara Soueidan's WCAG 2.2-conformant outline+halo.
     The outline (3px solid) survives forced-colors mode (Windows
     High Contrast); the box-shadow halo provides the second-color
     ring in normal rendering. Together they guarantee 3:1 contrast
     against both light and dark backgrounds.

   Refs:
     Sara Soueidan — https://www.sarasoueidan.com/blog/focus-indicators/
     WCAG 2.2 SC 2.4.13 Focus Appearance
     WCAG 2.2 SC 1.4.11 Non-Text Contrast
*/

@layer base {
  /* Keyboard-only focus rings. Mouse / touch focus is suppressed by
     :focus-visible's UA heuristic.

     Soueidan's canonical two-color recipe
     (sarasoueidan.com/blog/focus-indicators/) uses offset 0 so the
     halo sits *immediately* outside the outline. We deviate
     deliberately: offset 2 gives a transparent gap between element
     and ring, which reads as a separate-indicator on dense forms
     (inputs that abut each other) where Soueidan's stacked form can
     blur into adjacent borders. Both meet WCAG SC 2.4.13.

     No border-radius on the ring itself — none is needed. BOTH layers
     follow the element's own corner shape automatically: modern engines
     render `outline` along the border-radius (offset and all), and a
     spread `box-shadow` is always clipped to the border box's radius. So
     a pill button at 9999px gets a fully rounded, concentric halo, not a
     squarish one. (Verified — box-shadow follows border-radius; the
     "halo is rectangular" concern does not hold. In forced-colors mode
     the box-shadow is stripped and the rounded outline carries the ring.) */
  :focus-visible {
    outline: 3px solid var(--focus-ring, currentColor);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--focus-halo, Canvas);
  }

  /* Remove the legacy focus ring from non-keyboard focus, but only
     when :focus-visible is supported (which it is, broadly).
     Backwards-compatible: older UAs keep their default behavior. */
  :focus:not(:focus-visible) {
    outline: none;
  }

  /* Reduced-motion guard — disable non-essential animation across
     the entire system. Components that NEED motion for meaning
     (e.g. loading spinners) opt back in inside
     @media (prefers-reduced-motion: no-preference).

     Known footgun (Josh Comeau, via css-tricks.com/nuking-motion-with-
     prefers-reduced-motion/): when JS code keys off transitionend /
     animationend, a 0.01ms duration fires the event immediately and
     the JS proceeds to its end state at native frame rate — which
     can be *more* motion, not less. This is the dominant published
     pattern; we accept the trade because (a) the framework's own
     transitions are CSS-only, (b) sites should listen for
     transition events with a timeout fallback regardless. */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* Forced-colors mode (Windows High Contrast, etc.) — strip our
     decorative backgrounds and shadows so the user's chosen palette
     wins. Outlines survive automatically. */
  @media (forced-colors: active) {
    *,
    *::before,
    *::after {
      box-shadow: none !important;
      text-shadow: none !important;
    }
    img, picture, video {
      forced-color-adjust: none;
    }
  }

  /* Print baseline — ink-on-paper economy. Sites layer on per-page
     print rules in their @layer overrides if needed. */
  @media print {
    *,
    *::before,
    *::after {
      background: transparent !important;
      color: black !important;
      box-shadow: none !important;
      text-shadow: none !important;
    }
    body {
      font-size: 11pt;
      line-height: 1.4;
    }
    a {
      text-decoration: underline;
    }
    a[href^="http"]::after {
      content: " (" attr(href) ")";
      font-size: 0.85em;
      word-break: break-all;
    }
    h1, h2, h3, h4, h5, h6 {
      page-break-after: avoid;
    }
    img, table, pre {
      page-break-inside: avoid;
    }
    /* Hide common chrome by default; sites that want different
       behavior set print: visible on the element. */
    nav, header[role="banner"], footer[role="contentinfo"], .no-print {
      display: none !important;
    }
  }
}