/* ==========================================================================
   Light Theme Styles
   ========================================================================== */

/* Base Light Mode Variables Override */
body.light-mode {
    --primary-bg: var(--light-bg);
    --primary-text: var(--light-primary);
    --text-secondary: var(--light-secondary);
    --card-bg: var(--light-card-bg);
    --card-hover: var(--light-hover);
    --border-color: var(--light-border);
    --text-gradient: linear-gradient(135deg, var(--light-primary) 0%, var(--light-secondary) 100%);
}

/* ==========================================================================
   Navigation
   ========================================================================== */

body.light-mode .main-nav {
    background: rgba(255, 255, 255, 0.25);
    border-bottom: 1px solid var(--light-border);
}

body.light-mode .nav-link::after {
    background: var(--light-gradient-primary);
}

/* Mobile Menu */
body.light-mode .hamburger-line {
    background-color: #000205;
}

body.light-mode.menu-open .main-nav {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(20px);
}

/* ==========================================================================
   Theme Toggle Button
   ========================================================================== */

body.light-mode .theme-toggle::before {
    background: var(--primary-text);
    mask: url('/assets/icons/light-mode.svg') no-repeat 50% 50%;
    -webkit-mask: url('/assets/icons/light-mode.svg') no-repeat 50% 50%;
    mask-size: contain;
    -webkit-mask-size: contain;
    width: 28px;
    height: 26px;
}

body.light-mode.menu-open .theme-toggle {
    background: rgba(255, 255, 255, 0.9);
}

/* ==========================================================================
   Typography
   ========================================================================== */

body.light-mode .section-title {
    color: #666666 !important;
    background: var(--light-gradient-primary);
}

@supports (-webkit-background-clip: text) {
    body.light-mode .section-title {
        color: transparent !important;
        -webkit-text-fill-color: transparent !important;
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.9) 100%);
        -webkit-background-clip: text;
        background-clip: text;
    }
}

@supports not (-webkit-background-clip: text) {
    body.light-mode .section-title {
        color: #666666 !important;
        -webkit-text-fill-color: #666666 !important;
        background: none !important;
    }
}

body.light-mode .hero-text p {
    color: var(--light-primary);
}

body.light-mode .highlight-number {
    background: linear-gradient(135deg, #000205 0%, rgba(0, 0, 0, 0.85) 100%);
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
}

/* ==========================================================================
   Buttons & Interactive Elements
   ========================================================================== */

body.light-mode .cta-button {
    background: linear-gradient(to bottom, #ffffff, #f5f5f5) !important;
    border: 1.5px solid var(--light-border) !important;
    color: var(--light-primary) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08), 
                inset 0 0 0 1px rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

body.light-mode .cta-button.secondary {
    background: linear-gradient(to bottom, #ffffff, #f8f8f8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

body.light-mode .cta-button:hover {
    background: linear-gradient(to bottom, #ffffff, #f0f0f0);
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.12),
                inset 0 0 0 1px rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.15);
}

body.light-mode .cta-button:active {
    background: linear-gradient(to bottom, #f8f8f8, #f2f2f2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06),
                inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}

body.light-mode .cta-button::before {
    background: linear-gradient(
        120deg,
        transparent 10%,
        rgba(255, 255, 255, 0.3) 20%,
        rgba(255, 255, 255, 0.8) 50%,
        rgba(255, 255, 255, 0.3) 80%,
        transparent 90%
    );
}

body.light-mode .cta-button::after {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.03) 0%,
        transparent 50%,
        rgba(0, 0, 0, 0.05) 100%
    );
}

body.light-mode .timeline-expand-btn {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
    color: #333;
}

body.light-mode .timeline-expand-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   Section Backgrounds
   ========================================================================== */

body.light-mode {
    background: var(--primary-bg);
}

body.light-mode .content-wrapper {
    background: transparent;
}

body.light-mode #my-road,
body.light-mode #projects,
body.light-mode #about-me,
body.light-mode #process {
    background: #ffffff;
}

body.light-mode .content-section.my-road {
    background: linear-gradient(180deg, #ffffff00 0%, #ffffff 25%, #ffffff 100%) !important;
}

/* ==========================================================================
   Timeline Section
   ========================================================================== */

body.light-mode .timeline::before {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, transparent 100%);
}

body.light-mode .timeline-content {
    background: var(--light-card-bg);
    border: 1px solid var(--light-border);
    box-shadow: var(--light-card-shadow);
}

body.light-mode .timeline-content:hover {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: var(--light-card-shadow-hover);
}

body.light-mode .tech-stack span {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: var(--light-primary);
}

body.light-mode .tech-stack span:hover {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

/* ==========================================================================
   Projects Section
   ========================================================================== */

body.light-mode .project-card {
    background: var(--light-glass-bg);
    border-color: var(--light-glass-border);
    box-shadow: var(--light-glass-shadow);
    outline: none;
}

body.light-mode .project-card::before {
    background: linear-gradient(
        135deg,
        var(--light-accent-primary) 0%,
        transparent 50%,
        var(--light-accent-secondary) 100%
    );
    opacity: 0.03;
}

body.light-mode .project-card:hover {
    background: var(--light-glass-hover-bg);
    border-color: var(--light-glass-hover-border);
    box-shadow: var(--light-glass-hover-shadow),
                0 0 35px rgba(74, 144, 226, 0.2),
                0 0 70px rgba(74, 144, 226, 0.12),
                0 0 105px rgba(74, 144, 226, 0.06);
}

body.light-mode .project-card:hover::before {
    opacity: 0.08;
}

body.light-mode .project-info::before {
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--light-accent-primary) 50%,
        transparent 100%
    );
    opacity: 0.15;
}

