/* ===== www theme tokens: light (default) / dark ===== */

html[data-bs-theme="light"],
:root {
  --theme-page: #f5f7fb;
  --theme-surface: #ffffff;
  --theme-surface-muted: #eef2f7;
  --theme-metric: #f8fafc;
  --theme-text: #1e293b;
  --theme-heading: #0f172a;
  --theme-muted: #64748b;
  --theme-secondary: #475569;
  --theme-nav-bg: rgba(255, 255, 255, 0.92);
  --theme-border: rgba(15, 23, 42, 0.08);
  --theme-border-strong: rgba(14, 116, 144, 0.22);
  --theme-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
  --theme-legal: #94a3b8;
  --theme-legal-link: #0c4a6e;
  --theme-legal-link-hover: #082f49;
  --theme-code-bg: #f1f5f9;
  --theme-code: #0c4a6e;
  --theme-principle: linear-gradient(160deg, rgba(12, 74, 110, 0.1), rgba(91, 33, 182, 0.07));
  --theme-hero-badge: rgba(12, 74, 110, 0.08);
  --theme-subnav: rgba(15, 23, 42, 0.72);
  --theme-subnav-sep: rgba(15, 23, 42, 0.28);
  --theme-compare-th: rgba(12, 74, 110, 0.08);
  --theme-toggler: #0f172a;

  --text-body: var(--theme-text);
  --text-secondary: var(--theme-secondary);
  --text-muted-on-dark: var(--theme-muted);
  --nav-link: rgba(15, 23, 42, 0.82);
  --nav-link-active: #0c4a6e;
  --border-subtle: var(--theme-border);
  --border-strong: var(--theme-border-strong);
  --surface-muted: var(--theme-surface-muted);
  --btn-ink: #0a1220;

  /* legacy inverted names used by style.css */
  --dark: var(--theme-page);
  --dark-card: var(--theme-surface);
  --light: var(--theme-heading);
  --gray: var(--theme-muted);
  --gradient-dark: linear-gradient(180deg, #ffffff 0%, #f5f7fb 100%);
  --shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 8px 28px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 18px 48px rgba(14, 116, 144, 0.12);
}

html[data-bs-theme="dark"] {
  --theme-page: #0b1220;
  --theme-surface: #121a2b;
  --theme-surface-muted: #1a2438;
  --theme-metric: #1a2438;
  --theme-text: #e2e8f0;
  --theme-heading: #f8fafc;
  --theme-muted: #c5d0de;
  --theme-secondary: #d0dae8;
  --theme-nav-bg: rgba(11, 18, 32, 0.94);
  --theme-border: rgba(148, 163, 184, 0.22);
  --theme-border-strong: rgba(56, 189, 248, 0.35);
  --theme-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  --theme-legal: #b6c2d4;
  --theme-legal-link: #7dd3fc;
  --theme-legal-link-hover: #bae6fd;
  --theme-code-bg: #1a2438;
  --theme-code: #7dd3fc;
  --theme-principle: linear-gradient(160deg, rgba(14, 116, 144, 0.28), rgba(91, 33, 182, 0.2));
  --theme-hero-badge: rgba(56, 189, 248, 0.14);
  --theme-subnav: rgba(241, 245, 249, 0.88);
  --theme-subnav-sep: rgba(148, 163, 184, 0.45);
  --theme-compare-th: rgba(56, 189, 248, 0.14);
  --theme-toggler: #f1f5f9;
  --primary: #38bdf8;
  --primary-bright: #7dd3fc;

  --text-body: var(--theme-text);
  --text-secondary: var(--theme-secondary);
  --text-muted-on-dark: var(--theme-muted);
  --nav-link: rgba(241, 245, 249, 0.9);
  --nav-link-active: #7dd3fc;
  --border-subtle: var(--theme-border);
  --border-strong: var(--theme-border-strong);
  --surface-muted: var(--theme-surface-muted);
  --btn-ink: #0b1220;

  --dark: var(--theme-page);
  --dark-card: var(--theme-surface);
  --light: var(--theme-heading);
  --gray: var(--theme-muted);
  --gradient-dark: linear-gradient(180deg, #121a2b 0%, #0b1220 100%);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.45);

  color-scheme: dark;
}

html[data-bs-theme="light"] {
  color-scheme: light;
}

/* Bootstrap body sync */
html[data-bs-theme="dark"] body,
body.dark-theme {
  background-color: var(--theme-page);
  color: var(--theme-text);
}

html[data-bs-theme="dark"][data-bs-theme="dark"],
html[data-bs-theme="dark"] body.light-theme,
html[data-bs-theme="dark"] body.dark-theme {
  --bs-body-color: var(--theme-text);
  --bs-body-bg: var(--theme-page);
  --bs-secondary-color: var(--theme-muted);
  --bs-tertiary-color: var(--theme-secondary);
  --bs-heading-color: var(--theme-heading);
  --bs-link-color: #7dd3fc;
  --bs-link-hover-color: #bae6fd;
}

/* Dual logos */
.logo-for-dark {
  display: none !important;
}

html[data-bs-theme="dark"] .logo-for-light {
  display: none !important;
}

html[data-bs-theme="dark"] .logo-for-dark {
  display: block !important;
}

/* Theme toggle — single compact button beside logo */
.theme-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0;
  margin: 0;
  border: 1px solid var(--theme-border-strong);
  border-radius: 999px;
  background: var(--theme-surface-muted);
  color: var(--theme-heading);
  flex-shrink: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(12, 74, 110, 0.18);
  touch-action: manipulation;
  transition: background var(--transition-fast, 0.2s ease), color var(--transition-fast, 0.2s ease), border-color var(--transition-fast, 0.2s ease);
}

.theme-toggle--header {
  margin-left: 0.4rem;
  margin-right: 0;
}

/* Language toggle — sits beside theme toggle */
.lang-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.55rem;
  margin: 0;
  border: 1px solid var(--theme-border-strong);
  border-radius: 999px;
  background: var(--theme-surface-muted);
  color: var(--theme-heading);
  flex-shrink: 0;
  cursor: pointer;
  text-decoration: none !important;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  -webkit-tap-highlight-color: rgba(12, 74, 110, 0.18);
  touch-action: manipulation;
  transition: background var(--transition-fast, 0.2s ease), color var(--transition-fast, 0.2s ease), border-color var(--transition-fast, 0.2s ease);
}

