/* Dark Mode Styles */
body.dark-mode {
    background-color: var(--dark-bg-primary);
    color: var(--dark-text-primary);
}

/* Navigation in Dark Mode */
.dark-mode .nav-container {
    background: rgba(18, 18, 18, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--dark-border);
}

/* Hero Section */
.dark-mode .hero-section {
    background-color: var(--dark-bg-primary);
    color: var(--dark-text-primary);
}

.dark-mode .hero-content h1 {
    color: var(--dark-text-primary);
}

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

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

.dark-mode .profile-image {
    border-color: var(--primary-500);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Work Section */
.dark-mode .work-section {
    background-color: var(--dark-bg-primary);
    color: var(--dark-text-primary);
}

.dark-mode .project-card {
    background: var(--dark-bg-secondary);
    border: 1px solid var(--dark-border);
}

.dark-mode .project-card:hover {
    background: var(--dark-bg-elevated);
}

/* About Section */
.dark-mode .about-section {
    background-color: var(--dark-bg-primary);
}

.dark-mode .about-section::after {
    background: linear-gradient(to bottom, var(--dark-bg-primary), transparent);
}

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

.dark-mode .tools-grid {
    background: var(--dark-bg-secondary);
}

/* Contact Section */
.dark-mode .contact-section {
    background-color: var(--dark-bg-primary);
}

.dark-mode .contact-content h2 {
    color: var(--dark-text-primary);
}

.dark-mode .contact-content p {
    color: var(--dark-text-secondary);
}

.dark-mode .logo {
    color: var(--dark-text-primary);
}

.dark-mode .nav-links a {
    color: var(--dark-text-primary);
}

.dark-mode .nav-links a:hover {
    color: var(--primary-500);
}

.dark-mode .nav-links a::after {
    background-color: var(--primary-500);
}

/* Project Page Elements */
.dark-mode .back-link {
    color: var(--dark-text-secondary);
}

.dark-mode .back-link:hover {
    color: var(--primary-500);
}

.dark-mode .project-category {
    color: var(--primary-500);
}

.dark-mode .project-subtitle {
    color: var(--dark-text-secondary);
}

.dark-mode .project-overview p {
    color: var(--dark-text-secondary);
}

/* Project Specifications */
.dark-mode .project-specs {
    background: var(--dark-bg-primary);
    border: none;
}

.dark-mode .spec-item h3 {
    color: var(--primary-500);
}

.dark-mode .spec-item p {
    color: var(--dark-text-secondary);
}

/* Lists and Content */
.dark-mode .feature-list li::before {
    color: var(--primary-500);
}

.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4 {
    color: var(--dark-text-primary);
}

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

/* Project Navigation */
.dark-mode .project-navigation {
    border-top: 1px solid var(--dark-border);
    background: var(--dark-bg-primary);
}

.dark-mode .nav-project {
    background: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
    border: 1px solid var(--dark-border);
    transition: background-color var(--transition-base), 
                box-shadow var(--transition-base);
}

.dark-mode .nav-project:hover {
    background: #3a3a3a;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

.dark-mode .nav-project span {
    color: var(--primary-500);
}

.dark-mode .nav-project h3 {
    color: var(--dark-text-primary);
}

/* Images and Media */
.dark-mode .project-image-hero img {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    border: 1px solid var(--dark-border);
}

.dark-mode .project-image img {
    border: 1px solid var(--dark-border);
}

/* Project images in dark mode - subtle default, prominent on hover */
.dark-mode .img-main {
    border: none;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.05);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.dark-mode .img-main:hover {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.15), 
                0 0 40px rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

/* Footer */
.dark-mode footer {
    background: var(--dark-bg-primary);
    color: var(--dark-text-secondary);
    border-top: 1px solid var(--dark-border);
}

/* Buttons in Dark Mode */
.dark-mode .primary-button {
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    color: white;
    box-shadow: 0 8px 20px rgba(255, 107, 107, 0.3);
}

.dark-mode .primary-button:hover {
    box-shadow: 0 12px 30px rgba(255, 107, 107, 0.4);
}

.dark-mode .btn--secondary {
    background: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
    border: 1px solid var(--dark-border);
}

.dark-mode .btn--secondary:hover {
    background: #3a3a3a;
    color: var(--dark-text-primary);
}

/* Email Copy Button */
.dark-mode .email-copy-btn {
    background: var(--dark-bg-secondary);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
}

.dark-mode .email-copy-btn:hover {
    background: var(--dark-bg-elevated);
    border-color: var(--primary-500);
}

.dark-mode .email-copy-btn::before {
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.2), 
        transparent
    );
}

