/* Material-inspired light surfaces. Every rule is opt-in to the existing theme.
   Keep the original stylesheets and dark-theme values unchanged. */
html.light-theme {
    color-scheme: light;
    --background: #f4f3ef;
    --card-bg: #faf9f6;
    --subtle-bg: #e9edf0;
    --text-color: #25323d;
    --text-color-rgb: 37, 50, 61;
    --light-text: #576570;
    --border-color: #d5dce0;
    --accent-color: #385f7d;
    --accent-color-rgb: 56, 95, 125;
    --accent-hover: #294c67;
    --shadow-color: rgba(37, 50, 61, 0.08);
    --gradient-1: linear-gradient(120deg, #385f7d, #385f7d);
    --gradient-2: linear-gradient(120deg, #294c67, #294c67);
    --light-elevation: 0 2px 4px rgba(37, 50, 61, 0.03), 0 12px 32px rgba(37, 50, 61, 0.06);
}

html.light-theme .navbar {
    background: rgba(244, 243, 239, 0.96);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 12px rgba(37, 50, 61, 0.03);
}

html.light-theme .navbar.scrolled {
    background: rgba(250, 249, 246, 0.98);
    box-shadow: 0 4px 20px var(--shadow-color);
}

html.light-theme .nav-links a { color: var(--light-text); }
html.light-theme .nav-links a:hover,
html.light-theme .nav-links a.active { color: var(--accent-color); }
html.light-theme .navbar.mobile-layout .nav-links { background: var(--card-bg); }

html.light-theme .theme-switch-wrapper {
    background: #e5ebee;
    box-shadow: inset 0 0 0 1px var(--border-color);
}

html.light-theme .hero {
    background: radial-gradient(ellipse at 50% 35%, #e3eaf0 0%, var(--background) 70%);
}

html.light-theme .section-title::after {
    background: #8aa6b8;
    border-radius: 99px;
}

html.light-theme .portfolio-item {
    /* A tonal mat separates dark artwork from the page surface. */
    padding: 10px;
    border: 1px solid #d5dce0;
    border-radius: 20px;
    background: var(--card-bg);
    box-shadow: var(--light-elevation);
}

html.light-theme .portfolio-item > img {
    display: block;
    border-radius: 10px;
}

html.light-theme .portfolio-item .title-overlay {
    left: 10px;
    right: 10px;
    bottom: 10px;
    border-radius: 0 0 10px 10px;
}

html.light-theme .portfolio-item:hover {
    border: 1px solid #8aa6b8;
    background: var(--card-bg);
    box-shadow: 0 8px 28px rgba(37, 50, 61, 0.14);
}

html.light-theme .portfolio-item .overlay {
    background: rgba(244, 243, 239, 0.97);
}

html.light-theme .project-preview h3 { color: var(--text-color); }
html.light-theme .project-preview p { color: var(--light-text); }
html.light-theme .preview-tech span {
    color: var(--accent-color);
    background: #e2eaf0;
    border-color: var(--border-color);
}

html.light-theme .info-item,
html.light-theme .contact-form,
html.light-theme .highlight-item {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    box-shadow: var(--light-elevation);
}

html.light-theme .info-item:hover {
    box-shadow: 0 6px 20px var(--shadow-color);
    border-color: #aebfca;
}

html.light-theme .info-icon {
    background: #dfe9f0;
    color: var(--accent-color);
}

html.light-theme .form-group input,
html.light-theme .form-group textarea {
    background: #f0f2f1;
    border: 2px solid #c5cfd5;
    border-radius: 12px;
    color: var(--text-color);
}

html.light-theme .form-group input:hover,
html.light-theme .form-group textarea:hover { border-color: #879ba9; }

html.light-theme .form-group input:focus,
html.light-theme .form-group textarea:focus {
    background: var(--card-bg);
    border-color: var(--accent-color);
    box-shadow: 0 0 0 4px rgba(56, 95, 125, 0.12);
}

html.light-theme .submit-btn,
html.light-theme .cta-primary,
html.light-theme .view-project {
    color: #fff;
    background: var(--accent-color);
    border-radius: 28px;
    box-shadow: 0 2px 5px var(--shadow-color);
}

html.light-theme .submit-btn:hover,
html.light-theme .cta-primary:hover,
html.light-theme .view-project:hover {
    color: #fff;
    background: var(--accent-hover);
    box-shadow: 0 4px 12px rgba(37, 50, 61, 0.15);
}

html.light-theme .cta-secondary {
    color: var(--accent-color);
    border-color: #a5b6c2;
    border-radius: 28px;
    background: transparent;
}

html.light-theme .cta-secondary:hover { background: #e2eaf0; }

html.light-theme .footer {
    background: #e9edec;
    border-top: 1px solid var(--border-color);
}

html.light-theme .lightbox { background: rgba(37, 50, 61, 0.48); }
html.light-theme .lightbox-content {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 24px 80px rgba(37, 50, 61, 0.22);
}

html.light-theme :is(a, button, input, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 4px;
}

html.light-theme .theme-switch input:focus-visible + .slider {
    outline: 3px solid var(--accent-color);
    outline-offset: 4px;
}