/* Theme-specific optimizations for the cyberpunk project section */

:root {
    /* Define common variables for both themes */
    --cyber-neon-blue: #00f3ff;
    --cyber-neon-pink: #ff00ff;
    --cyber-neon-green: #00ff66;
    --cyber-dark: #0a0a12;
    --cyber-darker: #05050a;
    --cyber-light: #e0f7ff;
}

/* Dark mode optimizations (default) */
:root {
    --project-bg-overlay: rgba(0, 0, 0, 0.65);
    --project-text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
    --project-title-color: #ffffff;
    --project-description-color: #e6f7ff;
    --project-border-glow: 0 0 10px var(--cyber-neon-blue);
}

/* Light mode optimizations */
:root.light-mode {
    --project-bg-overlay: rgba(0, 0, 0, 0.75);
    --project-text-shadow: 0 0 5px rgba(0, 0, 0, 0.9);
    --project-title-color: #ffffff;
    --project-description-color: #ffffff;
    --project-border-glow: 0 0 8px var(--cyber-neon-blue), 0 0 16px rgba(0, 0, 0, 0.8);
}

/* Project card overlay for light mode needs to be darker for better text contrast */
:root.light-mode .project-card:before {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.4),
        rgba(0, 0, 0, 0.8)
    );
}

/* Enhanced project title visibility */
.project-card .project-title {
    color: var(--project-title-color) !important;
    text-shadow: var(--project-text-shadow) !important;
}

.project-card .project-description {
    color: var(--project-description-color) !important;
    text-shadow: var(--project-text-shadow) !important;
}

/* Adjust project borders and glows for both themes */
.project-card {
    box-shadow: var(--project-border-glow);
}

/* Make sure project section header looks good in both themes */
:root.light-mode .cyber-section-header {
    background-color: rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), 0 0 10px var(--cyber-neon-blue);
}

/* Enhance project languages visibility in both modes */
:root.light-mode .primary-language {
    background-color: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
}

/* Carousel navigation improvements for light mode */
:root.light-mode .carousel-button {
    background-color: rgba(0, 0, 0, 0.7);
    color: var(--cyber-neon-blue);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5), 0 0 5px var(--cyber-neon-blue);
}

:root.light-mode .carousel-dot {
    background-color: rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}