/* ============================================================
   系规必背 · 主题变量系统
   支持：暗色主题（默认）/ 亮色主题
   ============================================================ */

/* ========== 暗色主题（默认） ========== */
:root,
[data-theme="dark"] {
    /* 主色调 — 紫蓝霓虹 */
    --primary: #4F46E5;
    --primary-light: rgba(79, 70, 229, 0.1);
    --primary-dark: #4338CA;
    --primary-gradient: linear-gradient(135deg, #4F46E5 0%, #6366F1 50%, #7C3AED 100%);

    /* 语义色 */
    --success: #10B981;
    --success-gradient: linear-gradient(135deg, #059669, #047857);
    --warning: #F59E0B;
    --danger: #EF4444;

    /* 背景 — 深邃暗色 */
    --body-bg: #020308;
    --bg: #070810;
    --bg-gradient: linear-gradient(180deg, #070810 0%, #0A0C18 40%, #070810 100%);

    /* 卡片 */
    --card: #11121E;
    --card-elevated: #161828;
    --card-glass: rgba(17, 18, 30, 0.85);

    /* 文字 */
    --text: #E8EAF6;
    --text-secondary: #8B8FA8;
    --text-muted: #5A5F7D;

    /* 边框 */
    --border: #1E2035;
    --border-light: #252840;

    /* 阴影 */
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 20px rgba(79, 70, 229, 0.12);
    --shadow-btn: 0 4px 14px rgba(79, 70, 229, 0.35);
    --shadow-btn-hover: 0 6px 20px rgba(79, 70, 229, 0.45);

    /* 金色 */
    --gold: #F59E0B;
    --gold-light: rgba(245, 158, 11, 0.1);

    /* 其他 */
    --nav-bg: rgba(17, 18, 30, 0.92);
    --input-bg: rgba(255, 255, 255, 0.04);
    --input-border: rgba(255, 255, 255, 0.08);
    --divider: rgba(255, 255, 255, 0.06);
}

/* ========== 亮色主题 ========== */
[data-theme="light"] {
    --primary: #4F46E5;
    --primary-light: rgba(79, 70, 229, 0.08);
    --primary-dark: #4338CA;
    --primary-gradient: linear-gradient(135deg, #4F46E5 0%, #6366F1 50%, #7C3AED 100%);
    --success: #059669;
    --success-gradient: linear-gradient(135deg, #059669, #047857);
    --warning: #D97706;
    --danger: #DC2626;
    --body-bg: #E0E4F0;
    --bg: #F0F2F8;
    --bg-gradient: linear-gradient(180deg, #E8ECF4 0%, #F0F2F8 40%, #E8ECF4 100%);
    --card: #FFFFFF;
    --card-elevated: #F8F9FC;
    --card-glass: rgba(255, 255, 255, 0.92);
    --text: #1A1D2E;
    --text-secondary: #5A6080;
    --text-muted: #8B8FA8;
    --border: #E0E3F0;
    --border-light: #EAECF5;
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.15);
    --shadow-glow: 0 0 20px rgba(79, 70, 229, 0.08);
    --shadow-btn: 0 4px 14px rgba(79, 70, 229, 0.3);
    --shadow-btn-hover: 0 6px 20px rgba(79, 70, 229, 0.4);
    --gold: #D97706;
    --gold-light: rgba(217, 119, 6, 0.08);
    --nav-bg: rgba(255, 255, 255, 0.92);
    --input-bg: rgba(0, 0, 0, 0.03);
    --input-border: rgba(0, 0, 0, 0.08);
    --divider: rgba(0, 0, 0, 0.06);
}

/* ========== 亮色主题外部容器覆写 ========== */
[data-theme="light"] .phone-frame {
    box-shadow:
        0 0 0 6px #D0D4E0,
        0 0 0 8px #C8CCD8,
        0 0 0 9px #BEC2D0,
        0 30px 80px rgba(0, 0, 0, 0.18);
}

[data-theme="light"] .demo-label {
    background: rgba(0, 0, 0, 0.06);
    color: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .prototype-badge {
    border: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .toast {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .app-header::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.03) 0%, transparent 60%);
}

[data-theme="light"] .app-header .header-icon {
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .app-header .header-icon:active {
    background: rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .theme-toggle-track {
    background: #D1D5DB;
}

[data-theme="light"] .theme-toggle-thumb {
    transform: translateX(22px);
    background: #4F46E5;
    box-shadow: 0 1px 6px rgba(79, 70, 229, 0.35);
}

[data-theme="light"] .theme-label-dark { opacity: 0.4; }
[data-theme="light"] .theme-label-light { opacity: 1; }

/* ========== 全局过渡 ========== */
.phone-frame, .card, .purchase-card, .license-card,
.gen-btn, .btn, .status-bar, .header-main, .bottom-nav,
.setting-row, .progress-strip, .chapter-panel,
.activate-input-wrapper, .buy-guide {
    transition: background 0.35s ease, border-color 0.35s ease,
                box-shadow 0.35s ease, color 0.35s ease;
}