body.dark-mode {
    --primary-color: #6E6EFF;
    --secondary-color: #8D8D8D;
    --background-color: #0D0D0D;
    --card-background: #1A1A1A;
    --text-color: #F7F7F7;
    --heading-color: #FFFFFF;
    --border-color: #2A2A2A;
}

/* --- Dark Mode Navbar --- */
body.dark-mode .navbar {
    background: rgba(26, 26, 26, 0.6);
    border-bottom: 1px solid rgba(42, 42, 42, 0.5);
}

body.dark-mode .navbar-brand {
    color: var(--heading-color);
}

body.dark-mode .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* --- Dark Mode Hero --- */
body.dark-mode .hero-section {
    background: linear-gradient(120deg, #0D0D0D 0%, #1A1A1A 100%);
}

/* --- Dark Mode Cards --- */
body.dark-mode .card {
    background: var(--card-background);
    border-color: var(--border-color);
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

body.dark-mode .card .card-title {
    color: var(--heading-color);
}

body.dark-mode .card .card-text {
    color: var(--secondary-color);
}

body.dark-mode .card:hover {
    box-shadow: 0 16px 40px rgba(0,0,0,0.3);
}

/* --- Dark Mode Forms --- */
body.dark-mode #contact .form-control {
    background-color: #1A1A1A;
    border-color: var(--border-color);
    color: var(--text-color);
}

body.dark-mode #contact .form-control::placeholder {
    color: var(--secondary-color);
}

body.dark-mode #contact .form-control:focus {
    background-color: #1A1A1A;
}

body.dark-mode #contact form {
    background-color: var(--card-background);
}

body.dark-mode .bg-light {
    background-color: var(--card-background) !important;
}

/* --- Dark Mode Timeline --- */
body.dark-mode .timeline-item::after {
    background-color: var(--card-background);
    border-color: var(--primary-color);
}

body.dark-mode .timeline-content {
    background-color: var(--card-background);
    border-color: var(--border-color);
}

/* --- Dark Mode Footer --- */
body.dark-mode footer {
    background-color: #0D0D0D;
    border-top: 1px solid var(--border-color);
}

body.dark-mode .text-muted {
    color: var(--secondary-color) !important;
}

/* --- Media Queries --- */
@media (max-width: 768px) {
    body.dark-mode .navbar-nav {
        background-color: var(--card-background);
    }
}