/* ShutterCraft customizer bridge — EP-102/103, v2 (complete audit).
   Every hardcoded hex color + font-family found across all 14 blade pages
   mapped to canonical design tokens. White-on-photo text (hero, badges on
   images, dark-overlay bands) intentionally left untouched for contrast. */

/* ---- Base ---- */
body { background: var(--color-bg) !important; color: var(--color-text) !important; font-family: var(--font-body) !important; }
h1, h2, h3, h4 { font-family: var(--font-heading) !important; color: var(--color-text) !important; }
.shc-hero-inner p { font-family: var(--font-body) !important; }

/* ---- Heading-font labels (Montserrat) ---- */
.spec-label,
.pf-filter,
.g-filter,
.blog-card .pill,
.pf-tile .cap span,
.stat-item .num,
.spec-body .price,
.sd-meta .item b,
.pr-card .price,
.ct-addr strong,
.fq-btn {
  font-family: var(--font-heading) !important;
}

/* ---- Text (dark tier: #3b3b3b + #5b5b5b) ---- */
.blog-card h4 a,
.bd-side h5,
.bd-side .pp .t,
.fq-btn,
.ct-addr strong,
.pfd-meta b,
.pr-card .price,
.pr-card ul li b,
.stat-item .num,
.ct-form input,
.ct-form select,
.ct-form textarea,
.ct-form .radio-row,
.ct-addr .line,
.pr-card ul li {
  color: var(--color-text) !important;
}
/* .pr-card.featured .cta keeps its fixed dark background on purpose — it's a
   contrast-locked variant (white CTA text on it), not a brand-color slot;
   bridging it to var(--color-text) would go white-on-white in dark palettes. */

/* ---- Text-muted (tiers: #767c86 + #8a8f97) ---- */
.ab-body p,
.bd-card .content,
.ct-addr p,
.fq-ans,
.about-text p,
.pfd-body .content,
.sd-body,
.tmd-body p,
.feed-title p,
.shc-sec-title p,
.blog-card p,
.bd-tags span,
.bd-side p,
.bd-back,
.ct-lead,
.g-filter button,
.pf-filter button,
.pfd-meta,
.sd-meta .item,
.sd-back,
.spec-body p,
.tm-card p,
.tm-soc a,
.tmd-soc a,
.tmd-back,
.stat-item .lbl,
.blog-card .meta,
.bd-card .meta,
.pr-card .dur,
.pf-filter span {
  color: var(--color-text-muted) !important;
}

/* ---- Primary accent (#70aed2) ---- */
.stat-item i,
.happy-band .name,
.blog-card h4 a:hover,
.fq-btn::after,
.g-filter button.active,
.g-filter button:hover,
.pf-filter button.active,
.pf-filter button:hover,
.skill-row .lbl span,
.pr-card .price .sym,
.sd-meta .item b,
.spec-body .price,
.tm-card .rank,
.tmd-body .rank {
  color: var(--color-primary) !important;
}
.feed-btn,
.bd-pill,
.bd-side .search-box button,
.ct-form button,
.skill-bar i,
.pfd-nav a,
.pr-card.featured::before,
.pr-card .cta,
.sd-cta,
.tm-soc a:hover,
.tmd-soc a:hover {
  background: var(--color-primary) !important;
}
.pr-card.featured { border-color: var(--color-primary) !important; }

/* ---- Accent (hover-darken tier #5a9bc4) ---- */
.feed-btn:hover,
.ct-form button:hover,
.pfd-nav a:hover,
.sd-cta:hover {
  background: var(--color-accent) !important;
}

/* ---- Surface (#f4f5f7) ---- */
.stat-row,
.shc-portfolio,
.pfd-nav,
.bd-side .search-box input,
.tm-soc a,
.tmd-soc a,
.ct-form input,
.ct-form select,
.ct-form textarea {
  background: var(--color-surface) !important;
}

/* ---- Surface2 (#e9e4d8 image-placeholder bg) ---- */
.blog-card .img,
.g-tile,
.spec-tile,
.pf-tile,
.tm-imgwrap {
  background-color: var(--color-surface2) !important;
}

/* ---- Border (#edeff2 card borders + #d7dae0 dashed empty-state borders) ---- */
.blog-card,
.bd-card,
.bd-side .widget,
.fq,
.pr-card,
.tm-card,
.bd-tags span,
.blog-empty,
.fq-empty,
.g-empty,
.pf-empty,
.pr-empty,
.spec-empty,
.tm-empty {
  border-color: var(--color-border) !important;
}

/* ---- Card surfaces (hardcoded #fff backgrounds — MUST bridge alongside their
   border/text above, else dark palettes render invisible white-on-white text) ---- */
.blog-card,
.bd-card,
.bd-side .widget,
.fq,
.pr-card,
.tm-card,
.pf-empty,
.shc-blog {
  background-color: var(--color-surface) !important;
}