/* Light Mode Overrides */
body.light-mode {
    --bg-dark: #f8fafc;
    --bg-card: rgba(255, 255, 255, 0.7);
    --text-light: #1e293b;
    --text-dim: #64748b;
    --glass-border: 1px solid rgba(0, 0, 0, 0.1);
    --gradient-hero: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(147, 51, 234, 0.1));
}

body.light-mode .hero-bg {
    background: radial-gradient(ellipse at bottom, #f1f5f9 0%, #ffffff 100%);
}

body.light-mode .hero-bg::before {
    /* Subtle dark specs for stars in light mode */
    background-image:
        radial-gradient(1.5px 1.5px at 20px 30px, #94a3b8, rgba(0, 0, 0, 0)),
        radial-gradient(1.5px 1.5px at 40px 70px, #94a3b8, rgba(0, 0, 0, 0)),
        radial-gradient(1.5px 1.5px at 50px 160px, #94a3b8, rgba(0, 0, 0, 0)),
        radial-gradient(1.5px 1.5px at 90px 40px, #94a3b8, rgba(0, 0, 0, 0)),
        radial-gradient(1.5px 1.5px at 130px 80px, #94a3b8, rgba(0, 0, 0, 0));
    opacity: 0.5;
}

body.light-mode .hero-overlay {
    background: none;
    /* Remove dark overlay in light mode */
}

body.light-mode .nav-links a {
    color: #475569;
}

body.light-mode .nav-links a:hover,
body.light-mode .nav-links a.active {
    color: var(--primary-color);
}

body.light-mode .lang-switch,
body.light-mode .theme-switch {
    border-color: #cbd5e1;
    color: #475569;
}

body.light-mode .lang-switch:hover,
body.light-mode .theme-switch:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

body.light-mode nav {
    background: rgba(255, 255, 255, 0.8);
}

/* Theme Switch Button */
.theme-switch {
    background: none;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-speed);
    margin-right: 1rem;
}

.theme-switch:hover {
    color: var(--primary-color);
}

/* Form Inputs Light Mode */
body.light-mode .form-control {
    background: white;
    border-color: #cbd5e1;
    color: var(--text-light);
}

body.light-mode .form-control:focus {
    border-color: var(--primary-color);
}

/* Buttons Light Mode */
body.light-mode .btn-secondary {
    color: var(--text-light);
    /* Dark text for light mode */
    border-color: #cbd5e1;
}

body.light-mode .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.5);
    color: var(--primary-color);
    border-color: var(--primary-color);
}