.lang-toggle--header {
  margin-left: 0.35rem;
  margin-right: auto;
}

.lang-toggle:hover,
.lang-toggle:focus-visible {
  color: var(--theme-heading);
  border-color: var(--theme-border-strong);
  outline: none;
  text-decoration: none !important;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  color: var(--theme-heading);
  border-color: var(--theme-border-strong);
  outline: none;
}

.theme-toggle__icon {
  pointer-events: none;
  font-size: 0.85rem;
  line-height: 1;
}

/* Light mode: show moon (tap → dark). Dark mode: show sun (tap → light). */
.theme-toggle__icon--sun {
  display: none;
}

.theme-toggle.is-dark .theme-toggle__icon--moon {
  display: none;
}

.theme-toggle.is-dark .theme-toggle__icon--sun {
  display: inline-block;
}

@media (max-width: 991.98px) {
  /* Keep logo + theme + hamburger on one row; menu is fixed overlay only */
  .header .navbar > .container {
    flex-wrap: nowrap;
    align-items: center;
  }

  .theme-toggle--header {
    margin-left: auto;
    margin-right: 0;
  }

  .lang-toggle--header {
    margin-left: 0.35rem;
    margin-right: 0.35rem;
  }

  .header .navbar-toggler {
    margin-left: 0;
    flex-shrink: 0;
    align-self: center;
  }

  .header {
    overflow: visible;
  }

  .header .navbar,
  .header .navbar > .container {
    overflow: visible;
  }

  .header .navbar-collapse {
    order: unset;
    flex-basis: auto;
  }
}

@media (min-width: 992px) {
  .theme-toggle--header {
    margin-left: 0.75rem;
    margin-right: 0;
  }

  .lang-toggle--header {
    margin-left: 0.4rem;
    margin-right: 0;
  }
}

html[data-bs-theme="dark"] .lang-toggle {
  color: var(--theme-heading);
}

/* Surfaces that were hard-coded for light */
.header {
  background: var(--theme-nav-bg) !important;
  border-bottom-color: var(--theme-border) !important;
}

.footer {
  background: var(--theme-surface) !important;
  border-top-color: var(--theme-border) !important;
}

.hero-visual-card,
.feature-card,
.step-card,
.case-card,
.contact-panel,
.compare-table,
.brand-definition,
.faq-item {
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
}

.principle-card {
  background: var(--theme-principle) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border-strong) !important;
}

.metric-tile {
  background: var(--theme-metric) !important;
  border-color: var(--theme-border) !important;
}

.clients-section {
  background: var(--theme-surface-muted) !important;
  border-top-color: var(--theme-border) !important;
  border-bottom-color: var(--theme-border) !important;
}

