/* Dark Mode Styles */
body.dark-mode {
    --text-color: #f3f4f6;
    --text-light: #d1d5db;
    --bg-color: #111827;
    --bg-light: #1f2937;
    --card-bg: #1f2937;
    --border-color: #374151;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

body.dark-mode header {
    background-color: rgba(17, 24, 39, 0.8);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

body.dark-mode header.scrolled {
    background-color: rgba(17, 24, 39, 0.95);
}

body.dark-mode .hero {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
}

body.dark-mode .hero::before {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
}

body.dark-mode .service-card,
body.dark-mode .project-card,
body.dark-mode .project-info,
body.dark-mode .timeline-content,
body.dark-mode .project-item {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

body.dark-mode .form-group input,
body.dark-mode .form-group textarea {
    background-color: #374151;
    border-color: #4b5563;
    color: var(--text-color);
}

body.dark-mode .form-group input:focus,
body.dark-mode .form-group textarea:focus {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
}

body.dark-mode .skill-bar {
    background-color: #374151;
}

body.dark-mode .skill-tag,
body.dark-mode .filter-btn {
    background-color: #374151;
    color: var(--text-light);
    border-color: var(--border-color);
}

body.dark-mode .filter-btn.active,
body.dark-mode .filter-btn:hover {
    background: var(--primary-gradient);
    color: white;
    border-color: transparent;
}

body.dark-mode .page-header {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
}

body.dark-mode .page-header::before {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
}

body.dark-mode .theme-toggle button {
    background: var(--bg-light);
    color: var(--text-color);
}

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

body.dark-mode .info-item strong {
    color: var(--text-color);
}