/* ================================================================
   暗色模式
   通过 [data-theme="dark"] 或系统 prefers-color-scheme 触发
   ================================================================ */

/* 用户手动切换优先 */
[data-theme="dark"] {
    --bg: #1a1817;
    --text: #e8e4df;
    --text-light: #9a9490;
    --border: #2e2a28;
    --accent: #d47262;
    --card-bg: #1e1c1b;
    --text-muted: #9a9490;
    --shadow-light: rgba(0,0,0,0.3);
    --footer-grad-top: #1e1c1b;
    --footer-grad-bottom: #161413;
}

/* 系统自动跟随（当未手动设置时） */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #1a1817;
        --text: #e8e4df;
        --text-light: #9a9490;
        --border: #2e2a28;
        --accent: #d47262;
        --card-bg: #1e1c1b;
        --text-muted: #9a9490;
        --shadow-light: rgba(0,0,0,0.3);
        --footer-grad-top: #1e1c1b;
        --footer-grad-bottom: #161413;
    }
}

/* ================================================================
   暗色模式覆盖样式
   ================================================================ */

[data-theme="dark"] body,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body {
        background: var(--bg);
        color: var(--text);
    }
}

/* 导航 */
[data-theme="dark"] .nav {
    background: rgba(26, 24, 23, 0.75);
    border-bottom-color: rgba(255,255,255,0.04);
}

/* Hero Slide 背景 */
[data-theme="dark"] .hero-slide-0 { background: #1a1817; }
[data-theme="dark"] .hero-slide-1 { background: #1d1b1a; }
[data-theme="dark"] .hero-slide-2 { background: #211e1c; }

[data-theme="dark"] .hero-slide-0 .bg-deco {
    color: rgba(212, 114, 98, 0.02);
}

/* 卡片 */
[data-theme="dark"] .services-grid .card,
[data-theme="dark"] .cases-grid .card,
[data-theme="dark"] .testimonials-grid .card,
[data-theme="dark"] .process-grid .step,
[data-theme="dark"] .value-card,
[data-theme="dark"] .case-page-card,
[data-theme="dark"] .insight-page-card,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .faq-page-item,
[data-theme="dark"] .blog-grid .post,
[data-theme="dark"] .team-grid .member,
[data-theme="dark"] .brand-wall .brand-item {
    background: rgba(255,255,255,0.02);
    border-color: var(--border);
}

[data-theme="dark"] .services-grid .card:hover,
[data-theme="dark"] .cases-grid .card:hover,
[data-theme="dark"] .value-card:hover,
[data-theme="dark"] .case-page-card:hover,
[data-theme="dark"] .insight-page-card:hover {
    background: rgba(255,255,255,0.04);
}

/* 输入框 */
[data-theme="dark"] .contact-form input,
[data-theme="dark"] .contact-form textarea,
[data-theme="dark"] .contact-form select {
    background: rgba(255,255,255,0.05);
    color: var(--text);
}

[data-theme="dark"] .contact-form input::placeholder,
[data-theme="dark"] .contact-form textarea::placeholder {
    color: rgba(255,255,255,0.3);
}

/* 按钮悬停 */
[data-theme="dark"] .hero-slide .actions .primary {
    background: var(--text);
    color: var(--bg);
}

/* 联系面板 */
[data-theme="dark"] .contact-panel {
    background: var(--card-bg);
}
[data-theme="dark"] .contact-panel-side {
    background: #161413;
    border-right-color: var(--border);
}
[data-theme="dark"] .contact-panel-form {
    background: var(--card-bg);
}
[data-theme="dark"] .cps-channel:hover {
    background: rgba(255, 255, 255, 0.04);
}

/* 轮播控制 */
[data-theme="dark"] .carousel-controls {
    background: rgba(26, 24, 23, 0.5);
}

/* 页脚 */
[data-theme="dark"] footer {
    border-top-color: var(--border);
}

/* F2 页脚暗色适配 */
[data-theme="dark"] .footer-v2,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .footer-v2 {
        background: linear-gradient(180deg, #1f1c1a 0%, #25201d 100%);
    }
}
[data-theme="dark"] .footer-v2::before,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .footer-v2::before {
        color: rgba(212, 114, 98, 0.05);
    }
}
[data-theme="dark"] .f2-hero,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .f2-hero {
        border-bottom-color: rgba(212, 114, 98, 0.15);
    }
}
[data-theme="dark"] .f2-contact,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .f2-contact {
        border-top-color: rgba(212, 114, 98, 0.2);
    }
}
[data-theme="dark"] .f2-foot,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .f2-foot {
        border-top-color: rgba(212, 114, 98, 0.15);
    }
}
[data-theme="dark"] .f2-nav-num,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .f2-nav-num {
        color: rgba(212, 114, 98, 0.35);
    }
}
[data-theme="dark"] .f2-social a,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .f2-social a {
        background: rgba(255, 255, 255, 0.04);
    }
}
[data-theme="dark"] .f2-sub-form input,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .f2-sub-form input {
        color: var(--text);
    }
}

