/* Champi dark theme — loaded ONLY when WEB_DARK_MODE_ENABLED=true, and only by pages that opt in
   (<Layout darkTheme>: home, trade x city, provider profile). Every rule is scoped under
   `body.dm`, a class only those pages carry, so any other page stays fully light.
   Flag off => this file is never linked, and no HTML/CSS served today changes by a byte.

   Method (token swap, no rewrite): style.css / style-pages.css already read the brand tokens
   (--navy = text, --white = surface, --gray-* = lines/muted). Inside <main> we REDEFINE those
   tokens for dark; intrinsically dark bands (hero, featured cards, final CTA) re-pin the
   original light-theme values so their own designs are untouched. Hard-coded colors that no
   token reaches get an explicit override at the bottom.

   Palette (docs/design-system.md): navy #1A2332 / deep #141B27 / card #233047 /
   text #F7FAFC / muted #A8B3C1 / amber #F59E0B / gold #FFDC5D. */

/* ---- Light-scheme fix that ships with the flag (kept here so flag-off stays byte-identical).
   The uppercase category label was amber-dark #D97706 on white = 3.19:1. #B45309 = 5.0:1. ---- */
body.dm .profile-info .service-type { color: #b45309; }

@media (prefers-color-scheme: dark) {
  body.dm {
    background: #1a2332;
    color: #f7fafc;
    color-scheme: dark;
    /* location-hero.css tokens (:root there resolves against the LIGHT tokens, so re-pin). */
    --lh-panel: #233047;
    --lh-line: #33425c;
    --lh-text: #f7fafc;
    --lh-muted: #a8b3c1;
    --lh-bubble: #005c4b;
    --lh-bubble-text: #e9edef;
    --lh-bar: #141b27;
    --lh-bar-line: #33425c;
    --lh-btn-line: #4a5b78;
    /* home "spectacular" layer (style-pages.css --hs-*). */
    --hs-card-bg: #233047;
    --hs-card-border: #33425c;
    --hs-card-text: #f7fafc;
    --hs-card-muted: #a8b3c1;
    --hs-map-bg: linear-gradient(180deg, #141b27 0%, #1a2332 100%);
  }

  /* ---- Token flip inside <main>: text, surfaces, lines, muted. ---- */
  body.dm main {
    --navy: #f7fafc;
    --navy-light: #cbd5e1;
    --white: #233047;
    --gray-50: #1f2a3e;
    --gray-100: #33425c;
    --gray-200: #3d4d68;
    --gray-300: #4a5b78;
    --gray-400: #8f9cb0;
    --gray-500: #a8b3c1;
    --gray-700: #d3dae5;
    --amber-dark: #fbbf24;
    --amber-50: #2b2a26;
    color: #f7fafc;
  }

  /* ---- Dark islands: re-pin the original light-theme tokens (these bands are navy in both themes). ---- */
  body.dm :is(.hero, .category-card.featured, .cta-section, .rx-teaser-card, .map-section) {
    --navy: #1e293b;
    --navy-light: #334155;
    --white: #ffffff;
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e5e7eb;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-700: #334155;
    --amber-dark: #d97706;
  }

  /* ---- Surfaces whose label sits on amber / green: keep the dark label (the flipped --navy would be light). ---- */
  body.dm :is(.auth-banner-btn, .cta-secondary-sm, .auth-btn, .search-form .search-btn),
  body.dm .auth-banner-btn:hover { color: #1a2332; }
  body.dm .step-card::before,
  body.dm .legal-page .how-steps li::before { color: #1a2332; }
  /* WhatsApp green keeps its green; the label goes dark for contrast (white on #25D366 is 1.98:1). */
  body.dm :is(.cta-primary, .share-wa, .review-cta-button, .wa-cta-hero, .floating-wa),
  body.dm :is(.cta-primary, .share-wa, .review-cta-button, .wa-cta-hero, .floating-wa):hover,
  body.dm :is(.cta-primary, .share-wa, .review-cta-button, .wa-cta-hero, .floating-wa):focus-visible { color: #0f2a1a; }

  /* ---- Provider avatars / initials (navy tile + amber letters in light). ---- */
  body.dm :is(.provider-avatar, .profile-avatar) { background: #33425c; color: #fbbf24; }

  /* ---- Provider profile: category label (amber on dark = high contrast). ---- */
  body.dm .profile-info .service-type { color: #fbbf24; }

  /* Hero A/B treatment outlines the per-provider buttons (location-hero.css): keep that look. */
  body.dm .loc-ab-t :is(.provider-btn--contact, .auth-banner-btn),
  body.dm .loc-ab-t :is(.provider-btn--contact, .auth-banner-btn):hover { color: var(--lh-text); }

  /* ---- Chrome: header + footer one step deeper than the page so they read as bars. ---- */
  body.dm .site-header { background: #141b27; box-shadow: 0 1px 0 #2a384f; }
  body.dm .site-footer { background: #141b27; border-top: 1px solid #2a384f; }
  body.dm .footer-bottom { border-top-color: #2a384f; }

  /* ---- Hero search pill + location dropdown: a dark card, not a white slab on navy. ---- */
  body.dm .hero .search-form { background: #233047; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45); }
  body.dm .hero .search-form input { color: #f7fafc; }
  body.dm .hero .search-form input::placeholder { color: #a8b3c1; }
  body.dm .hero .search-form input + input,
  body.dm .hero .geo-btn { border-color: #33425c; }
  body.dm .hero .geo-btn { background: transparent; color: #a8b3c1; }
  body.dm .hero .geo-btn:hover { background: #2b2a26; color: #fbbf24; }
  body.dm .hero .loc-suggestions { background: #233047; border-color: #33425c; color: #f7fafc; }
  body.dm .hero .loc-item { border-bottom-color: #33425c; }
  body.dm .hero .loc-item:hover { background: #2d3c56; }
  @media (max-width: 920px) {
    body.dm .hero-copy .search-form > input[name="q"] { box-shadow: inset 0 -1px 0 #33425c; }
  }

  /* ---- Hard-coded light surfaces (no token reaches them). ---- */
  body.dm .cat-icon { background: rgba(245, 158, 11, 0.16); }
  body.dm .category-card:hover .cat-icon { background: var(--gradient); }
  body.dm .testimonials-section { background: linear-gradient(180deg, #1f2a3e 0%, #1a2332 100%); }
  body.dm .testimonials-subtitle { color: #a8b3c1; }
  body.dm .map-embed-wrap { background: #141b27; border-color: rgba(245, 158, 11, 0.28); }
  body.dm .rx-teaser-card { border: 1px solid #2a384f; }

  /* ---- Badges & notices: translucent tint + light label (pastel light chips glare on navy). ---- */
  body.dm .badge-verified, body.dm .gas-badge { background: rgba(34, 197, 94, 0.16); color: #86efac; }
  body.dm .gas-badge { border-color: rgba(134, 239, 172, 0.4); }
  body.dm .gas-badge--expired { background: var(--gray-100); color: var(--gray-500); border-color: var(--gray-200); }
  body.dm .badge-responds { background: rgba(250, 204, 21, 0.14); color: #fde68a; }
  body.dm .badge-24h { background: rgba(59, 130, 246, 0.2); color: #bfdbfe; }
  body.dm .badge-points, body.dm .cert-tier-badge { background: rgba(245, 158, 11, 0.16); color: #fcd34d; }
  body.dm .cert-tier-badge { border-color: rgba(252, 211, 77, 0.4); }
  body.dm .badge-via-connection { background: rgba(14, 165, 233, 0.18); color: #bae6fd; }
  body.dm .hr-verified-badge { background: rgba(34, 197, 94, 0.16); color: #86efac; }
  body.dm .review-card--featured { border-left-color: #38bdf8; }
  body.dm .review-attribution a { color: #7dd3fc; }
  body.dm .widened-search-notice { background: rgba(245, 158, 11, 0.1); }
  body.dm .widened-search-notice p { color: #fcd34d; }
  body.dm .nearby-hint { background: rgba(56, 189, 248, 0.1); color: #e2e8f0; }
}