/* ============================================================
   ETF量化投研系统 — 主题变量（浅色 / 深色）
   使用 :root 定义浅色，.dark 定义深色，CSS 变量切换
   ============================================================ */

:root {
    --bg-primary: #f0f2f5;
    --bg-white: #ffffff;
    --bg-card: #ffffff;
    --bg-sidebar: #f0f2f5;
    --bg-input: #ffffff;
    --text-primary: #1a1a2e;
    --text-secondary: #636e72;
    --text-muted: #999;
    --border: #e8ecf1;
    --border-light: #eee;
    --dark-header: #1a1a2e;
    --nav-hover: #16213e;
    --accent: #4a90d9;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --table-stripe: #f8f9fa;
    --table-hover: #f8f9fa;
    --success-bg: #e8f5e9;
    --warning-bg: #fff3e0;
    --danger-bg: #ffebee;
    --info-bg: #e3f2fd;
    --btn-bg: #fff;
    --btn-border: #ddd;
    --risk-bar-bg: #fff3e0;
    --risk-bar-border: #f57c00;
    --risk-bar-text: #e65100;
    --detail-cell-bg: #fafbfc;
    --detail-item-bg: #fff;
    --detail-row-bg: #fafbfc;
    --nb-card-bg: #fff;
    --status-bar-bg: linear-gradient(135deg, #1a1a2e, #0f3460);
    --header-bg: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

html.dark {
    --bg-primary: #0f1117;
    --bg-white: #161822;
    --bg-card: #1a1d2e;
    --bg-sidebar: #13151f;
    --bg-input: #1e2133;
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0b0;
    --text-muted: #666;
    --border: #2a2d3e;
    --border-light: #252838;
    --dark-header: #0d0f18;
    --nav-hover: #1a1d2e;
    --accent: #5b9bd5;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --table-stripe: #1a1d2e;
    --table-hover: #1e2133;
    --success-bg: #1b3a1b;
    --warning-bg: #3a2e1b;
    --danger-bg: #3a1b1b;
    --info-bg: #1b2e3a;
    --btn-bg: #1e2133;
    --btn-border: #2a2d3e;
    --risk-bar-bg: #2a2010;
    --risk-bar-border: #e65100;
    --risk-bar-text: #ff9800;
    --detail-cell-bg: #13151f;
    --detail-item-bg: #1a1d2e;
    --detail-row-bg: #13151f;
    --nb-card-bg: #1a1d2e;
    --status-bar-bg: linear-gradient(135deg, #0d0f18, #161822);
    --header-bg: linear-gradient(135deg, #0d0f18 0%, #121524 50%, #0f1324 100%);
}

/* 主题切换按钮 */
.theme-toggle {
    width: 32px; height: 32px; border: 1px solid rgba(255,255,255,0.2);
    background: transparent; color: #f39c12; border-radius: 50%;
    cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center;
    transition: all 0.2s; padding: 0; line-height: 1;
}
.theme-toggle:hover { background: rgba(255,255,255,0.1); color: #ffc107; }
html.dark .theme-toggle { color: #ffc107; }

/* ── 移动端基础样式 ── */
@media screen and (max-width: 768px) {
    :root {
        --font-size-xs: 11px;
        --font-size-sm: 12px;
        --font-size-base: 14px;
        --font-size-lg: 16px;
        --font-size-xl: 18px;
        --spacing-xs: 4px;
        --spacing-sm: 8px;
        --spacing-md: 12px;
        --spacing-lg: 16px;
        --spacing-xl: 20px;
        --border-radius-sm: 6px;
        --border-radius-md: 8px;
        --border-radius-lg: 10px;
    }

    body {
        font-size: var(--font-size-base);
        line-height: 1.5;
    }
}