/* ============================================================
   B5 SERVICES GROUP — THEME SYSTEM
   Light/dark mode via CSS custom property overrides.

   Strategy: Override the neutral color variables (white, black,
   charcoal, grays) in dark mode. Brand colors (blue, magenta,
   green, etc.) stay the same. Always-dark sections (hero, navy,
   footer) get their original values restored so they're unchanged.
   ============================================================ */

/* ---- Transition class — applied briefly during theme switch ---- */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color 0.35s ease,
              color 0.25s ease,
              border-color 0.35s ease,
              box-shadow 0.35s ease !important;
  transition-delay: 0s !important;
}


/* ============================================================
   DARK MODE — Variable Overrides
   Palette: sophisticated dark navy-gray, not pure black.
   HSL ~(226°, 24%, 18%) for main bg — warm blue undertone.
   ============================================================ */

[data-theme="dark"] {
  /* --- Surface backgrounds --- */
  --color-white:      #222738;
  --color-warm-white: #292e42;

  /* --- Text colors (inverted for readability on dark) --- */
  --color-black:      #e8e8ea;
  --color-charcoal:   #b0aeb5;
  --color-gray-400:   #9a9a9f;

  /* --- Borders (subtle white at low opacity) --- */
  --color-gray-100:   rgba(255, 255, 255, 0.08);
  --color-gray-200:   rgba(255, 255, 255, 0.12);

  /* --- Shadows (deeper on dark surfaces) --- */
  --shadow-xs:      0 1px 3px rgba(0, 0, 0, 0.30);
  --shadow-sm:      0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md:      0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg:      0 8px 32px rgba(0, 0, 0, 0.45);
  --shadow-xl:      0 16px 48px rgba(0, 0, 0, 0.55);
  --shadow-blue:    0 4px 16px rgba(0, 102, 221, 0.30);
  --shadow-magenta: 0 4px 12px rgba(255, 46, 151, 0.30);
  --shadow-navy:    0 8px 32px rgba(10, 14, 39, 0.60);

  color-scheme: dark;
}


/* ============================================================
   ALWAYS-DARK SECTIONS — Restore original variable values.
   Hero, navy sections, footer already have dark backgrounds
   with light text. Keep them pixel-identical in both modes.
   ============================================================ */

[data-theme="dark"] .hero,
[data-theme="dark"] .page-hero,
[data-theme="dark"] .section-navy,
[data-theme="dark"] .section-navy-mid,
[data-theme="dark"] .section-blue,
[data-theme="dark"] .cta-block.navy,
[data-theme="dark"] .site-footer {
  --color-white:      #FFFFFF;
  --color-warm-white: #FAFAF8;
  --color-black:      #1A1A1C;
  --color-charcoal:   #2A2A2E;
  --color-gray-100:   #E8E8EA;
  --color-gray-200:   #D0D0D4;
  --color-gray-400:   #8A8A90;
}


/* ============================================================
   DUAL-USE FIXES
   --color-white is used as BOTH surface bg AND text-on-accent.
   In dark mode the variable becomes dark, so elements that use
   it as text on colored backgrounds (buttons, step numbers, etc.)
   need to be forced to real white.
   ============================================================ */

[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .btn-ghost:hover,
[data-theme="dark"] .step-number,
[data-theme="dark"] .phase-num,
[data-theme="dark"] .filter-tab.active,
[data-theme="dark"] .nav-logo .logo-mark {
  color: #FFFFFF;
}

[data-theme="dark"] .pricing-table thead th {
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .pricing-table thead th:first-child {
  color: #FFFFFF;
}

[data-theme="dark"] .btn-loading::after {
  border-color: rgba(255, 255, 255, 0.4);
  border-top-color: #FFFFFF;
}


/* ============================================================
   DARK MODE POLISH
   Extra refinements for a premium dark experience.
   ============================================================ */

/* Header shadow — stronger on dark */
[data-theme="dark"] .site-header.scrolled {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.45);
}

/* Nav hover states — slightly more visible on dark */
[data-theme="dark"] .nav-item > a:hover,
[data-theme="dark"] .nav-item.active > a {
  background-color: rgba(0, 102, 221, 0.12);
}

[data-theme="dark"] .nav-dropdown li a:hover {
  background-color: rgba(0, 102, 221, 0.12);
}

/* Modal close — subtle brighten instead of inversion */
[data-theme="dark"] .modal-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #e8e8ea;
}

/* Gold badge — ensure contrast on dark */
[data-theme="dark"] .badge-gold {
  color: var(--color-gold);
}

/* Plateau card gradient bar — stays vivid (no change needed, but
   the card bg shift makes it pop more on dark, which is nice) */

/* FAQ accordion — lift active card more on dark surfaces */
[data-theme="dark"] .faq-item:has(.faq-question.active) {
  border-color: rgba(0, 102, 221, 0.45);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 102, 221, 0.12);
}

/* Brand family cards — boost icon bg opacity on dark */
[data-theme="dark"] .brand-family-card--b5 .brand-family-icon {
  background: rgba(0, 102, 221, 0.18);
}

[data-theme="dark"] .brand-family-card--np .brand-family-icon {
  background: rgba(0, 170, 102, 0.18);
}

[data-theme="dark"] .brand-family-card--nps .brand-family-icon {
  background: rgba(119, 68, 221, 0.18);
}

/* Brand family pricing pills — boost on dark */
[data-theme="dark"] .brand-family-card--b5 .brand-family-pricing {
  background: rgba(0, 102, 221, 0.15);
}

[data-theme="dark"] .brand-family-card--np .brand-family-pricing {
  background: rgba(0, 170, 102, 0.15);
}

[data-theme="dark"] .brand-family-card--nps .brand-family-pricing {
  background: rgba(119, 68, 221, 0.15);
}

/* Brand family "You Are Here" badge stays bright */
[data-theme="dark"] .brand-family-badge {
  color: #FFFFFF;
}

/* Brand family connecting line — dimmer on dark */
[data-theme="dark"] .brand-family-grid::before {
  opacity: 0.3;
}


/* ============================================================
   SCROLLBAR — Dark adaptation
   ============================================================ */

html[data-theme="dark"]::-webkit-scrollbar-track,
[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #222738;
}

html[data-theme="dark"]::-webkit-scrollbar-thumb,
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"]::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.22);
}


/* ============================================================
   SELECTION — Dark adaptation
   ============================================================ */

[data-theme="dark"] ::selection {
  background-color: rgba(0, 102, 221, 0.30);
  color: #e8e8ea;
}


/* ============================================================
   THEME TOGGLE BUTTON
   Sun/moon icon button with smooth rotation transitions.
   ============================================================ */

.theme-toggle {
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-400);
  transition: color var(--transition-fast),
              border-color var(--transition-fast),
              background var(--transition-fast);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.theme-toggle:hover {
  border-color: var(--color-blue);
  color: var(--color-blue);
  background: rgba(0, 102, 221, 0.06);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}

/* Icons — stacked with animated swap */
.theme-toggle svg {
  width: 18px;
  height: 18px;
  position: absolute;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.25s ease;
}

/* Light mode: moon visible (click → dark), sun hidden */
.theme-toggle .icon-sun {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}

.theme-toggle .icon-moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* Dark mode: sun visible (click → light), moon hidden */
[data-theme="dark"] .theme-toggle .icon-sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

[data-theme="dark"] .theme-toggle .icon-moon {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}