body.light-mode .project-card:hover .project-info::before {
    opacity: 0.25;
}

body.light-mode .project-description {
    color: rgba(0, 0, 0, 0.7);
}

body.light-mode .project-card:hover .project-description {
    color: rgba(0, 0, 0, 0.85);
}

body.light-mode .project-link {
    color: rgba(0, 0, 0, 0.6);
}

body.light-mode .project-link:hover {
    color: var(--light-accent-primary);
}

body.light-mode .project-link::after {
    background: var(--light-accent-gradient);
}

body.light-mode .project-tags span {
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.9);
}

body.light-mode .project-card:hover .project-tags span {
    background: rgba(255, 255, 255, 0.95);
    border-color: var(--light-accent-primary);
    color: var(--light-accent-primary);
}

body.light-mode .project-info {
    background: rgba(255, 255, 255, 0.7);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   About Section
   ========================================================================== */

body.light-mode .about-intro {
    color: rgba(0, 0, 0, 0.85);
}

body.light-mode .highlight-card {
    background: var(--light-card-bg);
    border: 1px solid var(--light-border);
    box-shadow: var(--light-card-shadow);
}

body.light-mode .highlight-label {
    color: rgba(0, 0, 0, 0.6);
}

body.light-mode .about-skills {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

body.light-mode .skill-list li {
    color: rgba(0, 0, 0, 0.75);
}

body.light-mode .skill-list li:hover {
    color: #000205;
}

body.light-mode .skill-bottom {
    color: rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   Process Section
   ========================================================================== */

body.light-mode .feature-card {
    background: var(--light-card-bg);
    border: 1px solid var(--light-border);
    box-shadow: var(--light-card-shadow);
    backdrop-filter: blur(10px);
}

body.light-mode .feature-card:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: var(--light-card-shadow-hover);
    transform: translateY(-2px);
}

body.light-mode .feature-card p {
    color: rgba(0, 0, 0, 0.7);
}

/* ==========================================================================
   Contact Section
   ========================================================================== */

body.light-mode .contact-item {
    background: var(--light-card-bg) !important;
    border: 1px solid var(--light-border) !important;
    box-shadow: var(--light-card-shadow) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

body.light-mode .contact-item:hover {
    background: rgba(255, 255, 255, 0.8);
    border-color: var(--light-border);
    transform: translateY(-2px);
    box-shadow: var(--light-card-shadow-hover);
}

body.light-mode .contact-description {
    color: rgba(0, 0, 0, 0.7);
}

body.light-mode #transform-canvas {
    background: var(--light-glass-bg);
    border-color: var(--light-glass-border);
    box-shadow: var(--light-glass-shadow);
}

body.light-mode #transform-canvas:hover {
    border-color: var(--light-glass-hover-border);
    box-shadow: var(--light-glass-hover-shadow);
}

body.light-mode .transform-description {
    color: var(--light-secondary);
}

/* ==========================================================================
   Navigation Dots
   ========================================================================== */

body.light-mode .side-nav-dot {
    background: rgba(0, 0, 0, 0.15);
}

body.light-mode .side-nav-dot.active {
    background: rgba(0, 0, 0, 0.4);
}

body.light-mode .side-nav-dot:hover {
    background: rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   Icons & Graphics
   ========================================================================== */

body.light-mode .social-icon path {
    fill: var(--primary-text);
}

body.light-mode .social-icon.linkedin path {
    fill: var(--primary-text);
}

body.light-mode .social-icon.github path {
    stroke: var(--primary-text);
    fill: none;
}

body.light-mode .contact-icon path {
    stroke: var(--primary-text);
}

body.light-mode .contact-icon.linkedin path {
    stroke: none;
    fill: var(--primary-text);
}

/* ==========================================================================
   Loading States
   ========================================================================== */

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

body.light-mode .loader {
    border: 3px solid #000;
    border-bottom-color: transparent;
}