/* ==========================================================================
   SpineWell — dark mode
   Activated by the "dark" class on <html> (set before first paint by the
   inline script in <head>, toggled and saved to localStorage by script.js).
   Components read their colours from CSS variables, so most of the theme is
   the token swap below. The rest are component-level adjustments.
   ========================================================================== */

/* Tokens ------------------------------------------------------------------ */
html.dark {
  color-scheme: dark;
  --c-bg: #0a1a1a;
  --c-surface: #112626;
  --c-surface-2: #0e2121;
  --c-ink: #e8f2ef;
  --c-muted: #a3bcb7;
  --c-line: #244442;
  --c-brand: #5cc8bb;
  --c-brand-strong: #86dbd0;
  --c-on-brand: #05211f;
  --c-soft: #183b39;
  --c-accent: #f0b354;
  --c-accent-ink: #f3c178;
  --c-on-accent: #2b1d00;
  --c-deep: #0f2e2d;
  --c-deep-2: #154140;
  --c-on-deep: #eef6f4;
  --c-on-deep-muted: #a9c6c0;
  --c-danger: #ffb0a3;
  --c-ring: rgba(92, 200, 187, 0.28);
  --c-backdrop: rgba(2, 10, 10, 0.74);
  --header-bg: rgba(10, 26, 26, 0.84);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 18px 40px -16px rgba(0, 0, 0, 0.65);
  --shadow-lg: 0 34px 70px -24px rgba(0, 0, 0, 0.8);
}

/* Header and navigation --------------------------------------------------- */
html.dark .topbar { background: #071414; border-bottom: 1px solid var(--c-line); }
html.dark .site-header.menu-open { background: var(--c-surface); }
html.dark .theme-toggle .icon-moon { opacity: 0; transform: rotate(90deg) scale(0.4); }
html.dark .theme-toggle .icon-sun { opacity: 1; transform: none; }

/* Surfaces: shadows are barely visible on dark, so add a hairline edge ----- */
html.dark .svc-card,
html.dark .doc-card,
html.dark .panel,
html.dark .info-card,
html.dark .note-card,
html.dark .badge-float,
html.dark .count-unit,
html.dark .modal-panel { box-shadow: 0 0 0 1px var(--c-line), var(--shadow-sm); }
html.dark .svc-card:hover,
html.dark .doc-card:hover,
html.dark .info-card:hover { box-shadow: 0 0 0 1px var(--c-brand), var(--shadow-lg); }
html.dark .svc-card.on-deep { background: var(--c-deep); }
html.dark .info-strip, html.dark .cta { box-shadow: 0 0 0 1px var(--c-line), var(--shadow-lg); }
html.dark .on-deep, html.dark .site-footer { border-block: 1px solid var(--c-line); }

/* Buttons ----------------------------------------------------------------- */
html.dark .btn::before { background: var(--c-brand-strong); }
html.dark .btn-accent::before { background: #f7c97f; }
html.dark .btn-outline::before { background: var(--c-ink); }
html.dark .btn-outline:hover { color: var(--c-bg); }
html.dark .btn-light::before { background: #ffffff; }
html.dark .btn-ghost-light::before { background: rgba(255, 255, 255, 0.12); }

/* Imagery: soften the light illustrations so they do not glare ------------- */
html.dark .frame img,
html.dark .svc-media img,
html.dark .doc-media img,
html.dark .hero-arch img,
html.dark .slide-photo img,
html.dark .modal-photo img,
html.dark .compare img,
html.dark .avatar-stack img { filter: brightness(0.82) saturate(0.92); }
html.dark .map img { filter: invert(0.92) hue-rotate(170deg) brightness(0.9) saturate(0.7); }
html.dark .hero::before { opacity: 0.7; }
html.dark .hero-dot { opacity: 0.3; }
html.dark .banner::after { background: var(--c-soft); opacity: 0.6; }

/* Forms ------------------------------------------------------------------- */
html.dark .field-input,
html.dark .slot span,
html.dark .check-box,
html.dark .filter-btn { background: var(--c-surface-2); }
html.dark .slot input:checked + span,
html.dark .filter-btn[aria-pressed="true"],
html.dark .check input:checked + .check-box { background: var(--c-brand); color: var(--c-on-brand); }
html.dark .inline-form.is-light { background: var(--c-surface); }
html.dark select.field-input option { background: var(--c-surface); color: var(--c-ink); }

/* Conditions grid, accordion, tables, slider ------------------------------- */
html.dark .cond::before { background: var(--c-soft); }
html.dark .cond-cta::before { background: #f7c97f; }
html.dark .acc-icon, html.dark .check-list .tick { background: var(--c-soft); }
html.dark .acc-btn[aria-expanded="true"] .acc-icon { background: var(--c-brand); color: var(--c-on-brand); }
html.dark .slider-dot { background: var(--c-line); }
html.dark .slider-dot[aria-current="true"] { background: var(--c-brand); }
html.dark .process-dot { background: var(--c-surface); }
html.dark .process-step.is-active .process-dot { background: var(--c-brand); color: var(--c-on-brand); }
html.dark .day-pill { background: var(--c-soft); }
html.dark .day-pill.is-on { background: var(--c-brand); color: var(--c-on-brand); }

/* Toast, 404, coming soon -------------------------------------------------- */
html.dark .toast { background: var(--c-surface); box-shadow: 0 0 0 1px var(--c-line), var(--shadow-lg); }
html.dark .soon-blob { opacity: 0.55; }
html.dark .err-code { color: var(--c-brand); }

/* Dropdown, Home 2, login and register ---------------------------------------- */
html.dark .topbar .social a:hover .icon { color: var(--c-on-accent); }
html.dark .drop-menu, html.dark .quick-book { box-shadow: 0 0 0 1px var(--c-line), var(--shadow-lg); }
html.dark .hero2, html.dark .stats-panel, html.dark .auth-side { border: 1px solid var(--c-line); }
html.dark .hero2-arch img, html.dark .auth-art img { filter: brightness(0.82) saturate(0.92); }
html.dark .svc-row:hover, html.dark .svc-row:focus-visible { background: var(--c-surface); box-shadow: 0 0 0 1px var(--c-line), var(--shadow-md); }
html.dark .svc-row-icon { background: var(--c-soft); }
html.dark .svc-row:hover .svc-row-icon { background: var(--c-brand); color: var(--c-on-brand); }
html.dark .meter span { background: var(--c-line); }

/* Service details ------------------------------------------------------------- */
html.dark .sd-link:hover, html.dark .sd-link[aria-current="page"] { background: var(--c-soft); color: var(--c-brand); }
html.dark .panel.sd-book { background: var(--c-deep); }
/* Autofilled inputs keep the dark surface instead of the browser's pale fill */
html.dark .field-input:-webkit-autofill { -webkit-text-fill-color: var(--c-ink); box-shadow: 0 0 0 100px var(--c-surface-2) inset; }