.compare-table th {
  background: var(--theme-compare-th) !important;
}

.hero-badge {
  background: var(--theme-hero-badge) !important;
  border-color: var(--theme-border-strong) !important;
}

.feature-title,
.feature-card h3,
.feature-card .h6,
.step-card h3,
.case-card h3,
.principle-card h3,
.compare-table td:first-child,
.hero-title,
.section-title,
.hero-description strong,
.hero-visual-card h3,
.faq-item h2,
.faq-item .h5,
.stat-number,
.stat-item .value,
.footer .logo-text,
.logo-text {
  color: var(--theme-heading) !important;
}

.feature-description,
.feature-card .feature-description,
.feature-card p {
  color: var(--theme-muted) !important;
}

.client-logo {
  color: var(--theme-secondary) !important;
}

html[data-bs-theme="dark"] .client-logo {
  color: var(--theme-heading) !important;
  opacity: 0.92;
}

html[data-bs-theme="dark"] .client-logo:hover {
  background: rgba(56, 189, 248, 0.12);
  opacity: 1;
}

html[data-bs-theme="dark"] .feature-card:hover {
  border-color: var(--theme-border-strong) !important;
  box-shadow: var(--shadow-lg);
}

html[data-bs-theme="dark"] .cta-form .form-control {
  background: var(--theme-surface-muted) !important;
  color: var(--theme-heading) !important;
  border-color: var(--theme-border-strong);
}

html[data-bs-theme="dark"] .footer-heading {
  color: var(--theme-heading) !important;
}

html[data-bs-theme="dark"] .footer-links a,
html[data-bs-theme="dark"] .footer .copyright,
html[data-bs-theme="dark"] .footer .copyright a {
  color: var(--theme-secondary) !important;
}

html[data-bs-theme="dark"] .footer-description {
  color: var(--theme-muted) !important;
}

.navbar-toggler {
  color: var(--theme-toggler) !important;
  border-color: var(--theme-border-strong) !important;
  background: transparent !important;
}

.navbar-toggler:focus,
.navbar-toggler:focus-visible {
  box-shadow: 0 0 0 0.15rem rgba(56, 189, 248, 0.25);
  outline: none;
}

/* Mobile hamburger: keep visible on dark header.
   Bootstrap color-mode + .navbar-light can disagree; pin a light icon and
   never double-invert (that made bars dark-on-dark). */
html[data-bs-theme="dark"] .navbar-toggler-icon {
  filter: none !important;
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28241, 245, 249, 0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  background-image: var(--bs-navbar-toggler-icon-bg);
}

html[data-bs-theme="light"] .navbar-toggler-icon {
  filter: none !important;
}

.site-legal .small,
.site-legal .text-muted {
  color: var(--theme-legal) !important;
}

.site-legal a {
  color: var(--theme-legal-link) !important;
}

.site-legal a:hover,
.site-legal a:focus-visible {
  color: var(--theme-legal-link-hover) !important;
}

.trusted-subnav a {
  color: var(--theme-subnav) !important;
}

.trusted-subnav__sep {
  color: var(--theme-subnav-sep) !important;
}

code {
  color: var(--theme-code) !important;
  background: var(--theme-code-bg) !important;
}

.header .btn-link:hover,
.header .btn-link:focus,
.header .btn-link:active {
  color: var(--nav-link-active) !important;
}

html[data-bs-theme="dark"] .navbar.navbar-light {
  --bs-navbar-color: var(--nav-link);
  --bs-navbar-hover-color: var(--nav-link-active);
  --bs-navbar-active-color: var(--nav-link-active);
  --bs-navbar-brand-color: var(--theme-heading);
  --bs-navbar-brand-hover-color: var(--theme-heading);
  --bs-navbar-toggler-border-color: var(--theme-border);
}

/* Form controls on dark */
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] input.form-control,
html[data-bs-theme="dark"] textarea.form-control,
html[data-bs-theme="dark"] select.form-control {
  background-color: var(--theme-surface-muted);
  color: var(--theme-heading);
  border-color: var(--theme-border-strong);
}

html[data-bs-theme="dark"] .form-control::placeholder {
  color: var(--theme-muted);
  opacity: 0.85;
}

html[data-bs-theme="dark"] .form-control:focus {
  background-color: var(--theme-surface-muted);
  color: var(--theme-heading);
  border-color: #38bdf8;
  box-shadow: 0 0 0 0.2rem rgba(56, 189, 248, 0.2);
}

/* ===== Dark contrast safety net (esp. mobile WebViews) ===== */
html[data-bs-theme="dark"] body {
  background-color: var(--theme-page) !important;
  color: var(--theme-text) !important;
}

