/* ============================================================
   ds/base.css  ·  Wepic Design System — global base behaviours
   ------------------------------------------------------------
   Loaded on EVERY page via views/partials/ds-head.php, right after
   tokens.css, so these rules apply app-wide regardless of whether a
   surface has opted into components.css / colors_and_type.css.

   Intentionally tiny and low-collision:
     · a real prefers-reduced-motion reset — the --motion-decorative
       flag in tokens.css is only advisory and currently has no
       consumers, so nothing actually stops animating today.
     · a zero-specificity :focus-visible ring (mirrors the one in
       colors_and_type.css) so keyboard focus is always visible, even
       on surfaces that don't load the full type layer.
   ============================================================ */

/* ---------- box-sizing: border-box on everything ----------
   Defined here (loaded on every page) so admin pages no longer
   depend on event-manager.css loading first to get this reset. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ---------- respect the OS "reduce motion" preference ---------- */
@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;
  }
}

/* ---------- focus ring on every interactive element ----------
   :where() keeps specificity at 0, so any surface-specific focus
   style still wins; this is just the always-present baseline. */
:where(button, a, input, textarea, select, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}