/* ========================================
   DARK-MODE.CSS – Dark Theme Overrides
   ======================================== */

[data-theme="dark"] {
    --background: #0F172A;
    --background-secondary: #1E293B;
    --surface: #1E293B;
    --text: #F8FAFC;
    --text-secondary: #CBD5E1;
    --text-muted: #64748B;
    --border: #334155;
    --border-light: #1E293B;
    --border-soft: rgba(248, 250, 252, 0.08);
    --glass-bg: rgba(30, 41, 59, 0.55);
    --glass-bg-strong: rgba(15, 23, 42, 0.72);
    --glass-border: rgba(255, 255, 255, 0.06);
    --shadow: 0 4px 6px -1px rgba(0,0,0,0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.4);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.5);
}

[data-theme="dark"] body::before {
    background-image:
        radial-gradient(ellipse 60% 50% at 12% 8%, rgba(139, 92, 246, 0.12), transparent 60%),
        radial-gradient(ellipse 55% 45% at 90% 12%, rgba(236, 72, 153, 0.09), transparent 60%),
        radial-gradient(ellipse 60% 55% at 50% 95%, rgba(109, 40, 217, 0.10), transparent 60%);
}

[data-theme="dark"] body {
    background: var(--background);
    color: var(--text);
}
[data-theme="dark"] .card:hover {
    border-color: var(--primary-light);
}
[data-theme="dark"] .nav-link {
    color: var(--text-secondary);
}
[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link.active {
    color: var(--text);
    background: rgba(124,58,237,0.15);
}
[data-theme="dark"] .btn-outline {
    color: var(--primary-light);
    border-color: var(--primary-light);
}
[data-theme="dark"] .btn-outline:hover {
    background: var(--primary);
    color: white;
}
[data-theme="dark"] .theme-toggle {
    background: var(--surface);
    border-color: var(--border);
}
[data-theme="dark"] .theme-icon {
    color: var(--text-secondary);
}
[data-theme="dark"] .module-number {
    background: rgba(139, 92, 246, 0.16);
    color: var(--primary-light);
}
[data-theme="dark"] .feature-icon,
[data-theme="dark"] .portfolio-icon {
    background: rgba(139, 92, 246, 0.16);
    color: var(--primary-light);
}
[data-theme="dark"] .project-tag {
    border-color: var(--border-soft);
}
[data-theme="dark"] .step-marker {
    background: var(--background);
}
[data-theme="dark"] .roadmap-step.current .step-marker {
    box-shadow: 0 0 0 5px rgba(139,92,246,0.18);
}