/* Apply light heading colors only when user prefers dark mode */
@media (prefers-color-scheme: dark) {
  .section-title,
  .page-title,
  .section-header h2,
  .section-header .section-title {
    color: #f8fafc !important;
  }

  .section-subtitle,
  .page-subtitle {
    color: #cbd5e1 !important;
  }

  /* Keep hero buttons visible in dark mode (hero may be light or dark) */
  .hero .btn-secondary {
    color: #f8fafc !important;
    border-color: rgba(255,255,255,0.16) !important;
  }

  /* Ensure other text uses light tones in dark mode */
  .hero .hero-title {
    /* allow page-level hero rules to decide hero title color */
  }
}

/* Ensure headings are high-contrast in light or unspecified color-scheme */
@media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
  .hero .hero-title,
  .hero .hero-subtitle,
  .section-title,
  .page-title,
  .page-hero .page-title,
  .page-hero .page-subtitle {
    color: #0f1419 !important;
    opacity: 1 !important;
    text-shadow: none !important;
  }

  .hero .hero-badge,
  .page-hero .hero-badge {
    color: var(--primary) !important;
    background: var(--primary-light) !important;
  }
}

/* Force page-hero sections to stay readable even in dark mode */
.page-hero {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  color: #0f1419 !important;
}

.page-hero .page-title,
.page-hero .page-subtitle {
  color: #0f1419 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}