/* F2b 左右分屏页脚暗色适配 */
[data-theme="dark"] .footer-v2b,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .footer-v2b {
        background: linear-gradient(180deg, #1f1c1a 0%, #25201d 100%);
    }
}
[data-theme="dark"] .fb2-left,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .fb2-left {
        border-right-color: rgba(212, 114, 98, 0.15);
    }
}
[data-theme="dark"] .fb2-bottom,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .fb2-bottom {
        border-top-color: rgba(212, 114, 98, 0.15);
    }
}
[data-theme="dark"] .fb2-cta-card,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .fb2-cta-card {
        background: rgba(255, 255, 255, 0.06);
    }
}
[data-theme="dark"] .fb2-social a,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .fb2-social a {
        background: rgba(255, 255, 255, 0.04);
    }
}

/* F4 海报式页脚暗色适配 */
[data-theme="dark"] .footer-v4,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .footer-v4 {
        background: linear-gradient(180deg, #1f1c1a 0%, #25201d 100%);
    }
}
[data-theme="dark"] .footer-v4::after,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .footer-v4::after {
        color: rgba(212, 114, 98, 0.05);
    }
}
[data-theme="dark"] .f4-action,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .f4-action {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(212, 114, 98, 0.15);
    }
}
[data-theme="dark"] .f4-contact,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .f4-contact {
        border-top-color: rgba(212, 114, 98, 0.15);
    }
}
[data-theme="dark"] .f4-foot,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .f4-foot {
        border-top-color: rgba(212, 114, 98, 0.15);
    }
}
[data-theme="dark"] .f4-social a,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .f4-social a {
        background: rgba(255, 255, 255, 0.04);
    }
}
[data-theme="dark"] .f4-nav a:hover,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .f4-nav a:hover {
        background: rgba(212, 114, 98, 0.12);
    }
}

/* F5 终端式页脚暗色适配（深色 body 下需加分隔） */
[data-theme="dark"] .footer-v5,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .footer-v5 {
        background: #151312;
        border-top: 2px solid rgba(212, 114, 98, 0.3);
    }
}

/* 案例详情信息行 */
[data-theme="dark"] .detail-info-row {
    border-bottom-color: rgba(255,255,255,0.04);
}

/* Modal */
[data-theme="dark"] .case-modal-overlay {
    background: rgba(0, 0, 0, 0.6);
}

/* ================================================================
   骨架屏
   ================================================================ */
.skeleton {
    background: linear-gradient(90deg, transparent 25%, rgba(0,0,0,0.04) 50%, transparent 75%);
    background-size: 200% 100%;
    animation: skeleton-wave 1.5s ease-in-out infinite;
    border-radius: 4px;
}
@keyframes skeleton-wave {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-h1 { width: 60%; height: 32px; margin-bottom: 16px; }
.skeleton-h2 { width: 40%; height: 24px; margin-bottom: 24px; }
.skeleton-text { width: 100%; height: 14px; margin-bottom: 8px; }
.skeleton-text.short { width: 70%; }
.skeleton-card { height: 180px; border-radius: 8px; background: rgba(0,0,0,0.03); }
.skeleton-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.loaded .skeleton { display: none; }

.loaded .skeleton { display: none; }


/* 暗色模式切换按钮 —— 暗色态统一样式（基底由 style.css 提供） */
[data-theme="dark"] .back-to-top,
[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .contact-fab {
    background: rgba(26, 24, 23, 0.7);
    color: #cfc8c0;
    border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .back-to-top:hover,
[data-theme="dark"] .theme-toggle:hover,
[data-theme="dark"] .contact-fab:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(26, 24, 23, 0.92);
}