/* ===================================================================
   BRAND COLOUR - contrast layer
   -------------------------------------------------------------------
   The brand pink is deliberately light (#e8829f). White text on it
   only reaches ~2.6:1, which fails WCAG and reads washed out.

   So anything that sits ON the pink uses deep plum instead of white:
     deep plum #4a2231 on pink #e8829f  ->  5.2:1  (passes AA)

   This file loads last, so it settles those cases without having to
   hunt the colour through 19k lines of component CSS.

   Palette:
     --brand-pink       #e8829f  light rose  - fills, badges, accents
     --brand-pink-soft  #fdf4f7  blush tint  - section backgrounds
     --brand-pink-deep  #c9557a  deep rose   - pink text on white
     --brand-plum       #5e3040  plum        - body dark, footers
     --brand-plum-ink   #4a2231  deep plum   - text sitting on pink
   =================================================================== */

:root {
  --brand-pink: #e8829f;
  --brand-pink-soft: #fdf4f7;
  --brand-pink-deep: #c9557a;
  --brand-plum: #5e3040;
  --brand-plum-ink: #4a2231;
  --brand-accent: #e8829f;
}

/* -------------------------------------------------------------------
   Text and icons sitting on a pink fill -> deep plum, not white

   Only selectors whose resting fill really is --brand-pink belong here.
   Plum-filled buttons (.jp-home-add-to-cart-btn, .btn-testimonials-cta)
   keep the white label their own stylesheet gives them - deep plum on
   plum #5e3040 is 1.26:1, i.e. an empty-looking button.
   ------------------------------------------------------------------- */
.jp-btn-primary,
.jp-btn-danger,
.jp-add-cart-btn,
.jp-apply-btn,
.btn-cta-primary,
.desktop-apply-btn,
.filter-apply-btn,
.arrivals-badge,
.carousel-badge-premium,
.jp-badge,
.badge-low-stock,
.badge-out,
.browse-btn:hover,
.btn-community:hover,
.jp-add-cart-btn:hover {
  color: var(--brand-plum-ink);
}

/* Icons inherit the same treatment */
.jp-btn-primary i,
.jp-btn-danger i,
.jp-add-cart-btn i,
.jp-home-add-to-cart-btn i,
.btn-cta-primary i,
.jp-badge i,
.feature-icon i {
  color: inherit;
}

/* Hover states keep the contrast rather than fading to white.
   .jp-home-add-to-cart-btn belongs here and not above: its fill only
   turns pink on hover, where deep plum reads 5.19:1. */
.jp-btn-primary:hover,
.jp-btn-danger:hover,
.jp-home-add-to-cart-btn:hover,
.btn-cta-primary:hover {
  color: var(--brand-plum-ink);
}

/* -------------------------------------------------------------------
   Pink used as TEXT on a white/light ground needs the deeper rose -
   light rose on white is only 2.6:1.

   Footer links are deliberately NOT in this list: the footer ground is
   plum, where the deeper rose reads 1.9:1. They hover to white in
   footer.css instead.
   ------------------------------------------------------------------- */
.category-title:hover,
.jp-price-value,
.price-value,
.card-text.price,
.text-brand {
  color: var(--brand-pink-deep);
}

/* -------------------------------------------------------------------
   Success state after adding to cart keeps its own semantic green -
   brand pink must not overwrite feedback colours.
   ------------------------------------------------------------------- */
.success-state,
.jp-home-add-to-cart-btn.success-state {
  background: #2f7d4f !important;
  color: #ffffff !important;
}

/* -------------------------------------------------------------------
   Focus visibility - a light pink outline disappears on white
   ------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--brand-pink-deep);
  outline-offset: 2px;
}