/* ╔════════════════════════════════════════════════════════════╗
   ║  Light Theme Override — toggles via [data-theme="light"]  ║
   ╚════════════════════════════════════════════════════════════╝ */

/* ── Theme Toggle Button ───────────────────────────────── */
.theme-toggle {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 9999;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.theme-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.4);
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
    position: absolute;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Dark mode (default): show sun icon */
.theme-toggle .icon-sun {
    opacity: 1;
    transform: rotate(0deg);
}

.theme-toggle .icon-moon {
    opacity: 0;
    transform: rotate(-90deg);
}

/* Light mode: show moon icon */
[data-theme="light"] .theme-toggle .icon-sun {
    opacity: 0;
    transform: rotate(90deg);
}

[data-theme="light"] .theme-toggle .icon-moon {
    opacity: 1;
    transform: rotate(0deg);
}

[data-theme="light"] .theme-toggle {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* ── Light Theme Variables ─────────────────────────────── */
[data-theme="light"] {
    /* Neutrals — inverted */
    --bg: #F8F8FA;
    --bg-elevated: #FFFFFF;
    --surface: rgba(0, 0, 0, 0.04);
    --surface-hover: rgba(0, 0, 0, 0.07);
    --white: #111111;
    --gray-100: #1a1a1a;
    --gray-300: #444444;
    --gray-500: #777777;
    --gray-700: #BBBBBB;
    --gray-900: #E8E8E8;

    /* Glass — light */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(0, 0, 0, 0.08);

    /* Glow — subtler on light bg */
    --glow-gold: 0 0 40px rgba(241, 188, 56, 0.12);
    --glow-green: 0 0 40px rgba(67, 161, 67, 0.12);

    /* Brand — slightly deeper for contrast */
    --gold: #D4A020;
    --gold-light: #E8B832;
    --green: #2E8B2E;
    --green-light: #43A143;
}

/* ── Body & Global ─────────────────────────────────────── */
[data-theme="light"] body {
    background: var(--bg);
    color: #222;
}

/* ── Navbar ────────────────────────────────────────────── */
[data-theme="light"] .navbar {
    background: rgba(248, 248, 250, 0.85);
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .navbar.scrolled {
    background: rgba(248, 248, 250, 0.95);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .nav-link {
    color: #444;
}

[data-theme="light"] .nav-link:hover,
[data-theme="light"] .nav-link.active {
    color: #111;
}

[data-theme="light"] .nav-link.active::after {
    background: var(--gold);
}

/* ── Hero ──────────────────────────────────────────────── */
[data-theme="light"] .hero {
    background: linear-gradient(135deg, #F0F0F4 0%, #E8E8F0 50%, #F0F0F4 100%);
}

[data-theme="light"] #heroCanvas {
    opacity: 0.15;
}

[data-theme="light"] .hero h1 {
    color: #111;
}

[data-theme="light"] .hero-desc {
    color: #555;
}

[data-theme="light"] .hero-tag {
    background: rgba(0, 0, 0, 0.06);
    color: var(--gold);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .gradient {
    background: linear-gradient(135deg, var(--gold), var(--green));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Buttons ───────────────────────────────────────────── */
[data-theme="light"] .btn-primary {
    color: #111;
    box-shadow: 0 4px 16px rgba(241, 188, 56, 0.25);
}

[data-theme="light"] .btn-outline {
    border-color: rgba(0, 0, 0, 0.2);
    color: #333;
}

[data-theme="light"] .btn-outline:hover {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.3);
}

/* ── Glass Cards ───────────────────────────────────────── */
[data-theme="light"] .glass-card {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .glass-card:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .card-icon {
    background: rgba(0, 0, 0, 0.05);
    color: var(--gold);
}

[data-theme="light"] .card-title {
    color: #111;
}

[data-theme="light"] .card-text {
    color: #555;
}

[data-theme="light"] .card-list li {
    color: #555;
}

/* ── Section Tags & Titles ─────────────────────────────── */
[data-theme="light"] .section-tag {
    background: rgba(0, 0, 0, 0.05);
    color: var(--gold);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .section-title {
    color: #111;
}

[data-theme="light"] .section-subtitle {
    color: #555;
}

/* ── Divider ───────────────────────────────────────────── */
[data-theme="light"] .divider {
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08), transparent);
}

/* ── Platform ──────────────────────────────────────────── */
[data-theme="light"] .slider-wrapper {
    border-color: rgba(0, 0, 0, 0.08);
    background: #fff;
}

[data-theme="light"] .slider-btn {
    background: rgba(0, 0, 0, 0.06);
    color: #333;
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .slider-btn:hover {
    background: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .feature-item {
    border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .feature-item h4 {
    color: #111;
}

[data-theme="light"] .feature-item p {
    color: #555;
}

/* ── Story Cards ───────────────────────────────────────── */
[data-theme="light"] .story-card {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .story-card:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .story-text {
    color: #555;
}

[data-theme="light"] .story-metrics {
    background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .story-metrics p {
    color: #555;
}

[data-theme="light"] .story-metrics strong {
    color: #111;
}

/* ── Partners ──────────────────────────────────────────── */
[data-theme="light"] .partner-logo {
    filter: brightness(0);
}

[data-theme="light"] .partner-logo:hover {
    filter: none;
}

/* ── CTA Section ───────────────────────────────────────── */
[data-theme="light"] .cta-section::before {
    background: radial-gradient(ellipse at center, rgba(241, 188, 56, 0.06) 0%, transparent 60%);
}

/* ── Footer ────────────────────────────────────────────── */
[data-theme="light"] .footer {
    background: #F0F0F4;
    border-top-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .footer-brand p {
    color: #777;
}

[data-theme="light"] .footer-links a {
    color: #555;
}

[data-theme="light"] .footer-links a:hover {
    color: var(--gold);
}

[data-theme="light"] .footer-bottom {
    color: #999;
    border-top-color: rgba(0, 0, 0, 0.06);
}

/* ── CV Animation ──────────────────────────────────────── */
[data-theme="light"] .cv-scene {
    background: rgba(240, 240, 244, 0.95);
    border-color: rgba(67, 161, 67, 0.2);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12), inset 0 0 60px rgba(255, 255, 255, 0.3);
}

[data-theme="light"] .cv-camera-body {
    background: linear-gradient(180deg, #e0e0e6, #d0d0d8);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .cv-camera-mount {
    background: linear-gradient(180deg, #d0d0d6, #c0c0c8);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .cv-belt-surface {
    background: linear-gradient(180deg, #c8c8cc, #b8b8bc, #c0c0c4);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .cv-belt-texture {
    background: repeating-linear-gradient(90deg,
            transparent 0, transparent 24px,
            rgba(0, 0, 0, 0.05) 24px, rgba(0, 0, 0, 0.05) 26px);
}

[data-theme="light"] .cv-roller {
    background: radial-gradient(circle at 40% 40%, #bbb, #888);
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .cv-hud-label {
    color: rgba(46, 139, 46, 0.7);
}

[data-theme="light"] .cv-hud-line {
    border-color: rgba(46, 139, 46, 0.3);
}

[data-theme="light"] .cv-confidence-track {
    background: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .cv-confidence-label,
[data-theme="light"] .cv-confidence-val {
    color: #555;
}

[data-theme="light"] .cv-product-pcb {
    background: linear-gradient(135deg, #2d8a2d, #1a6a1a);
}

[data-theme="light"] .cv-fov {
    background: linear-gradient(180deg, rgba(46, 139, 46, 0.12) 0%, rgba(46, 139, 46, 0.02) 100%);
}

/* ── Scroll Hint ───────────────────────────────────────── */
[data-theme="light"] .scroll-hint span {
    color: #777;
}

[data-theme="light"] .scroll-mouse {
    border-color: rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .scroll-mouse::before {
    background: rgba(0, 0, 0, 0.3);
}

/* ── Mobile Nav ────────────────────────────────────────── */
[data-theme="light"] .nav-links {
    background: rgba(248, 248, 250, 0.97);
}

@media(max-width: 768px) {
    [data-theme="light"] .nav-links {
        border-left-color: rgba(0, 0, 0, 0.06);
    }
}

/* ── Smooth Transition ─────────────────────────────────── */
body,
.navbar,
.glass-card,
.story-card,
.footer,
.cv-scene,
.btn-outline,
.section-tag,
.divider,
.theme-toggle {
    transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}