/* ---------- Dark Theme Variables ---------- */
:root {
  /* Dark theme colors */
  --dark-bg-primary: #0f172a;
  --dark-bg-secondary: #1e293b;
  --dark-bg-tertiary: #334155;
  --dark-surface: #1e293b;
  --dark-surface-elevated: #334155;
  --dark-text-primary: #f8fafc;
  --dark-text-secondary: #cbd5e1;
  --dark-text-muted: #94a3b8;
  --dark-border: #334155;
  --dark-border-light: #475569;

  /* Dark theme accent colors */
  --dark-primary: #3b82f6;
  --dark-primary-hover: #2563eb;
  --dark-success: #22c55e;
  --dark-success-hover: #16a34a;
  --dark-warning: #f59e0b;
  --dark-danger: #ef4444;

  /* Dark theme gradients */
  --dark-gradient-primary: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  --dark-gradient-accent: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  --dark-gradient-success: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);

  /* Dark theme shadows */
  --dark-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --dark-shadow-md:
    0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --dark-shadow-lg:
    0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4);
}

/* ---------- Dark Theme Styles ---------- */
[data-theme='dark'] {
  color-scheme: dark;
}

[data-theme='dark'] body {
  background-color: var(--dark-bg-primary);
  color: var(--dark-text-primary);
}

/* ---------- Dark Header ---------- */
[data-theme='dark'] header {
  background: var(--dark-bg-secondary);
  border-bottom: 1px solid var(--dark-border);
}

[data-theme='dark'] .brand,
[data-theme='dark'] .brand:visited {
  color: var(--dark-text-primary);
}

[data-theme='dark'] .brand:hover {
  color: #ffffff;
}

[data-theme='dark'] header h2 {
  color: var(--dark-text-secondary);
}

/* ---------- Dark Hero Section ---------- */
[data-theme='dark'] .hero-section {
  background: var(--dark-gradient-primary);
  border: 1px solid var(--dark-border);
}

[data-theme='dark'] .hero-headline {
  color: var(--dark-text-primary);
}

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

/* ---------- Dark Live Insights Banner ---------- */
[data-theme='dark'] .live-insights-banner {
  background: var(--dark-gradient-success);
  border: 1px solid var(--dark-success);
}

[data-theme='dark'] .live-indicator {
  background: rgba(255, 255, 255, 0.15);
}

/* ---------- Dark Social Proof ---------- */
[data-theme='dark'] .social-proof-inline {
  background: var(--dark-surface);
  border: 1px solid var(--dark-border);
}

[data-theme='dark'] .proof-number {
  color: var(--dark-primary);
}

[data-theme='dark'] .proof-label {
  color: var(--dark-text-muted);
}

/* ---------- Dark Forms ---------- */
[data-theme='dark'] .email-input {
  background: var(--dark-surface);
  border-color: var(--dark-border);
  color: var(--dark-text-primary);
}

[data-theme='dark'] .email-input::placeholder {
  color: var(--dark-text-muted);
}

