/* Dark theme — InterSitios-like page chrome; light remains default via tokens */

html[data-theme="dark"] {
  color-scheme: dark;
  --page-bg: #0b1220;
  --navy: #e8eef7;
  --navy-mark: #f3f6fa;
  --ink: #f8fafc;
  --body: #a8b3c4;
  --border: #2a3548;
  --surface: #121a28;
  --surface-2: #161f2f;
  --blue-wash: #3d46fd33;
  --blue-lighter-3: #1c2440;
  /* Brand --blue / --blue-deep stay for fills; text accents must clear AA on dark surfaces */
  --text-accent: #a8b0ff; /* ≥8:1 on --page-bg / cards */
  --text-accent-hover: #c4c8ff;
  --icon-accent: #8f94fe; /* ≥6:1; also meets AA as small text */
  --faq-icon-muted: #8b93a3;
  --faq-shadow: 0 0 1px rgba(0, 0, 0, 0.35), 0 8px 40px rgba(0, 0, 0, 0.35);
  --faq-border: 1px solid #2a3548;
  --hero-title-gradient: linear-gradient(90deg, #e8eef7, var(--blue-light), var(--blue), #e8eef7);
  --warn-wash: #2a1a12;
  --warn-border: #c2410c;
  --card-bg: #141c2a;
  --elevated: #1a2436;
}

html[data-theme="dark"] body {
  background: var(--page-bg);
  color: var(--body);
}

html[data-theme="dark"] .site-masthead {
  background: color-mix(in srgb, var(--page-bg) 88%, transparent);
  border-color: color-mix(in srgb, var(--border) 90%, transparent);
}

html[data-theme="dark"] header {
  background: transparent;
  border-color: color-mix(in srgb, var(--border) 90%, transparent);
}

html[data-theme="dark"] header::before {
  background: color-mix(in srgb, var(--page-bg) 88%, transparent);
}

html[data-theme="dark"] .site-toolbar {
  background: color-mix(in srgb, var(--page-bg) 94%, #000);
  border-bottom-color: var(--border);
  color: #94a3b8;
}

/* Heroes + default main bands track page bg (not leftover --white) */
html[data-theme="dark"] main > section[aria-labelledby="hero-heading"],
html[data-theme="dark"] main > section:not([data-tone]):not(.hero-page):not(.hero-service) {
  background: var(--page-bg);
}

html[data-theme="dark"] main > section.hero-page:not(.hero-page--signal) {
  background: linear-gradient(180deg, #101826, var(--page-bg));
}

/* Signal hero keeps its intentional blue field in both themes */
html[data-theme="dark"] main > section.hero-page--signal {
  background: var(--signal-blue-dark, var(--navy));
  color: #fff;
}
html[data-theme="dark"] main > section.hero-page--signal h1,
html[data-theme="dark"] main > section.hero-page--signal .hero-page__lead {
  color: #fff;
}

html[data-theme="dark"] main > section.hero-service {
  background:
    radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--blue) 16%, transparent), transparent 55%),
    linear-gradient(180deg, #101826, var(--page-bg));
}

html[data-theme="dark"] main > section[data-tone="muted"] {
  background: var(--surface);
}

html[data-theme="dark"] main > section[data-tone="wash"],
html[data-theme="dark"] main > section[data-tone="surface"] {
  background: var(--surface);
}

html[data-theme="dark"] main > section[data-tone="partners"] {
  background: var(--page-bg);
}

/* Partner marks: light silhouettes on dark (PNG + SVG <img>) */
html[data-theme="dark"] main > section[data-tone="partners"] img {
  opacity: 0.72;
  filter: grayscale(1) invert(1) brightness(1.08);
}
html[data-theme="dark"] main > section[data-tone="partners"] img:hover {
  opacity: 1;
  filter: grayscale(1) invert(1) brightness(1.22);
}

html[data-theme="dark"] main section article,
html[data-theme="dark"] .ada-panel,
html[data-theme="dark"] .pay-panel,
html[data-theme="dark"] .checkout-form,
html[data-theme="dark"] .response-times,
html[data-theme="dark"] #integration .overcome,
html[data-theme="dark"] .inquiry-card,
html[data-theme="dark"] .stripe-panel,
html[data-theme="dark"] footer .a11y {
  background: var(--card-bg);
  border-color: var(--border);
  color: var(--body);
}

html[data-theme="dark"] .checkout-form .pay-panel {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--blue) 14%, var(--card-bg)),
    var(--card-bg)
  );
  border-color: color-mix(in srgb, var(--blue) 28%, var(--border));
}

