html.light {
    --c-bg-deep: #F0EDE6;
    --c-bg: #F7F4EF;
    --c-bg-alt: #F2EFEA;
    --c-surface: #FFFFFF;
    --c-surface-alt: #FAF8F5;
    --c-surface-hover: #F3F0EB;
    --c-panel: #FFFFFF;

    --c-text: #2C2822;
    --c-text-bright: #1A1713;
    --c-text-muted: #6B6358;
    --c-text-dim: #9A9184;
    --c-text-faint: #B8B0A4;

    --c-amber: #B87D30;
    --c-amber-dim: #96661E;
    --c-amber-dark: #755012;
    --c-amber-bg: rgba(184, 125, 48, 0.06);
    --c-amber-glow: rgba(184, 125, 48, 0.08);
    --c-amber-aura: rgba(184, 125, 48, 0.03);

    --c-teal: #3A8E86;
    --c-teal-dim: #2D726B;
    --c-teal-dark: #1F5650;
    --c-teal-bg: rgba(58, 142, 134, 0.06);
    --c-teal-glow: rgba(58, 142, 134, 0.08);

    --c-pink: #C95A7D;
    --c-pink-dim: #A84868;
    --c-pink-bg: rgba(201, 90, 125, 0.06);

    --c-red: #C44D4D;
    --c-red-dim: #A33D3D;
    --c-red-dark: #7F2E2E;
    --c-red-bg: rgba(196, 77, 77, 0.06);

    --c-border: #D8D3CB;
    --c-border-light: #E3DFD7;
    --c-border-focus: #CEC9C0;
    --c-border-active: var(--c-amber-dim);

    --c-scrollbar: #C8C3BA;
    --c-scrollbar-hover: #B8B2A8;
}

html.light .scanline-overlay {
    background: none;
}

html.light html::before {
    opacity: 0;
}

html.light .site-header {
    border-bottom-color: var(--c-border);
}

html.light .search-input {
    background: var(--c-bg-alt);
    border-color: var(--c-border);
}

html.light .search-input:focus {
    border-color: var(--c-amber-dim);
    box-shadow: 0 0 0 1px var(--c-amber-bg);
}

html.light .hero-terminal {
    background: var(--c-bg-alt);
    border-bottom-color: var(--c-border);
}

html.light .section-alt::before {
    background: linear-gradient(90deg, transparent, var(--c-border-light), transparent);
}

html.light .article-card {
    border-color: var(--c-border);
}

html.light .article-card:hover {
    border-color: var(--c-border-light);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05);
}

html.light .product-card {
    border-color: var(--c-border);
}

html.light .product-card:hover {
    border-color: var(--c-border-light);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05);
}

html.light .btn:hover {
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
}

html.light .btn-primary {
    color: #fff;
}

html.light .btn-primary:hover {
    box-shadow: 0 2px 12px rgba(184, 125, 48, 0.15);
}

html.light .site-footer {
    border-top-color: var(--c-border);
    background: var(--c-bg);
}

html.light .footer-terminal-bar {
    border-bottom-color: var(--c-border);
}

html.light .footer-terminal-bar .cursor {
    background: var(--c-amber);
}

html.light .tag-pill {
    border-color: var(--c-border);
}

html.light .back-to-top {
    border-color: var(--c-border);
}

html.light .back-to-top:hover {
    box-shadow: 0 2px 10px rgba(184, 125, 48, 0.12);
}

html.light .dark-toggle {
    border-color: var(--c-border);
}

html.light .dark-toggle:hover {
    border-color: var(--c-amber-dim);
    color: var(--c-amber);
}

html.light .pagination-link {
    border-color: var(--c-border);
}

html.light .compare-table th {
    background: var(--c-bg-alt);
}

html.light .sort-btn.active {
    color: #fff;
}

html.light .logo-icon {
    filter: brightness(0.72);
}

html.light,
html.light *,
html.light *::before,
html.light *::after {
    transition: background-color 0.25s ease,
                border-color 0.25s ease,
                color 0.25s ease,
                box-shadow 0.25s ease;
}

/* ── Slider Dynamic Background - Light Mode ── */
html.light .slider-slide {
    --sb-1: rgba(184, 125, 48, 0.18);
    --sb-2: rgba(58, 142, 134, 0.15);
    --sb-3: rgba(201, 90, 125, 0.12);
    --sb-4: rgba(100, 90, 200, 0.1);
}

