/* CRITICAL DARK THEME OVERRIDES - LOADS LAST TO WIN SPECIFICITY */
/* This file forces dark theme readability with maximum CSS specificity */

/* STEP 1: Override CSS custom properties with new values */
:root {
  --color-text: #F8FAFC !important;
  --color-text-light: #CBD5E1 !important;
  --color-bg: #0B1220 !important;
  --color-bg-light: rgba(255,255,255,0.04) !important;
  --td-text: #F8FAFC !important;
  --td-text-muted: #CBD5E1 !important;
  --td-card-bg: rgba(255,255,255,0.04) !important;
  --td-card-border: rgba(255,255,255,0.08) !important;
}

/* STEP 2: Force dark background on body */
html, body {
  background: linear-gradient(180deg, rgba(30,58,138,0.65) 0%, rgba(37,99,235,0.35) 40%, rgba(147,51,234,0.25) 100%), #0B1220 !important;
  color: #F8FAFC !important;
}

/* STEP 3: Force "How It Works" section to be readable with MAXIMUM specificity */
.features h2,
section.features h2,
#features h2,
section[id="features"] h2 {
  color: #F8FAFC !important;
}

.step-card,
.how-it-works-grid .step-card,
section.features .step-card,
#features .step-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

.step-card h3,
.how-it-works-grid .step-card h3,
section.features .step-card h3,
#features .step-card h3 {
  color: #F8FAFC !important;
}

.step-card p,
.how-it-works-grid .step-card p,
section.features .step-card p,
#features .step-card p {
  color: #CBD5E1 !important;
}

/* STEP 4: Force header buttons to be readable */
.site-nav a,
.nav-links a,
.download-btn,
.btn--primary {
  color: #FFFFFF !important;
}

.btn--gradient,
a[style*="background: var(--gradient-gold)"] {
  color: #0F172A !important;
}

/* STEP 5: Force all headings to be readable */
h1, h2, h3, h4, h5, h6 {
  color: #F8FAFC !important;
}

/* STEP 6: Force all paragraph text to be readable */
p, .hero-subtitle {
  color: #CBD5E1 !important;
}

/* STEP 6.1: Make pricing feature text gold for better visibility */
.pricing-card .features-list li {
  color: #FFD700 !important; /* Gold color like website --td-gold-start */
}

/* STEP 7: Beta page section background variations - MUCH more noticeable */
.hero {
  background: transparent !important; /* Uses body gradient */
}

.impact {
  background: rgba(255,255,255,0.12) !important; /* Much lighter - very noticeable */
}

.how {
  background: rgba(255,255,255,0.06) !important; /* Medium variation */
}

.why {
  background: rgba(255,255,255,0.10) !important; /* Strong variation */
}

.social {
  background: rgba(255,255,255,0.08) !important; /* Good contrast */
}

.pricing {
  background: rgba(255,255,255,0.14) !important; /* Very prominent */
}

.faq {
  background: rgba(255,255,255,0.09) !important; /* Strong but not overwhelming */
}

.demo {
  background: rgba(255,255,255,0.04) !important; /* Subtle end */
}