/* Wonda AI • browser-synchronised theme polish (1.1)
 * Loaded AFTER the guest / console / page-specific CSS. No alterations to
 * account or chatbot data, gateway logic, or tenant theme preferences.
 */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] {
  color-scheme: dark;
  --card: #111d2c;
  --surface: #111d2c;
  --surface-2: #19283b;
  --border: rgba(205,221,242,.18);
  --text: #e7edf5;
  --muted: #aebdd0;
}
/* The original --primary token becomes pale in dark mode for headings,
   which made primary buttons PALE with white text. Explicit surfaces fix it. */
html[data-theme="dark"] .wonda-btn:not(.wonda-btn--accent):not(.wonda-btn--secondary) {
  background: #33465e;
  color: #ffffff;
  border-color: rgba(225,235,245,.14);
}
html[data-theme="dark"] .wonda-btn:not(.wonda-btn--accent):not(.wonda-btn--secondary):hover {
  background: #435a77;
  color: #ffffff;
}
html[data-theme="dark"] .wonda-btn.wonda-btn--primary:not(.wonda-btn--secondary):not(.wonda-btn--accent),
html[data-theme="dark"] .wonda-btn--accent,
html[data-theme="dark"] .wonda-form-submit {
  background: #d00069;
  color: #fff;
  border-color: #d00069;
}
html[data-theme="dark"] .wonda-btn.wonda-btn--primary:not(.wonda-btn--secondary):not(.wonda-btn--accent):hover,
html[data-theme="dark"] .wonda-btn--accent:hover,
html[data-theme="dark"] .wonda-form-submit:hover {
  background: #ac0058;
  border-color: #ac0058;
  color: #fff;
}
html[data-theme="dark"] .wonda-btn--secondary,
html[data-theme="dark"] .wonda-docs__code-actions button,
html[data-theme="dark"] .wonda-bell__btn,
html[data-theme="dark"] .wonda-site-header__menu {
  background: #202f44;
  color: #edf3fb;
  border-color: rgba(225,235,245,.20);
}
html[data-theme="dark"] .wonda-btn--secondary:hover,
html[data-theme="dark"] .wonda-docs__code-actions button:hover,
html[data-theme="dark"] .wonda-bell__btn:hover,
html[data-theme="dark"] .wonda-site-header__menu:hover {
  background: #30445e;
  color: #fff;
  border-color: rgba(225,235,245,.32);
}
html[data-theme="dark"] .wonda-site-header__btn--ghost {
  background: transparent;
  color: #e3ebf7;
  border-color: rgba(225,235,245,.20);
}
html[data-theme="dark"] .wonda-site-header__btn--ghost:hover { background: #24374f; }
html[data-theme="dark"] .wonda-proof,
html[data-theme="dark"] .wonda-example,
html[data-theme="dark"] .wonda-pricing-empty,
html[data-theme="dark"] .wonda-signup-approval {
  background: #122033;
  color: #dbe6f4;
  border-color: rgba(225,235,245,.16);
}
html[data-theme="dark"] .wonda-proof strong,
html[data-theme="dark"] .wonda-example h3,
html[data-theme="dark"] .wonda-pricing-empty h3,
html[data-theme="dark"] .wonda-signup-approval strong { color: #f1f5fa; }
html[data-theme="dark"] .wonda-proof span,
html[data-theme="dark"] .wonda-example p,
html[data-theme="dark"] .wonda-pricing-empty p,
html[data-theme="dark"] .wonda-signup-approval p { color: #bccce0; }
/* Paynow payment dialog is intentionally high-contrast in each browser mode.
   Existing checkout JavaScript/verification remain untouched. */
html[data-theme="dark"] .wai-pay-dialog,
html[data-theme="dark"] .wai-pay-plan,
html[data-theme="dark"] .wai-pay-stats > div {
  background: #111d2c;
  color: #e7edf5;
  border-color: rgba(225,235,245,.20);
}
html[data-theme="dark"] .wai-pay-dialog h2,
html[data-theme="dark"] .wai-pay-plan h3,
html[data-theme="dark"] .wai-pay-price { color: #f8fbff; }
html[data-theme="dark"] .wai-pay-kicker,
html[data-theme="dark"] .wai-pay-plan__label { color: #86e4bb; }
html[data-theme="dark"] .wai-pay-count span { color: #86e4bb; }
html[data-theme="dark"] .wai-pay-count small,
html[data-theme="dark"] .wai-pay-muted { color: #b1c3d9; }
html[data-theme="dark"] .wai-pay-provider,
html[data-theme="dark"] .wai-pay-state {
  background: #123529;
  border-color: #277257;
  color: #baf5d9;
}
html[data-theme="dark"] .wai-pay-progress { background: #33465e; }
html[data-theme="dark"] .wai-pay-form input[type="text"],
html[data-theme="dark"] .wai-pay-form input[type="password"] {
  background: #0b1728;
  border-color: rgba(225,235,245,.25);
  color: #f1f5f9;
}
html[data-theme="dark"] :is(button, a, input, select, textarea):focus-visible {
  outline: 2px solid #ff62b2;
  outline-offset: 2px;
}