/* ============================================================
   ACCESSIBILITY OVERRIDE LAYER  (loaded LAST — wins the cascade)
   ------------------------------------------------------------
   Fixes WCAG 2.1 AA contrast failures in the locked brand palette
   without touching the design's site.css. Every rule here is
   reversible: delete this file to restore pure brand colors.

   Audited combos (contrast ratio · AA threshold):
     cream  on hot-pink #f833a0 = 3.11  → FAIL body(4.5), FAIL small UI
     cream  on hot-pink-dark    = 4.67  → PASS
     pink   on cream            = 3.11  → FAIL
     pink-deep #951256 on cream = 7.44  → PASS
     cream  on green  #038d65   = 3.72  → FAIL body(4.5)
     cream  on green-dark       = 5.37  → PASS
   Strategy: deepen the pink/green ONLY where cream/pink TEXT sits
   on it. Decorative bright pink (doodles, .puffy, blob tiles) is
   untouched because we override component classes, not --hot-pink.
   ============================================================ */

/* --- 1. Cream text on pink → deepen the pink surface to #c91f7e --- */
.btn-pill-pink { background: var(--hot-pink-dark); }
.panel-pink,
.reviews-strip { background: var(--hot-pink-dark); }
.mobile-cta-sticky { background: var(--hot-pink-dark); }

/* --- 2. Pink text on cream → deepen the text to #951256 --- */
.eyebrow-pink { color: var(--hot-pink-deep); }
body.mood-sticker .hero-cutout-eyebrow { color: var(--hot-pink-deep); }
.reviews-all { color: var(--hot-pink-deep); } /* cream pill, pink label */

/* --- 3. Cream body text on green → deepen the green panel to #027149 --- */
.panel-green { background: var(--green-dark); }

/* --- 4. Universal focus ring: ink reads on every brand color
        (cream, pink, green, sky, lilac), unlike the hot-pink ring
        which vanishes on pink/green panels. --- */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible { outline-offset: 4px; }
/* On dark/colored panels, switch the ink ring to cream so it stays visible. */
.panel-green :focus-visible,
.panel-pink :focus-visible,
.reviews-strip :focus-visible,
.mobile-cta-sticky:focus-visible { outline-color: var(--off-white); }

/* --- 5. Reduced-motion safety net: kill remaining decorative motion
        for users who ask for it (the hero rotator + smooth scroll are
        already JS-guarded). --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}