/* CupsByAA, design-stack quality layer (additive, brand-preserving).
   Loaded AFTER tailwind.css. Adds accessibility + modern web-platform
   best-practices WITHOUT changing the pink brand, layout, or typography.
   Brand pink = #E55E99. Safe for storefront + admin. */

/* 1. Respect reduced-motion globally (the site is GSAP / transition heavy).
      Users who ask their OS for less motion get a still, calm UI. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html { scroll-behavior: auto !important; }
}

/* 2. Keyboard focus ring, on-brand, invisible to mouse users.
      outline follows the element's own border-radius, so shapes are untouched. */
:focus-visible { outline: 2px solid #E55E99; outline-offset: 2px; }

/* 3. On-brand selection + native form controls follow the pink brand,
      not the OS blue default. Reinforces the existing identity. */
::selection { background: #E55E99; color: #fff; }
:root { accent-color: #E55E99; color-scheme: light; }

/* 4. Snappier taps on mobile (removes the legacy 300ms click delay). */
a, button, [role="button"], label[for], input[type="submit"], input[type="button"] {
  touch-action: manipulation;
}

/* 5. Smooth, header-aware in-page navigation (motion-safe). */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html { scroll-padding-top: 5rem; }

/* 6. Crisper type rendering. */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}