/* Landing — Dark mode overrides
   Cross-cutting dark mode rules not specific
   to any single feature file */

/* Dark mode root vars now in dark-mode.css */

[data-theme="dark"] body {
  background: linear-gradient(160deg, #0b1120 0%, #111827 40%, #0f172a 100%);
  color: var(--text-dark-body);
}

/* ---- Header ---- */
[data-theme="dark"] .header {
  border-bottom-color: var(--border-color);
}

[data-theme="dark"] .header-top {
  background: var(--bg-dark-surface);
  border-bottom-color: var(--border-color);
}

[data-theme="dark"] .logo {
  color: var(--text-dark-heading);
}

[data-theme="dark"] .tagline {
  color: var(--text-secondary);
}

[data-theme="dark"] .badge {
  background: var(--bg-dark-elevated);
  color: var(--text-dark-body);
  border-color: var(--border-color);
}

/* ---- Hero ---- */
[data-theme="dark"] .hero {
  color: var(--text-dark-body);
}

[data-theme="dark"] .hero h2,
[data-theme="dark"] .hero-title {
  color: var(--text-dark-heading);
}

[data-theme="dark"] .hero p,
[data-theme="dark"] .hero-description {
  color: var(--text-secondary);
}

[data-theme="dark"] .hero-badge {
  background: var(--bg-dark-elevated);
  color: var(--text-dark-body);
}

[data-theme="dark"] .hero-stats {
  color: var(--text-dark-body);
}

[data-theme="dark"] .stat-number {
  color: var(--text-dark-heading);
}

[data-theme="dark"] .stat-label {
  color: var(--text-secondary);
}

[data-theme="dark"] .hero-guarantee {
  color: var(--text-secondary);
}

[data-theme="dark"] .hero-login-hint a,
[data-theme="dark"] .story-business,
[data-theme="dark"] .amount,
[data-theme="dark"] .option-price,
[data-theme="dark"] .payment-access-price .amount,
[data-theme="dark"] .premium-price .amount,
[data-theme="dark"] .logo-red {
  color: #fca5a5;
  -webkit-text-fill-color: #fca5a5;
}

[data-theme="dark"] .highlight {
  background: linear-gradient(135deg, #fca5a5 0%, #f87171 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="dark"] .story-card .story-business {
  color: #fca5a5;
  -webkit-text-fill-color: #fca5a5;
}

/* ---- Phone Mockup ---- */
[data-theme="dark"] .phone-mockup {
  border-color: var(--bg-dark-elevated);
  box-shadow: var(--shadow-xl);
}

[data-theme="dark"] .phone-screen {
  background: var(--bg-dark-surface);
}

[data-theme="dark"] .store-preview {
  background: var(--bg-dark-surface);
}

[data-theme="dark"] .preview-header {
  background: var(--bg-dark-elevated);
  color: var(--text-dark-heading);
}

[data-theme="dark"] .preview-stats {
  color: var(--text-secondary);
}

[data-theme="dark"] .preview-product {
  background: var(--bg-dark-elevated);
  border-color: var(--border-color);
}

[data-theme="dark"] .preview-info {
  color: var(--text-dark-body);
}

/* ---- Feature Cards ---- */
[data-theme="dark"] .section-header h2 {
  color: var(--text-dark-heading);
}

[data-theme="dark"] .section-header p {
  color: var(--text-secondary);
}

[data-theme="dark"] .feature-card {
  background: var(--bg-dark-surface);
  border-color: var(--border-color);
  box-shadow: var(--shadow-md);
}

[data-theme="dark"] .feature-card:hover {
  border-color: var(--primary-border-hover);
}

[data-theme="dark"] .feature-card h3 {
  color: var(--text-dark-heading);
}

[data-theme="dark"] .feature-card p {
  color: var(--text-secondary);
}

/* ---- Pricing ---- */
[data-theme="dark"] .pricing-card {
  background: var(--bg-dark-surface);
  border-color: var(--border-color);
  box-shadow: var(--shadow-md);
}

[data-theme="dark"] .pricing-card:hover {
  border-color: var(--primary-border-hover);
}

[data-theme="dark"] .pricing-card h3 {
  color: var(--text-dark-heading);
}

[data-theme="dark"] .pricing-card .price {
  color: var(--text-dark-heading);
}

[data-theme="dark"] .pricing-card li {
  color: var(--text-secondary);
}

[data-theme="dark"] .pricing-card.featured {
  background: linear-gradient(135deg, var(--bg-dark-surface) 0%, var(--bg-dark-elevated) 100%);
  border-color: var(--primary-color);
}

/* ---- Premium Cards ---- */
[data-theme="dark"] .premium-card {
  background: var(--bg-dark-surface);
  border-color: var(--border-color);
}

[data-theme="dark"] .premium-card h3 {
  color: var(--text-dark-heading);
}

[data-theme="dark"] .premium-card p {
  color: var(--text-secondary);
}

[data-theme="dark"] .premium-card li {
  color: var(--text-secondary);
}

/* ---- Social Proof ---- */
[data-theme="dark"] .social-proof-item {
  color: var(--text-secondary);
}

/* ---- Domain Card ---- */
[data-theme="dark"] .domain-card {
  background: var(--bg-dark-surface);
  border-color: var(--border-color);
}

[data-theme="dark"] .domain-card h3 {
  color: var(--text-dark-heading);
}

[data-theme="dark"] .domain-card p {
  color: var(--text-secondary);
}

/* ---- CTA Section ---- */
[data-theme="dark"] .cta-section h2 {
  color: var(--text-dark-heading);
}

[data-theme="dark"] .cta-section p {
  color: var(--text-secondary);
}

/* ---- Footer ---- */
[data-theme="dark"] .footer {
  background: var(--bg-dark-surface);
  border-top-color: var(--border-color);
  color: var(--text-secondary);
}

[data-theme="dark"] .footer h4 {
  color: var(--text-dark-heading);
}

[data-theme="dark"] .footer a {
  color: var(--text-secondary);
}

[data-theme="dark"] .footer a:hover {
  color: var(--primary-color);
}

[data-theme="dark"] .footer-bottom {
  border-top-color: var(--border-color);
  color: var(--text-muted);
}

/* ---- Modals ---- */
[data-theme="dark"] .modal-content {
  background: var(--bg-dark-surface);
  border-color: var(--border-color);
}

[data-theme="dark"] .modal-content h2,
[data-theme="dark"] .modal-content h3 {
  color: var(--text-dark-heading);
}

[data-theme="dark"] .modal-content p {
  color: var(--text-secondary);
}

/* ---- Forms (landing) ---- */
[data-theme="dark"] .form-group label {
  color: var(--text-dark-body);
}

/* Dark button overrides — see css/components/buttons.css */