/* ══════════════════════════════════════════════════════════════════════════════
   DARK MODE  — activated by  html[data-theme="dark"]
   Scoped to the public layout only; admin/portal never receive this attribute.
   Uses CSS custom-property overrides so every token-based rule updates
   automatically. Only hardcoded colours get explicit selectors below.
   ══════════════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] {
  /* ── Surfaces ── */
  --color-bg:           #111110;
  --color-bg-soft:      #1a1a19;
  --color-bg-muted:     #242423;
  --color-surface:      #1a1a19;
  --color-border:       #2e2e2c;
  --color-border-soft:  #242423;
  --color-border-strong:#4a4a47;

  /* ── Text ── */
  --color-text:         #f0f0ee;
  --color-text-2:       #c8c8c5;
  --color-text-3:       #9a9a97;
  --color-text-4:       #6b6b68;
  --color-text-inv:     #111110;

  /* ── Accent — slightly lighter for visibility on dark backgrounds ── */
  --color-accent:       #4a72e0;
  --color-accent-hover: #3d60cc;
  --color-accent-light: #1a2850;
  --color-accent-muted: #4a72e0;

  /* ── Alerts & badges ── */
  --alert-success-bg:     #0a2e18;
  --alert-success-fg:     #4ade80;
  --alert-success-border: #14532d;
  --alert-error-bg:       #2d0a0a;
  --alert-error-fg:       #f87171;
  --alert-error-border:   #7f1d1d;
  --badge-danger-bg:      #2d0a0a;
  --badge-danger-fg:      #f87171;
  --badge-warning-bg:     #2a1a00;
  --badge-warning-fg:     #fbbf24;
  --badge-warning-border: #78350f;

  /* ── Shadows — more pronounced on dark ── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,.5);
  --shadow-lg:  0 8px 36px rgba(0,0,0,.6);
  --shadow-xl:  0 16px 52px rgba(0,0,0,.65);
}

/* ── Text selection ────────────────────────────────────────────────────────── */
html[data-theme="dark"] ::selection {
  background: var(--color-accent-light);
  color: var(--color-text);
}

/* ────────────────────────────────────────────────────────────────────────────
   NAV  — hardcoded rgba(255,255,255,…) backgrounds need dark equivalents
   ────────────────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .site-nav {
  background: rgba(17,17,16,0.88);
}
html[data-theme="dark"] .site-nav.is-scrolled {
  background: rgba(17,17,16,0.97);
  border-bottom-color: var(--color-border);
}

/* Logo wordmark text (hardcoded #0d0d0d in light mode) */
html[data-theme="dark"] .logo-wordmark        { color: var(--color-text); }
html[data-theme="dark"] .logo-wordmark__light { opacity: 0.4; }

/* Logo SVG mark — make the blue paths brighter on dark background */
html[data-theme="dark"] .logo-mark path { fill: var(--color-accent); }

/* Mobile nav drawer */
html[data-theme="dark"] .mobile-nav {
  background: var(--color-bg);
  border-top-color: var(--color-border);
}
html[data-theme="dark"] .mobile-nav__link:hover {
  background: var(--color-bg-muted);
}
html[data-theme="dark"] .mobile-nav__cta {
  background: var(--color-bg-soft);
  border-top-color: var(--color-border);
}

/* ────────────────────────────────────────────────────────────────────────────
   HERO  — gradient uses token so it updates automatically;
   the radial gradient is accent-light which changes in dark mode ✓
   ────────────────────────────────────────────────────────────────────────── */

/* ────────────────────────────────────────────────────────────────────────────
   TESTIMONIALS  — quote mark (::before) uses color-accent-light which is
   #1a2850 in dark mode; needs a slight opacity bump to stay visible
   ────────────────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .testimonial::before {
  color: var(--color-accent);
  opacity: 0.12;
}

/* ────────────────────────────────────────────────────────────────────────────
   BUTTONS  — most use tokens and are fine. The one exception is the white
   "inverse" button that sits on an accent-coloured background (CTA bands,
   service sidebar, booking FAQ card). In dark mode the accent shifts to
   #4a72e0; we tone down the button so it's not blindingly bright.
   ────────────────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .cta-section .btn--primary,
html[data-theme="dark"] .sd-sidebar__cta .btn--primary,
html[data-theme="dark"] .booking-faq-card .btn--primary {
  background: rgba(255,255,255,0.14);
  color: #fff;
  border-color: rgba(255,255,255,0.25);
  box-shadow: none;
}
html[data-theme="dark"] .cta-section .btn--primary:hover,
html[data-theme="dark"] .sd-sidebar__cta .btn--primary:hover,
html[data-theme="dark"] .booking-faq-card .btn--primary:hover {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.4);
}

/* ────────────────────────────────────────────────────────────────────────────
   COOKIE CONSENT  — already dark-themed, just ensure border contrast
   ────────────────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .cookie-consent {
  background: #0d0d0c;
  border-top-color: var(--color-border);
}

/* ────────────────────────────────────────────────────────────────────────────
   FOOTER  — already near-black; in dark mode add a subtle top border so it
   doesn't merge into the page background
   ────────────────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .site-footer {
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* ────────────────────────────────────────────────────────────────────────────
   FORMS  — form-input/select/textarea use --color-surface token ✓
   Only the focus ring needs a slight opacity boost in dark mode
   ────────────────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .form-input:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] .form-textarea:focus {
  box-shadow: 0 0 0 3px rgba(74,114,224,0.22);
}

/* ────────────────────────────────────────────────────────────────────────────
   PROCESS STEP connector line (home page) uses --color-border ✓
   ────────────────────────────────────────────────────────────────────────── */

/* ────────────────────────────────────────────────────────────────────────────
   PAGE BUILDER inline blocks — override any hardcoded light backgrounds
   ────────────────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .block[style*="background:#fff"],
html[data-theme="dark"] .block[style*="background: #fff"],
html[data-theme="dark"] .block[style*="background:white"],
html[data-theme="dark"] .block[style*="background: white"] {
  background: var(--color-surface) !important;
}