html.light .slider-slide::before {
    background: linear-gradient(135deg,
        #F7F4EF 0%,
        #F2EFEA 20%,
        #F5F0E5 40%,
        #EDE8DF 60%,
        #F7F4EF 80%,
        #F0ECE4 100%
    );
    background-size: 200% 200%;
    animation: sliderGradient 10s ease infinite;
}

html.light .slider-slide::after {
    background:
        radial-gradient(circle 180px at 20% 30%, var(--sb-1) 0%, transparent 70%),
        radial-gradient(circle 150px at 70% 25%, var(--sb-2) 0%, transparent 70%),
        radial-gradient(circle 120px at 45% 75%, var(--sb-3) 0%, transparent 70%),
        radial-gradient(circle 100px at 85% 65%, var(--sb-4) 0%, transparent 70%),
        repeating-linear-gradient(0deg,
            transparent, transparent 58px,
            rgba(184, 125, 48, 0.06) 58px, rgba(184, 125, 48, 0.06) 60px
        ),
        repeating-linear-gradient(90deg,
            transparent, transparent 58px,
            rgba(58, 142, 134, 0.05) 58px, rgba(58, 142, 134, 0.05) 60px
        ),
        linear-gradient(45deg,
            transparent 0%, transparent 42%,
            rgba(184, 125, 48, 0.08) 42%, rgba(184, 125, 48, 0.08) 42.5%,
            transparent 42.5%, transparent 100%
        ),
        linear-gradient(-35deg,
            transparent 0%, transparent 55%,
            rgba(58, 142, 134, 0.07) 55%, rgba(58, 142, 134, 0.07) 55.5%,
            transparent 55.5%, transparent 100%
        );
}

/* 亮色模式 SVG 线条颜色更深 */
html.light .svg-line {
    stroke-opacity: 0.5;
}

html.light .svg-dot {
    opacity: 0.6;
}

html.light .slider-overlay {
    background: linear-gradient(90deg,
        rgba(247, 244, 239, 0.88) 0%,
        rgba(247, 244, 239, 0.55) 50%,
        rgba(247, 244, 239, 0.2) 100%
    );
}

/* 没有封面图时，亮色模式 overlay 更轻 */
html.light .slider-slide:not(:has(.slider-bg)) .slider-overlay {
    background: linear-gradient(90deg,
        rgba(247, 244, 239, 0.5) 0%,
        rgba(247, 244, 239, 0.2) 50%,
        rgba(247, 244, 239, 0.05) 100%
    );
}

/* ── Hero Dynamic Background - Light Mode ── */
html.light .hero-terminal::before {
    background:
        radial-gradient(circle 200px at 20% 40%, rgba(184, 125, 48, 0.1) 0%, transparent 70%),
        radial-gradient(circle 160px at 75% 30%, rgba(58, 142, 134, 0.08) 0%, transparent 70%),
        radial-gradient(circle 140px at 50% 80%, rgba(100, 90, 200, 0.06) 0%, transparent 70%),
        radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(0,0,0,0.05) 100%),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(184, 125, 48, 0.015) 2px,
            rgba(184, 125, 48, 0.015) 4px
        );
}

html.light .hero-svg-line {
    stroke-opacity: 0.5;
}

html.light .hero-svg-dot {
    opacity: 0.5;
}

/* ── Header Dynamic Background - Light Mode ── */
html.light .header-noise-layer {
    opacity: 0.04;
}

html.light .header-glow-bar::before {
    background: repeating-linear-gradient(90deg,
        transparent 0%,
        rgba(184, 125, 48, 0.5) 3%,
        rgba(58, 142, 134, 0.35) 7%,
        rgba(100, 90, 200, 0.4) 11%,
        rgba(201, 90, 125, 0.25) 15%,
        transparent 19%,
        transparent 33.33%
    );
}

html.light .header-glow-bar::after {
    background: repeating-linear-gradient(90deg,
        transparent 0%,
        rgba(184, 125, 48, 0.06) 3%,
        rgba(58, 142, 134, 0.05) 7%,
        rgba(100, 90, 200, 0.05) 11%,
        rgba(201, 90, 125, 0.03) 15%,
        transparent 19%,
        transparent 33.33%
    );
}