/* ==========================================================================
   JUST DOG — colour layer, site-specific components (2026-09-26, Step 5c)
   The mu-plugins jd-product-page-tabs.php (product tabs / reviews / sold-out) and
   jd-product-faq-style.php paint the OLD teal brand palette. Their CSS is not touched;
   this file re-colours them with palette tokens only (COLOUR properties only).
   NAME CLASH: those plugins declare their OWN `--jd-accent` (#80CACB) inside .jd-tabs / .jd-pdoc,
   which shadows the palette's --jd-accent there — so every value below uses the FULL token name
   (--jd-sky-600 …), never the semantic aliases that the plugins also define.
   Deliberately untouched: the review lightbox / video overlay (rgba black + white), i.e. functional media chrome.
   ========================================================================== */

/* the plugins' own colour variables -> palette */
body .jd-tabs,
body .jd-pdoc {
  --jd-accent:      var(--jd-sky-600);    /* was #80CACB */
  --jd-accent-d:    var(--jd-sky-700);    /* was #5cb3b4 */
  --jd-accent-soft: var(--jd-sky-100);    /* was #eaf6f6 */
  --jd-ink:         var(--jd-ink-900);    /* was #2b2622 */
  --jd-ink-soft:    var(--jd-ink-700);    /* was #6b6258 */
  --jd-line:        var(--jd-cream-200);  /* was #ece6df */
  --jd-track:       var(--jd-cream-100);  /* was #efeae4 */
}

/* tabs: inactive tab text was #9a938b (3.0:1 on white) */
body .jd-tabs__tab { color: var(--jd-ink-500); }

/* reviews: rating bars, stars, dates, thumbnails */
body .jd-rbar__fill { background-color: var(--jd-butter-400); }
body .jd-stars__bg,
body .jd-titlerating .jd-stars__bg { color: var(--jd-cream-200); }
body .jd-stars__fg,
body .jd-titlerating .jd-stars__fg { color: var(--jd-butter-400); }
body .jd-titlerating__txt { color: var(--jd-ink-700); }
body .jd-rv__date { color: var(--jd-ink-500); }
body .jd-rv__photo { background-color: var(--jd-cream-50); }

/* sold-out: label + "notify me" button (was white on #80CACB = 1.9:1) → primary CTA colours */
body .jd-soldout__label { color: var(--jd-ink-500); }
body .jd-soldout__notify { background-color: var(--jd-butter-300); color: var(--jd-ink-900) !important; }
body .jd-soldout__notify:hover { background-color: var(--jd-butter-400); }

/* wishlist heart (plugin forces #fe7a7b with !important) → spec §3 "wishlist heart when added" */
body .woosw-btn::before,
body .woosw-btn.added::before,
body .woosw-btn-added::before,
body .woosw-btn.woosw-added::before { color: var(--jd-blush-600) !important; }