/* =========================================================
   乐宸科技官网 · 明/暗双主题（内容无关的纯实现升级）
   本文件不改动任何对外宣传文案/结构，仅补充主题令牌与切换控件样式。
   默认继承 main.css 的 :root（暗色）；[data-theme="light"] 覆盖为亮色。
   ========================================================= */

:root { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }

/* ---------- 亮色令牌（仅覆盖需要翻转的基元） ---------- */
[data-theme="light"] {
    --text: #14181d;
    --muted: #5b636e;
    --muted-2: #8a9099;
    --line: rgba(17, 20, 24, 0.12);
    /* 强调色在亮底上略加深以保证对比 */
    --cyan: #0bb3ab;
    --blue: #4f63e6;
    --violet: #7c3aed;
    --pink: #e23a86;
    --amber: #c98a1e;
    --green: #2f9e54;
    --ink: #ffffff;
}

/* ---------- 页面底色（暗色由 main.css 的 body 渐变提供，这里仅覆盖亮色） ---------- */
[data-theme="light"] body {
    background:
        radial-gradient(ellipse at 10% 2%, rgba(124, 140, 255, 0.16), transparent 34rem),
        radial-gradient(ellipse at 90% 12%, rgba(52, 215, 208, 0.12), transparent 30rem),
        radial-gradient(ellipse at 54% 52%, rgba(159, 107, 255, 0.07), transparent 36rem),
        linear-gradient(180deg, #f3f5fa 0%, #eef1f7 48%, #f5f7fb 100%);
}

/* ---------- 导航（亮色玻璃） ---------- */
[data-theme="light"] .site-nav {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.55));
    box-shadow: 0 18px 60px rgba(20, 24, 40, 0.08);
}

/* ---------- 玻璃卡片 → 亮色玻璃（与暗色对称的浅色面板） ---------- */
[data-theme="light"] .command-panel,
[data-theme="light"] .product-card,
[data-theme="light"] .os-card,
[data-theme="light"] .service-row,
[data-theme="light"] .contact-card,
[data-theme="light"] .qr-panel,
[data-theme="light"] .diagnostic-tool,
[data-theme="light"] .about-values {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.72)),
        linear-gradient(135deg, rgba(52, 215, 208, 0.06), rgba(159, 107, 255, 0.07));
    border-color: rgba(17, 20, 24, 0.10);
    box-shadow: 0 24px 70px rgba(20, 24, 40, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

[data-theme="light"] .command-panel {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.78)),
        radial-gradient(ellipse at 50% 16%, rgba(52, 215, 208, 0.18), transparent 18rem),
        linear-gradient(135deg, rgba(52, 215, 208, 0.07), rgba(159, 107, 255, 0.09));
    box-shadow: 0 30px 90px rgba(20, 24, 40, 0.12), 0 0 60px rgba(52, 215, 208, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ---------- 指标带（亮色浅面） ---------- */
[data-theme="light"] .metrics-band {
    background:
        linear-gradient(90deg, rgba(52, 215, 208, 0.07), transparent 38%, rgba(159, 107, 255, 0.07)),
        rgba(17, 20, 24, 0.025);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
}

/* ---------- 渐变文字：去掉纯白起止，避免亮底不可见 ---------- */
[data-theme="light"] h1 {
    background: linear-gradient(112deg, var(--blue) 0%, #0bb3ab 30%, var(--violet) 70%, var(--blue) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 40px rgba(52, 215, 208, 0.18);
}

[data-theme="light"] .metric strong {
    background: linear-gradient(135deg, var(--blue), var(--cyan), var(--violet));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- 区块标题（暗色默认 #fff，亮底需翻成深色，否则不可见） ---------- */
[data-theme="light"] h2 {
    color: var(--text);
    text-shadow: 0 0 30px rgba(124, 140, 255, 0.10);
}

/* ---------- 诊断工具选项按钮（暗底用白边，亮底需换成深灰边才可见） ---------- */
[data-theme="light"] .tool-option {
    border-color: rgba(17, 20, 24, 0.12);
    background: rgba(17, 20, 24, 0.035);
}

/* =========================================================
   英雄区「隔离」：亮色主题下整段英雄仍保持暗底
   （bg 是字面量 #05070c，不随主题翻转；因此把暗色令牌
    重新绑定到英雄作用域内，避免文字翻成深色后暗底不可读）
   ========================================================= */
[data-theme="light"] .hero-section {
    --text: #f7f4ec;
    --muted: #a6adb5;
    --muted-2: #a6adb5;
    --cyan: #34d7d0;
    --blue: #7c8cff;
    --violet: #9f6bff;
    --pink: #ff5ea8;
    --amber: #e0a83a;
    --green: #3ad17e;
    --line: rgba(255, 255, 255, 0.14);
    color: var(--text);
}

/* 英雄区内的命令面板（右侧「AI 指挥台」）在亮色主题下仍用暗玻璃，与暗英雄一致 */
[data-theme="light"] .hero-section .command-panel {
    border-color: rgba(52, 215, 208, 0.34);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.045)),
        radial-gradient(ellipse at 50% 16%, rgba(52, 215, 208, 0.22), transparent 18rem),
        linear-gradient(135deg, rgba(52, 215, 208, 0.07), rgba(159, 107, 255, 0.09));
    box-shadow: 0 34px 110px rgba(0, 0, 0, 0.52), 0 0 82px rgba(52, 215, 208, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* ---------- 主题切换按钮（图标型，不新增对外文案） ---------- */
.theme-toggle { position: relative; overflow: hidden; }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle { background: rgba(17, 20, 24, 0.05); }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }

/* ---------- 主题切换的平滑过渡（仅颜色类属性，不影响交互 transform） ---------- */
body,
.site-nav,
.command-panel,
.product-card,
.os-card,
.service-row,
.contact-card,
.qr-panel,
.diagnostic-tool,
.about-values,
.metrics-band {
    transition: background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease;
}

/* ---------- 尊重「减少动态效果」偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
    body,
    .site-nav,
    .command-panel,
    .product-card,
    .os-card,
    .service-row,
    .contact-card,
    .qr-panel,
    .diagnostic-tool,
    .about-values,
    .metrics-band {
        transition: none !important;
    }
}