/* ==========================================================================
   LIGHT-MODE.CSS - Complete Light Theme Stylesheet (Loaded Last for 100% Precedence)
   ========================================================================== */

/* Root & Global Body */
body.light-mode {
    background: linear-gradient(135deg, #f8fafc 0%, #edf2f7 50%, #e2e8f0 100%) !important;
    color: #0f172a !important;
}

/* Background Atmosphere & Vignette */
body.light-mode #background-canvas {
    opacity: 0.35 !important;
}

body.light-mode .ambient-glow-layer {
    background: radial-gradient(circle at 25% 25%, rgba(2, 132, 199, 0.18) 0%, transparent 60%),
                radial-gradient(circle at 75% 75%, rgba(124, 58, 237, 0.15) 0%, transparent 60%) !important;
}

body.light-mode .cinematic-vignette {
    box-shadow: inset 0 0 120px rgba(15, 23, 42, 0.08) !important;
}

/* Header & Navbar */
body.light-mode header {
    background: rgba(255, 255, 255, 0.94) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06) !important;
}

body.light-mode .logo {
    background: linear-gradient(90deg, #0284c7, #7c3aed) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

body.light-mode nav ul li a {
    color: #1e293b !important;
}

body.light-mode nav ul li a:hover {
    color: #0284c7 !important;
}

body.light-mode .mobile-menu-btn {
    color: #0f172a !important;
}

/* Mobile Menu Drawer in Light Mode */
@media (max-width: 768px) {
    body.light-mode nav ul {
        background: rgba(255, 255, 255, 0.98) !important;
        border: 1px solid rgba(2, 132, 199, 0.3) !important;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15) !important;
    }
}

/* Typography & Headings */
body.light-mode h1, 
body.light-mode h2, 
body.light-mode h3, 
body.light-mode h4, 
body.light-mode h5, 
body.light-mode h6, 
body.light-mode .section-title {
    color: #0f172a !important;
}

body.light-mode p,
body.light-mode .hero-subtitle,
body.light-mode .hero-description,
body.light-mode .about-terminal-box p,
body.light-mode section p {
    color: #334155 !important;
}

body.light-mode .hero h1 {
    background: linear-gradient(90deg, #0284c7, #7c3aed) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

/* Cards & Glassmorphic Containers */
body.light-mode .about-terminal-box,
body.light-mode .metric-chip,
body.light-mode .coding-profile-card,
body.light-mode .project-card,
body.light-mode .freelance-card,
body.light-mode .cert-card,
body.light-mode .cyber-hub-card,
body.light-mode .sandbox-container,
body.light-mode .contact-form,
body.light-mode .cmd-palette-modal,
body.light-mode .project-modal-box {
    background: #ffffff !important;
    border: 1px solid rgba(2, 132, 199, 0.25) !important;
    color: #0f172a !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important;
}

body.light-mode .project-info h3,
body.light-mode .freelance-info h3 {
    color: #0f172a !important;
}

body.light-mode .project-info p,
body.light-mode .freelance-info p {
    color: #64748b !important;
}

body.light-mode .tech-icon-pill {
    background: rgba(15, 23, 42, 0.04) !important;
    border-color: rgba(15, 23, 42, 0.1) !important;
}

body.light-mode .skill-icon-card {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

body.light-mode .project-card:hover,
body.light-mode .freelance-card:hover,
body.light-mode .cert-card:hover,
body.light-mode .cyber-hub-card:hover,
body.light-mode .coding-profile-card:hover {
    border-color: #0284c7 !important;
    box-shadow: 0 16px 36px rgba(2, 132, 199, 0.22) !important;
}

body.light-mode .skill-icon-card:hover {
    background: transparent !important;
    box-shadow: none !important;
}

/* Metric Chips & Coding Profiles */
body.light-mode .metric-val {
    color: #0284c7 !important;
}

body.light-mode .metric-lbl {
    color: #475569 !important;
}

body.light-mode .coding-profile-card a {
    color: #0f172a !important;
}

body.light-mode .coding-profile-card:hover a {
    color: #0284c7 !important;
}

/* Skill Cards */
body.light-mode .skill-name-label {
    color: #0f172a !important;
}

/* Timeline & Hub Cards */
body.light-mode .hub-company {
    color: #0284c7 !important;
}

body.light-mode .hub-title {
    color: #0f172a !important;
}

body.light-mode .hub-description {
    color: #334155 !important;
}

body.light-mode .hub-badge {
    background: rgba(2, 132, 199, 0.12) !important;
    border-color: rgba(2, 132, 199, 0.35) !important;
    color: #0284c7 !important;
}

/* Project Cards */
body.light-mode .project-info h3 {
    color: #0f172a !important;
}

body.light-mode .project-info p {
    color: #334155 !important;
}

body.light-mode .tag,
body.light-mode .tech-corner-tag {
    background: rgba(2, 132, 199, 0.12) !important;
    border: 1px solid rgba(2, 132, 199, 0.35) !important;
    color: #0284c7 !important;
}

/* Buttons */
body.light-mode .btn-secondary {
    background: rgba(241, 245, 249, 0.95) !important;
    border-color: rgba(2, 132, 199, 0.4) !important;
    color: #0f172a !important;
}

body.light-mode .btn-secondary:hover {
    background: #0284c7 !important;
    color: #ffffff !important;
}

/* Form inputs */
body.light-mode .form-group input,
body.light-mode .form-group textarea {
    background: rgba(248, 250, 252, 0.95) !important;
    border: 1.5px solid rgba(2, 132, 199, 0.3) !important;
    color: #0f172a !important;
}

body.light-mode .form-group input:focus,
body.light-mode .form-group textarea:focus {
    border-color: #0284c7 !important;
    box-shadow: 0 0 12px rgba(2, 132, 199, 0.25) !important;
}

/* Footer & Telemetry */
body.light-mode footer {
    background: rgba(255, 255, 255, 0.95) !important;
    border-top: 1px solid rgba(2, 132, 199, 0.25) !important;
    color: #334155 !important;
}

body.light-mode .telemetry-pill,
body.light-mode .visitor-counter-pill,
body.light-mode .sfx-toggle-btn {
    background: rgba(241, 245, 249, 0.95) !important;
    border-color: rgba(2, 132, 199, 0.3) !important;
    color: #0f172a !important;
}