html[data-theme="dark"] .checkout-form .pay-panel-price,
html[data-theme="dark"] .checkout-form .pay-toc,
html[data-theme="dark"] .checkout-form label {
  color: var(--ink);
}

html[data-theme="dark"] .checkout-form .pay-panel-secure {
  color: color-mix(in srgb, var(--body) 72%, transparent);
}

html[data-theme="dark"] .checkout-form .pay-toc a {
  color: var(--text-accent);
}

html[data-theme="dark"] .checkout-form .pay-panel-stripe-mark {
  filter: brightness(1.12);
}

/* Home ADA callout — nested rule box was still white while --navy text became light */
html[data-theme="dark"] #ada .split-copy h2,
html[data-theme="dark"] #ada .split-copy .lead,
html[data-theme="dark"] #ada .split-copy .lead strong {
  color: var(--ink);
}
html[data-theme="dark"] #ada .split-copy a.ext {
  color: var(--text-accent);
}
html[data-theme="dark"] #ada .ada-panel {
  background: var(--card-bg);
  border-color: color-mix(in srgb, var(--blue) 28%, var(--border));
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  color: var(--body);
}
html[data-theme="dark"] #ada .ada-rule {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--blue) 16%, var(--surface-2)),
    var(--surface-2)
  );
  border-color: color-mix(in srgb, var(--blue) 32%, var(--border));
}
html[data-theme="dark"] #ada .ada-rule-label {
  color: var(--text-accent);
}
html[data-theme="dark"] #ada .ada-rule-meta {
  color: var(--ink);
}
html[data-theme="dark"] #ada .ada-date {
  background: var(--elevated);
  border-color: var(--border);
}
html[data-theme="dark"] #ada .ada-date-featured {
  background: var(--warn-wash);
  border-color: var(--warn-border);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn-border) 40%, transparent);
}
html[data-theme="dark"] #ada .ada-date-label,
html[data-theme="dark"] #ada .ada-date strong {
  color: #fdba74;
}
html[data-theme="dark"] #ada .ada-rule-note,
html[data-theme="dark"] #ada .ada-rule-disclaimer {
  color: var(--body);
}
html[data-theme="dark"] #ada .ada-rule-link a.ext {
  color: var(--text-accent);
}
html[data-theme="dark"] #ada .points li {
  color: var(--ink);
}
html[data-theme="dark"] #ada .ada-more {
  border-top-color: var(--border);
}
html[data-theme="dark"] #ada .ada-more a {
  color: var(--text-accent);
}
html[data-theme="dark"] #ada .ada-stamp {
  mix-blend-mode: normal;
  opacity: 0.95;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
}

html[data-theme="dark"] #faq details.faq-item-boxed,
html[data-theme="dark"] #faq details.faq-item-boxed[open] {
  background: var(--elevated);
  outline-color: var(--border);
  border-color: var(--border);
  box-shadow: var(--faq-shadow);
}

html[data-theme="dark"] #faq details summary {
  color: var(--ink);
}

html[data-theme="dark"] footer {
  background: #080d16;
  color: var(--body);
  border-top-color: var(--border);
}

html[data-theme="dark"] footer .social a,
html[data-theme="dark"] footer .a11y-strip,
html[data-theme="dark"] .footer-social a {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--ink);
}

html[data-theme="dark"] header nav.nav-mobile {
  background: var(--page-bg);
}

html[data-theme="dark"] header button[aria-controls="mobile-nav"] {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--border);
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--border);
}

/* Filled buttons: do NOT use --ink as fill in dark (--ink is light text) */
html[data-theme="dark"] a.button,
html[data-theme="dark"] button.button,
html[data-theme="dark"] header nav a.button,
html[data-theme="dark"] header nav a.button.nav-contact {
  background: var(--blue);
  color: #fff;
  border-color: transparent;
}

