/* Dark mode refinements (most colours flip via variables in base.css) */

[data-theme="dark"] .hero {
  background:
    radial-gradient(circle at 80% 10%, rgba(212,175,55,0.10), transparent 40%),
    radial-gradient(circle at 10% 80%, rgba(15,118,110,0.18), transparent 45%),
    var(--c-dark-bg);
}
[data-theme="dark"] .nav-brand .brand-text small { color: #94a3b8; }
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea {
  background: var(--c-dark-card);
  border-color: rgba(255,255,255,0.12);
}
[data-theme="dark"] .badge { background: rgba(212,175,55,0.18); color: #f5e6a5; }
[data-theme="dark"] .course-card .thumb,
[data-theme="dark"] .pricing-card.featured {
  box-shadow: 0 18px 40px rgba(0,0,0,0.5);
}
/* Keep course thumb gradients vivid in dark mode */
[data-theme="dark"] .course-card .thumb .arabic { color: rgba(255,255,255,0.92); }
[data-theme="dark"] .course-card .thumb .level { background: rgba(0,0,0,0.5); }
[data-theme="dark"] .pricing-card li::before { background: var(--c-secondary); color: #1c1300; }
[data-theme="dark"] .footer-social a { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .site-nav.is-scrolled { background: color-mix(in srgb, var(--c-dark-bg) 85%, transparent); }
[data-theme="dark"] .mobile-bar { background: var(--c-dark-card); border-top-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .chip { background: var(--c-dark-card); }