/* 
==============================================
DARK MODE STYLESHEET
==============================================
*/

/* Dark Mode Variables */
body.dark-mode {
    --primary-color: #6d8dfa;
    --primary-color-dark: #5a78e6;
    --secondary-color: #ff8c42;
    --text-color: #e6e6e6;
    --text-color-light: #b3b3b3;
    --bg-color: #121212;
    --bg-color-alt: #1e1e1e;
    --border-color: #333;
    --card-bg: #1e1e1e;
    --card-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    --header-bg: rgba(18, 18, 18, 0.95);
}

/* Dark Mode Specific Styles */
body.dark-mode .logo a {
    color: var(--text-color);
}

body.dark-mode #theme-toggle i {
    color: var(--text-color);
}

body.dark-mode #theme-toggle i.fa-moon {
    display: none;
}

body.dark-mode #theme-toggle i.fa-sun {
    display: inline-block;
}

body.dark-mode .mobile-menu-btn span {
    background-color: var(--text-color);
}

body.dark-mode .service-icon {
    background-color: rgba(109, 141, 250, 0.1);
}

body.dark-mode .contact-item .icon,
body.dark-mode .social-links a {
    background-color: rgba(109, 141, 250, 0.1);
}

body.dark-mode .form-group input,
body.dark-mode .form-group textarea,
body.dark-mode .form-group select {
    background-color: #252525;
    border-color: #333;
}

/* Light Mode Icon (Hidden by Default) */
#theme-toggle i.fa-sun {
    display: none;
}

/* Animation for Theme Toggle */
.theme-transition {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}