html[data-theme="dark"] a.button:hover,
html[data-theme="dark"] button.button:hover,
html[data-theme="dark"] a.button:focus-visible,
html[data-theme="dark"] button.button:focus-visible,
html[data-theme="dark"] header nav a.button:hover,
html[data-theme="dark"] header nav a.button:focus-visible,
html[data-theme="dark"] header nav a.button.nav-contact:hover,
html[data-theme="dark"] header nav a.button.nav-contact:focus-visible,
html[data-theme="dark"] header nav a.button.nav-contact.is-active,
html[data-theme="dark"] header nav a.button.nav-contact[aria-current] {
  background: var(--blue-deep);
  color: #fff;
  border-color: var(--blue-light);
}

html[data-theme="dark"] a.button .nav-contact-label,
html[data-theme="dark"] a.button span:not(.nav-contact-icon),
html[data-theme="dark"] button.button {
  color: inherit;
}

html[data-theme="dark"] button.button.accent,
html[data-theme="dark"] a.button.accent {
  background: var(--blue);
  color: #fff;
}
html[data-theme="dark"] button.button.accent:hover,
html[data-theme="dark"] a.button.accent:hover {
  background: var(--blue-deep);
  color: #fff;
}

html[data-theme="dark"] .button.ghost,
html[data-theme="dark"] a.button.ghost,
html[data-theme="dark"] button.button.ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--border);
}

html[data-theme="dark"] .button.ghost:hover,
html[data-theme="dark"] a.button.ghost:hover,
html[data-theme="dark"] button.button.ghost:hover,
html[data-theme="dark"] a.button.ghost:focus-visible,
html[data-theme="dark"] button.button.ghost:focus-visible {
  background: var(--blue-wash);
  color: var(--ink);
  border-color: var(--blue-light);
}

html[data-theme="dark"] button.button:disabled,
html[data-theme="dark"] button.button:disabled:hover,
html[data-theme="dark"] button.button:disabled:focus-visible,
html[data-theme="dark"] button.button.accent:disabled,
html[data-theme="dark"] button.button.accent:disabled:hover,
html[data-theme="dark"] button.button.accent:disabled:focus-visible {
  background: var(--blue);
  color: #fff;
  border-color: transparent;
}

html[data-theme="dark"] button.button.ghost:disabled,
html[data-theme="dark"] button.button.ghost:disabled:hover,
html[data-theme="dark"] button.button.ghost:disabled:focus-visible {
  background: transparent;
  color: var(--ink);
  border-color: var(--border);
}

html[data-theme="dark"] header nav.nav-primary a:hover,
html[data-theme="dark"] header nav.nav-primary a.is-active,
html[data-theme="dark"] header nav.nav-primary a[aria-current],
html[data-theme="dark"] header nav.nav-primary .nav-item-link:hover,
html[data-theme="dark"] header nav.nav-primary .nav-item-link.is-active,
html[data-theme="dark"] header nav.nav-primary .nav-item-link[aria-current] {
  background: var(--blue-wash);
}

html[data-theme="dark"] .nav-item--has-menu:hover,
html[data-theme="dark"] .nav-item--has-menu:focus-within,
html[data-theme="dark"] .nav-item--has-menu.is-open,
html[data-theme="dark"] .nav-item--has-menu:has(.nav-item-link.is-active),
html[data-theme="dark"] .nav-item--has-menu:has(.nav-item-link[aria-current]) {
  background: var(--blue-wash);
  color: var(--ink);
}

html[data-theme="dark"] .nav-item--has-menu .nav-item-link,
html[data-theme="dark"] .nav-item--has-menu .nav-item-link:hover,
html[data-theme="dark"] .nav-item--has-menu .nav-item-link.is-active,
html[data-theme="dark"] .nav-item--has-menu .nav-item-link[aria-current],
html[data-theme="dark"] .nav-menu-toggle,
html[data-theme="dark"] .nav-menu-toggle:hover,
html[data-theme="dark"] .nav-menu-toggle:focus-visible,
html[data-theme="dark"] .nav-item.is-open .nav-menu-toggle {
  background: transparent;
  color: inherit;
}