html[data-bs-theme="dark"] h1,
html[data-bs-theme="dark"] h2,
html[data-bs-theme="dark"] h3,
html[data-bs-theme="dark"] h4,
html[data-bs-theme="dark"] h5,
html[data-bs-theme="dark"] h6,
html[data-bs-theme="dark"] .h1,
html[data-bs-theme="dark"] .h2,
html[data-bs-theme="dark"] .h3,
html[data-bs-theme="dark"] .h4,
html[data-bs-theme="dark"] .h5,
html[data-bs-theme="dark"] .h6 {
  color: var(--theme-heading) !important;
}

html[data-bs-theme="dark"] p,
html[data-bs-theme="dark"] li,
html[data-bs-theme="dark"] td,
html[data-bs-theme="dark"] th,
html[data-bs-theme="dark"] label,
html[data-bs-theme="dark"] .section-subtitle,
html[data-bs-theme="dark"] .hero-description,
html[data-bs-theme="dark"] .feature-description,
html[data-bs-theme="dark"] .text-muted,
html[data-bs-theme="dark"] .small,
html[data-bs-theme="dark"] .small.text-muted {
  color: var(--theme-muted) !important;
}

html[data-bs-theme="dark"] strong,
html[data-bs-theme="dark"] b,
html[data-bs-theme="dark"] .hero-description strong {
  color: var(--theme-heading) !important;
}

html[data-bs-theme="dark"] a:not(.btn):not(.coop-sticky-bar):not(.nav-link) {
  color: var(--theme-legal-link);
}

html[data-bs-theme="dark"] .navbar-collapse {
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
}

html[data-bs-theme="dark"] .btn-outline {
  color: #7dd3fc !important;
  border-color: #7dd3fc !important;
}

html[data-bs-theme="dark"] .btn-outline:hover,
html[data-bs-theme="dark"] .btn-outline:focus {
  background: rgba(56, 189, 248, 0.16) !important;
  color: #e0f2fe !important;
}

/* Gradient-clipped text often fails on mobile WebViews → solid readable fallback */
html[data-bs-theme="dark"] .gradient-text,
html[data-bs-theme="dark"] .case-card .delta,
html[data-bs-theme="dark"] .stat-number,
html[data-bs-theme="dark"] .stat-item .value {
  background: none !important;
  -webkit-text-fill-color: #7dd3fc !important;
  color: #7dd3fc !important;
}

html[data-bs-theme="dark"] .badge-link {
  color: var(--theme-heading) !important;
}

html[data-bs-theme="dark"] .compare-table td,
html[data-bs-theme="dark"] .compare-table th {
  color: var(--theme-text) !important;
}

html[data-bs-theme="dark"] .compare-table td:first-child,
html[data-bs-theme="dark"] .compare-table th {
  color: var(--theme-heading) !important;
}

html[data-bs-theme="dark"] .theme-toggle {
  color: var(--theme-heading) !important;
  background: var(--theme-surface-muted) !important;
  border-color: var(--theme-border-strong) !important;
}

/* Contact page: direct-contact card must not keep light-only ink on themed surface */
html[data-bs-theme="dark"] .direct-contact-card {
  background: var(--theme-surface) !important;
  border-color: var(--theme-border-strong) !important;
  color: var(--theme-text) !important;
}

html[data-bs-theme="dark"] .direct-contact-card .direct-kicker {
  color: #7dd3fc !important;
}

html[data-bs-theme="dark"] .direct-contact-card .direct-name {
  color: var(--theme-heading) !important;
}

html[data-bs-theme="dark"] .direct-contact-card .direct-role,
html[data-bs-theme="dark"] .direct-contact-card .direct-hint {
  color: var(--theme-muted) !important;
}

html[data-bs-theme="dark"] .direct-contact-card .direct-phone,
html[data-bs-theme="dark"] .direct-contact-card .direct-phone a {
  color: #7dd3fc !important;
}

html[data-bs-theme="dark"] .lead-form .form-label {
  color: var(--theme-muted) !important;
}

html[data-bs-theme="dark"] .lead-result-modal .modal-content {
  background: var(--theme-surface) !important;
  border-color: var(--theme-border-strong) !important;
  color: var(--theme-text) !important;
}

html[data-bs-theme="dark"] .lead-result-modal .lead-result-title {
  color: var(--theme-heading) !important;
}

html[data-bs-theme="dark"] .lead-result-modal .lead-result-text {
  color: var(--theme-muted) !important;
}