/* Dark mode for landing page (tjar theme) - activated via html[data-theme="dark"] */

html[data-theme="dark"] {
  --tj-primary: #14b8a6;
  --tj-primary-dark: #22c1b0;
  --tj-primary-soft: #143b38;
  --tj-gold: #eab308;
  --tj-gold-dark: #f9d396;
  --tj-ink: #e6edf3;
  --tj-muted: #9aa7b4;
  --tj-bg-soft: #0f1722;
  --tj-card: #17202e;
  --tj-border: #223044;
  --tj-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] body.tjar-landing {
  background: var(--tj-bg-soft);
  color: var(--tj-ink);
}

html[data-theme="dark"] body.tjar-landing .tj-header {
  background: rgba(23, 32, 46, 0.96);
}

html[data-theme="dark"] .tj-btn-ghost,
html[data-theme="dark"] .tj-dropdown,
html[data-theme="dark"] .tj-nav-menu,
html[data-theme="dark"] .tj-hero-badge,
html[data-theme="dark"] .tj-hero-form,
html[data-theme="dark"] .tj-float-card,
html[data-theme="dark"] .tj-trusted,
html[data-theme="dark"] .tj-stat-card,
html[data-theme="dark"] .tj-steps,
html[data-theme="dark"] .tj-step-item,
html[data-theme="dark"] .tj-feature-card,
html[data-theme="dark"] .tj-element,
html[data-theme="dark"] .tj-payments,
html[data-theme="dark"] .tj-pay-chip,
html[data-theme="dark"] .tj-screenshot-card,
html[data-theme="dark"] .tj-plans,
html[data-theme="dark"] .tj-plan-card,
html[data-theme="dark"] .tj-tst-card,
html[data-theme="dark"] .tj-faq,
html[data-theme="dark"] .tj-faq-item,
html[data-theme="dark"] .tj-footer-subscribe {
  background: var(--tj-card);
}

html[data-theme="dark"] .tj-screenshot-card img {
  background: #0f1722;
}

html[data-theme="dark"] .tj-dropdown a:hover,
html[data-theme="dark"] .tj-nav-menu a:hover,
html[data-theme="dark"] .tj-has-dropdown:hover > a {
  background: var(--tj-primary-soft);
}

html[data-theme="dark"] .tj-hero-form input {
  color: var(--tj-ink);
  background: transparent;
}

html[data-theme="dark"] .tj-hero-form input::placeholder {
  color: var(--tj-muted);
}

html[data-theme="dark"] .tj-cta,
html[data-theme="dark"] .tj-discover-cta {
  color: #fff;
}

html[data-theme="dark"] .tj-discover-card,
html[data-theme="dark"] .tj-discover-card h3,
html[data-theme="dark"] .tj-discover-card p {
  color: #fff;
}

html[data-theme="dark"] #larm-scroll-progress {
  background: var(--tj-primary);
}