html[data-theme="dark"] .nav-dropdown {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .nav-dropdown a {
  color: var(--ink);
}

html[data-theme="dark"] .nav-dropdown a:hover,
html[data-theme="dark"] .nav-dropdown a:focus-visible {
  background: var(--blue-wash);
  color: var(--ink);
}

html[data-theme="dark"] .nav-mobile-group summary {
  color: var(--ink);
}

html[data-theme="dark"] header nav.nav-primary a.nav-cta,
html[data-theme="dark"] header nav.nav-mobile a.nav-cta {
  background: var(--blue);
  color: #fff;
}

html[data-theme="dark"] .editorial-placeholder {
  background:
    linear-gradient(145deg, rgba(61, 70, 253, 0.18) 0%, transparent 55%),
    var(--surface-2);
  border-color: var(--border);
  color: var(--muted);
}
html[data-theme="dark"] .editorial-media__stage {
  background:
    linear-gradient(160deg, rgba(61, 70, 253, 0.18) 0%, transparent 55%),
    var(--surface-2);
  border-color: var(--border);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--white) 8%, transparent) inset,
    0 18px 40px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] .editorial-media__hint {
  background: color-mix(in srgb, #000 72%, transparent);
}

html[data-theme="dark"] .site-alert[data-type="info"] {
  background: #1a2436;
}

html[data-theme="dark"] .site-toolbar-menu,
html[data-theme="dark"] .site-toolbar-lang-menu {
  background: var(--surface);
  border-color: var(--border);
}
html[data-theme="dark"] .site-toolbar-menu a,
html[data-theme="dark"] .site-toolbar-menu button,
html[data-theme="dark"] .site-toolbar-lang-menu button {
  color: var(--ink);
}

html[data-theme="dark"] .field-tip-bubble,
html[data-theme="dark"] .field-hint {
  color: var(--body);
}

html[data-theme="dark"] .site-theme-switch__track {
  background: #334155;
}
html[data-theme="dark"] .site-theme-switch__thumb {
  background: #fff;
  color: var(--blue);
}

html[data-theme="dark"] .hero-service-visual,
html[data-theme="dark"] .hero-service-visual--illustration {
  background: color-mix(in srgb, var(--surface-2) 80%, #000);
}

html[data-theme="dark"] main > section[aria-labelledby="hero-heading"] figure {
  background: var(--surface);
  border-color: var(--border);
}

/* Newsletter panel stays deep navy + white type in both themes */
html[data-theme="dark"] #updates {
  background:
    linear-gradient(135deg, color-mix(in srgb, #0a1220 88%, var(--blue)), #0c1524),
    url("/assets/content/background-04.jpg") center / cover;
  color: #fff;
}
html[data-theme="dark"] #updates h2,
html[data-theme="dark"] #updates p,
html[data-theme="dark"] #updates label,
html[data-theme="dark"] #updates .field-hint {
  color: #fff;
}
html[data-theme="dark"] #updates input {
  background: color-mix(in srgb, #fff 12%, transparent);
  border-color: color-mix(in srgb, #fff 30%, transparent);
  color: #fff;
}
html[data-theme="dark"] #updates input::placeholder {
  color: color-mix(in srgb, #fff 55%, transparent);
}
html[data-theme="dark"] #updates .field-tip-btn {
  color: #fff;
}
html[data-theme="dark"] #updates .field-tip-bubble {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border);
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="dark"] .nav-contact-icon lord-icon {
    animation: none !important;
  }
}

html[data-theme="dark"] .nav-mega {
  background: transparent;
  border: 0;
  box-shadow: none;
}
html[data-theme="dark"] .nav-mega-shell {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .nav-mega-panel--feature {
  background: linear-gradient(160deg, var(--blue-wash) 0%, transparent 72%);
}
html[data-theme="dark"] .nav-mega-eyebrow,
html[data-theme="dark"] .nav-mega-heading,
html[data-theme="dark"] .nav-mega-link-desc {
  color: var(--muted);
}
html[data-theme="dark"] .nav-mega-feature-title,
html[data-theme="dark"] .nav-mega-feature-body,
html[data-theme="dark"] .nav-mega-list a {
  color: var(--ink);
}
html[data-theme="dark"] .nav-mega-feature-cta {
  color: var(--text-accent);
}
html[data-theme="dark"] .nav-mega-list a:hover,
html[data-theme="dark"] .nav-mega-list a:focus-visible,
html[data-theme="dark"] .nav-mega-list a.is-active,
html[data-theme="dark"] .nav-mega-list a[aria-current="page"] {
  background: var(--blue-wash);
  color: var(--ink);
}
html[data-theme="dark"] .a11y-disclaimer {
  background: var(--surface-2);
  border-left-color: var(--border);
  color: var(--muted);
}