.dark-mode .email-copy-btn.copied {
    background: var(--primary-900);
    color: var(--primary-300);
    border-color: var(--primary-500);
    animation: shimmerSuccessDark 0.8s ease;
}

.dark-mode .email-copy-btn.copied::before {
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.4), 
        transparent
    );
}

@keyframes shimmerSuccessDark {
    0% {
        background: var(--primary-900);
        box-shadow: 0 0 5px rgba(255, 138, 138, 0.3);
    }
    50% {
        background: var(--primary-800);
        box-shadow: 0 0 15px rgba(255, 138, 138, 0.6);
    }
    100% {
        background: var(--primary-900);
        box-shadow: 0 0 5px rgba(255, 138, 138, 0.3);
    }
}

/* Social Links */
.dark-mode .social-link {
    color: var(--dark-text-secondary);
}

.dark-mode .social-link:hover {
    background: var(--dark-bg-secondary);
    color: var(--primary-500);
}

/* Dark mode brand-specific hover colors */
.dark-mode .social-link[href*="linkedin"]:hover {
    color: #4db6e6;
}

.dark-mode .social-link[href*="github"]:hover {
    color: #f0f0f0;
}

.dark-mode .social-link[href*="notion"]:hover {
    color: #ffffff;
}

/* View Project Link */
.dark-mode .view-project {
    color: var(--dark-text-primary);
}

.dark-mode .view-project:hover {
    color: var(--primary-500);
}

/* Theme Toggle Enhancement for Better Visibility in Dark Mode */
.dark-mode .theme-toggle {
    background: #2a2a2a;
    border: 2px solid #555;
}

.dark-mode .theme-toggle:hover {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.2);
}

.dark-mode .theme-toggle:focus-visible {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.3);
}

.dark-mode .theme-toggle::before {
    background: #f0f0f0;
}

/* Form Elements (if any) */
.dark-mode input,
.dark-mode textarea {
    background: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
    border: 1px solid var(--dark-border);
}

.dark-mode input:focus,
.dark-mode textarea:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.2);
}

/* Cards and Components */
.dark-mode .tool-item {
    background: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
    border: 1px solid var(--dark-border);
}

.dark-mode .tool-item:hover {
    background: #3a3a3a;
}

/* Timeline in Dark Mode */
.dark-mode .timeline::before {
    background: var(--dark-border);
}

.dark-mode .timeline li::before {
    background: var(--primary-500);
    box-shadow: 0 0 0 3px var(--dark-bg-primary);
}

.dark-mode .date {
    color: var(--primary-500);
}

/* Focus States */
.dark-mode :focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

/* Figure Caption in Dark Mode */
.dark-mode figcaption {
    color: #c0c0c0;
    font-style: normal;
}

/* Project Details - Remove border/background in dark mode */
.dark-mode .project-details {
    background: var(--dark-bg-primary) !important;
    border: none !important;
}

/* Project Section - Remove border in dark mode */
.dark-mode .project-section {
    border-top: none !important;
}

/* Scrollbar Styling for Dark Mode */
.dark-mode::-webkit-scrollbar {
    width: 8px;
}

.dark-mode::-webkit-scrollbar-track {
    background: var(--dark-bg-primary);
}

.dark-mode::-webkit-scrollbar-thumb {
    background: var(--dark-border);
    border-radius: 4px;
}

.dark-mode::-webkit-scrollbar-thumb:hover {
    background: #555;
}