[data-theme='dark'] .email-input:focus {
  border-color: var(--dark-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

[data-theme='dark'] .email-input:disabled {
  background-color: var(--dark-bg-tertiary);
  color: var(--dark-text-muted);
}

[data-theme='dark'] .cta-button {
  background: var(--dark-gradient-accent);
  border: 1px solid var(--dark-primary);
}

[data-theme='dark'] .cta-button:hover {
  background: var(--dark-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--dark-shadow-md);
}

[data-theme='dark'] .micro-proof,
[data-theme='dark'] .cta-micro-proof {
  color: var(--dark-text-muted);
}

/* ---------- Dark Market Pulse Section ---------- */
[data-theme='dark'] .market-pulse-section {
  background: var(--dark-surface);
  border: 1px solid var(--dark-border);
  border-left: 4px solid var(--dark-primary);
}

[data-theme='dark'] .market-pulse-section h3 {
  color: var(--dark-text-primary);
}

[data-theme='dark'] .pulse-card {
  background: var(--dark-surface-elevated);
  border: 1px solid var(--dark-border-light);
  box-shadow: var(--dark-shadow-md);
}

[data-theme='dark'] .pulse-card:hover {
  box-shadow: var(--dark-shadow-lg);
}

[data-theme='dark'] .pulse-card h4 {
  color: var(--dark-text-primary);
}

[data-theme='dark'] .pulse-time {
  color: var(--dark-text-muted);
}

[data-theme='dark'] .pulse-analysis {
  color: var(--dark-text-secondary);
}

[data-theme='dark'] .pulse-analysis strong {
  color: var(--dark-text-primary);
}

[data-theme='dark'] .affected-sectors,
[data-theme='dark'] .key-movers,
[data-theme='dark'] .ai-confidence {
  color: var(--dark-text-muted);
}

[data-theme='dark'] .action-signal {
  color: var(--dark-primary);
}

/* ---------- Dark Market Preview ---------- */
[data-theme='dark'] .preview-card {
  background: var(--dark-surface);
  border: 1px solid var(--dark-border);
  box-shadow: var(--dark-shadow-sm);
}

[data-theme='dark'] .preview-card:hover {
  box-shadow: var(--dark-shadow-md);
}

[data-theme='dark'] .headline-example {
  background: var(--dark-bg-tertiary);
  color: var(--dark-text-secondary);
}

[data-theme='dark'] .impact-analysis p {
  color: var(--dark-text-secondary);
}

/* ---------- Dark Features Section ---------- */
[data-theme='dark'] .features-section h3 {
  color: var(--dark-text-primary);
}

[data-theme='dark'] .feature-card {
  background: var(--dark-surface);
  border: 1px solid var(--dark-border);
}

[data-theme='dark'] .feature-card::before {
  background: var(--dark-gradient-accent);
}

[data-theme='dark'] .feature-card:hover {
  box-shadow: var(--dark-shadow-lg);
}

[data-theme='dark'] .feature-card h4 {
  color: var(--dark-text-primary);
}

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

[data-theme='dark'] .feature-stats .stat {
  background: var(--dark-bg-tertiary);
  color: var(--dark-text-secondary);
}

/* ---------- Dark Testimonials Section ---------- */
[data-theme='dark'] .testimonials-section {
  background: var(--dark-gradient-primary);
  border: 1px solid var(--dark-border);
}

[data-theme='dark'] .testimonials-section h3 {
  color: var(--dark-text-primary);
}

[data-theme='dark'] .testimonial-card {
  background: var(--dark-surface);
  border: 1px solid var(--dark-border);
  border-left: 4px solid var(--dark-success);
  box-shadow: var(--dark-shadow-md);
}

[data-theme='dark'] .testimonial-card:hover {
  box-shadow: var(--dark-shadow-lg);
}

[data-theme='dark'] .user-avatar {
  background: var(--dark-bg-tertiary);
}

[data-theme='dark'] .user-details h4 {
  color: var(--dark-text-primary);
}

[data-theme='dark'] .user-title {
  color: var(--dark-text-muted);
}

[data-theme='dark'] .testimonial-card blockquote {
  color: var(--dark-text-secondary);
}

[data-theme='dark'] .testimonial-footer {
  border-top: 1px solid var(--dark-border);
}

[data-theme='dark'] .case-study {
  color: var(--dark-primary);
}

[data-theme='dark'] .testimonials-stats {
  background: var(--dark-surface);
  border: 1px solid var(--dark-border);
  box-shadow: var(--dark-shadow-sm);
}

[data-theme='dark'] .testimonials-stats .stat-number {
  color: var(--dark-primary);
}

[data-theme='dark'] .testimonials-stats .stat-label {
  color: var(--dark-text-muted);
}

/* ---------- Dark Trending Section ---------- */
[data-theme='dark'] .trending-section {
  background: var(--dark-surface);
  border: 1px solid var(--dark-border);
}

[data-theme='dark'] .trending-item {
  background: var(--dark-surface-elevated);
  border: 1px solid var(--dark-border-light);
}

[data-theme='dark'] .trending-item p {
  color: var(--dark-text-secondary);
}

/* Trend tags in dark theme */
[data-theme='dark'] .trend-tag.fed {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}

[data-theme='dark'] .trend-tag.ai {
  background: rgba(139, 92, 246, 0.2);
  color: #c4b5fd;
}

[data-theme='dark'] .trend-tag.energy {
  background: rgba(245, 158, 11, 0.2);
  color: #fcd34d;
}

[data-theme='dark'] .trend-tag.crypto {
  background: rgba(234, 88, 12, 0.2);
  color: #fdba74;
}

[data-theme='dark'] .trend-tag.earnings {
  background: rgba(34, 197, 94, 0.2);
  color: #86efac;
}

[data-theme='dark'] .trend-tag.china {
  background: rgba(220, 38, 38, 0.2);
  color: #fca5a5;
}

/* ---------- Dark Social Proof Section ---------- */
[data-theme='dark'] .social-proof {
  background: var(--dark-gradient-accent);
  border: 1px solid var(--dark-primary);
}

[data-theme='dark'] .social-proof h3 {
  color: white;
}

/* ---------- Dark FAQ Section ---------- */
[data-theme='dark'] .faq-section details {
  background: var(--dark-surface);
  border: 1px solid var(--dark-border);
}

[data-theme='dark'] .faq-section summary {
  background: var(--dark-bg-tertiary);
  color: var(--dark-text-primary);
  border-bottom: 1px solid var(--dark-border);
}

[data-theme='dark'] .faq-section summary:hover {
  background: var(--dark-surface-elevated);
}

[data-theme='dark'] .faq-section details[open] summary {
  background: var(--dark-primary);
  color: white;
}

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

/* ---------- Dark Ad Slots ---------- */
[data-theme='dark'] .ad-slot {
  background: var(--dark-surface);
  border: 1px solid var(--dark-border);
}

[data-theme='dark'] .sidebar-ad {
  background: var(--dark-surface);
  border: 1px solid var(--dark-border);
  box-shadow: var(--dark-shadow-md);
}

/* ---------- Dark Footer ---------- */
[data-theme='dark'] footer {
  background: var(--dark-bg-primary);
  border-top: 1px solid var(--dark-border);
}

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

[data-theme='dark'] .footer-features {
  color: var(--dark-text-muted);
}

[data-theme='dark'] .footer-social-proof {
  color: var(--dark-text-muted);
}

[data-theme='dark'] .footer-social-proof strong {
  color: var(--dark-success);
}

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

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

/* ---------- Dark Media Mentions ---------- */
[data-theme='dark'] .media-mentions h4 {
  color: var(--dark-text-muted);
}

[data-theme='dark'] .mention-item {
  background: var(--dark-surface);
  border: 1px solid var(--dark-border);
}

[data-theme='dark'] .mention-source {
  color: var(--dark-primary);
}

[data-theme='dark'] .mention-quote {
  color: var(--dark-text-muted);
}

/* ---------- Dark Trust Indicators ---------- */
[data-theme='dark'] .trust-item {
  background: rgba(51, 65, 85, 0.3);
}

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

/* ---------- Dark CTA Enhancements ---------- */
[data-theme='dark'] .urgency-banner {
  background: linear-gradient(135deg, var(--dark-warning) 0%, #d97706 100%);
  border: 1px solid var(--dark-warning);
}

/* ---------- Dark Secondary CTA ---------- */
[data-theme='dark'] .secondary-cta {
  background: var(--dark-gradient-primary);
  border: 1px solid var(--dark-border);
}

[data-theme='dark'] .secondary-cta h3 {
  color: var(--dark-text-primary);
}

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

[data-theme='dark'] .waitlist-form-secondary .email-input {
  background: var(--dark-surface);
  border: 1px solid var(--dark-border);
  color: var(--dark-text-primary);
}

[data-theme='dark'] .waitlist-form-secondary .cta-button {
  background: var(--dark-gradient-success);
  border: 1px solid var(--dark-success);
}

[data-theme='dark'] .waitlist-form-secondary .cta-button:hover {
  background: var(--dark-success-hover);
}

/* ---------- Dark Form Status Messages ---------- */
[data-theme='dark'] .message-container.success .message-content {
  background-color: rgba(34, 197, 94, 0.2);
  color: var(--dark-success);
  border: 1px solid var(--dark-success);
}

[data-theme='dark'] .message-container.error .message-content {
  background-color: rgba(239, 68, 68, 0.2);
  color: var(--dark-danger);
  border: 1px solid var(--dark-danger);
}

[data-theme='dark'] .message-container.info .message-content {
  background-color: rgba(59, 130, 246, 0.2);
  color: var(--dark-primary);
  border: 1px solid var(--dark-primary);
}

[data-theme='dark'] .form-status.success {
  background-color: rgba(34, 197, 94, 0.2);
  color: var(--dark-success);
  border: 1px solid var(--dark-success);
}

[data-theme='dark'] .form-status.error {
  background-color: rgba(239, 68, 68, 0.2);
  color: var(--dark-danger);
  border: 1px solid var(--dark-danger);
}

[data-theme='dark'] .form-status.info {
  background-color: rgba(59, 130, 246, 0.2);
  color: var(--dark-primary);
  border: 1px solid var(--dark-primary);
}

/* ---------- Dark Focus States ---------- */
[data-theme='dark'] a:focus-visible,
[data-theme='dark'] button:focus-visible,
[data-theme='dark'] input:focus-visible {
  outline: 3px solid var(--dark-primary);
  outline-offset: 2px;
}

[data-theme='dark'] .brand:focus-visible {
  outline: 3px solid var(--dark-primary);
  outline-offset: 2px;
}

/* ---------- Dark Scrollbar (Webkit) ---------- */
[data-theme='dark'] ::-webkit-scrollbar {
  width: 8px;
}

[data-theme='dark'] ::-webkit-scrollbar-track {
  background: var(--dark-bg-primary);
}

[data-theme='dark'] ::-webkit-scrollbar-thumb {
  background: var(--dark-border-light);
  border-radius: 4px;
}

[data-theme='dark'] ::-webkit-scrollbar-thumb:hover {
  background: var(--dark-text-muted);
}

/* ---------- Dark Theme Typography Adjustments ---------- */
[data-theme='dark'] h1,
[data-theme='dark'] h2,
[data-theme='dark'] h3,
[data-theme='dark'] h4 {
  color: var(--dark-text-primary);
}

[data-theme='dark'] p {
  color: var(--dark-text-secondary);
}

/* ---------- Dark Theme Selection ---------- */
[data-theme='dark'] ::selection {
  background: rgba(59, 130, 246, 0.3);
  color: var(--dark-text-primary);
}

/* ---------- Dark Theme Animations ---------- */
[data-theme='dark'] .live-insights-banner {
  animation: dark-pulse-glow 2s infinite alternate;
}

@keyframes dark-pulse-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  }

  100% {
    box-shadow: 0 0 20px 5px rgba(34, 197, 94, 0.2);
  }
}

/* ---------- Dark Theme Transitions ---------- */
[data-theme='dark'] * {
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
}

/* ---------- Dark Theme Print Styles ---------- */
@media print {
  [data-theme='dark'] {
    background: white !important;
    color: black !important;
  }

  [data-theme='dark'] * {
    background: white !important;
    color: black !important;
    border-color: black !important;
  }
}