/* ═══════════════════════════════════════════
   叶动 AutoBox - Theme System (shared)
   Default: dark | Toggle: data-theme="light"
   ═══════════════════════════════════════════ */

/* ── Light Theme Variables ── */
[data-theme="light"] {
    --primary: #059669;
    --primary-light: #10b981;
    --primary-dark: #047857;
    --primary-glow: rgba(5, 150, 105, 0.1);
    --bg-base: #f8f9fc;
    --bg-card: #ffffff;
    --bg-card-hover: #f1f3f8;
    --bg-elevated: #ffffff;
    --bg-input: #f1f3f8;
    --text-primary: #1a1a2e;
    --text-secondary: #5a5a72;
    --text-muted: #9494a3;
    --text-inverse: #ffffff;
    --border: #e2e4ec;
    --border-light: #eef0f6;
    --success: #059669;
    --warning: #d97706;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.1);
    --shadow-glow: 0 0 40px rgba(5,150,105,0.06);
}

/* ── Theme Toggle Button ── */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.25s var(--ease-out);
    flex-shrink: 0;
}
.theme-toggle:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-glow);
}
.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
    transition: opacity 0.25s, transform 0.3s var(--ease-spring);
}
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: inline; }
[data-theme="light"] .theme-toggle .icon-sun { display: inline; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* ── Mobile: 主题切换按钮与菜单按钮一起靠右对齐 ── */
@media (max-width: 768px) {
    .nav-inner { gap: 8px; }
    /* auto 外边距会吸走全部剩余空间，使 space-between 失效，
       从而把 logo 顶到最左、切换按钮与汉堡按钮收拢到最右 */
    .theme-toggle { margin-left: auto; }
}

/* ── Light theme specific overrides ── */
[data-theme="light"] .nav {
    background: rgba(248,249,252,0.88);
    border-bottom-color: var(--border-light);
}
[data-theme="light"] .nav-mobile-btn {
    background: var(--bg-card);
    border-color: var(--border);
}
[data-theme="light"] .nav-links {
    /* mobile dropdown */
}
@media (max-width: 768px) {
    [data-theme="light"] .nav-links {
        background: rgba(248,249,252,0.98);
        border-bottom-color: var(--border);
    }
}
[data-theme="light"] .hero::before {
    background:
        radial-gradient(ellipse 600px 400px at 30% 30%, rgba(5,150,105,0.06), transparent),
        radial-gradient(ellipse 400px 300px at 70% 60%, rgba(59,130,246,0.04), transparent);
}
[data-theme="light"] .hero h1 {
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--primary) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
[data-theme="light"] .section-alt { background: #f1f3f8; }
[data-theme="light"] .chat-window {
    background: var(--bg-card);
    border-color: var(--border);
    box-shadow: var(--shadow-md);
}
[data-theme="light"] .chat-log { background: #f8f9fc; }
[data-theme="light"] .msg.user {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
}
[data-theme="light"] .msg.bot {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-primary);
}
[data-theme="light"] .chat-input {
    border-top-color: var(--border);
    background: var(--bg-card);
}
[data-theme="light"] .chat-input input {
    background: var(--bg-input);
    border-color: var(--border);
    color: var(--text-primary);
}
[data-theme="light"] .chat-input button { background: var(--primary); }
[data-theme="light"] .chat-sidebar {
    background: #f8f9fc;
    border-right-color: var(--border);
}
[data-theme="light"] .chat-sidebar li { color: var(--text-secondary); }
[data-theme="light"] .chat-sidebar li:hover,
[data-theme="light"] .chat-sidebar li.active {
    background: var(--primary-glow);
    color: var(--primary);
}
[data-theme="light"] .attach-title { color: var(--text-primary); }
[data-theme="light"] .mini-table th { background: #f1f3f8; color: var(--text-secondary); }
[data-theme="light"] .mini-table td { border-color: var(--border); color: var(--text-primary); }
[data-theme="light"] .chip {
    background: var(--primary-glow);
    color: var(--primary);
    border-color: rgba(5,150,105,0.2);
}
[data-theme="light"] .service-card {
    background: var(--bg-card);
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}
[data-theme="light"] .service-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md), 0 0 30px rgba(5,150,105,0.08);
}
[data-theme="light"] .feature-card {
    background: var(--bg-card);
    border-color: var(--border);
}
[data-theme="light"] .feature-card:hover { border-color: var(--primary); }
[data-theme="light"] .case-card {
    background: var(--bg-card);
    border-color: var(--border);
}
[data-theme="light"] .case-card:hover { border-color: var(--primary); }
[data-theme="light"] .footer {
    background: #f1f3f8;
    border-top-color: var(--border);
}
[data-theme="light"] .footer-bottom { border-top-color: var(--border); }
[data-theme="light"] .modal-overlay { background: rgba(0,0,0,0.3); }
[data-theme="light"] .modal {
    background: var(--bg-card);
    border-color: var(--border);
    box-shadow: var(--shadow-lg);
}
[data-theme="light"] .roadmap-step {
    background: var(--bg-card);
    border-color: var(--border);
}
[data-theme="light"] .roadmap-step:hover { border-color: var(--primary); }
[data-theme="light"] .roadmap-step .step-num {
    background: var(--primary-glow);
    color: var(--primary);
}
[data-theme="light"] .step-arrow { color: var(--border); }
[data-theme="light"] .demo-iframe-wrap iframe {
    border-color: var(--border);
    background: var(--bg-card);
    box-shadow: var(--shadow-md);
}

/* ── Smooth transition for theme switch ── */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}