/* ==========================================================================
   CSS 变量 / 设计令牌 —— 全站主题统一管理
   --------------------------------------------------------------------------
   双主题：黑金（dark，默认） / 雅白（light）
   切换方式：<html data-theme="light">
   所有颜色必须通过令牌引用，禁止在业务样式里写死色值。
   ========================================================================== */

:root {
    /* ---------- 布局 / 间距 / 圆角（主题无关） ---------- */
    /* 圆角：4 档，取代此前 16 种散值 */
    --radius-sm: 4px;      /* 标签 / chip / 小徽标 */
    --radius-md: 8px;      /* 按钮 / 输入框 / 卡片（默认） */
    --radius-lg: 12px;     /* 头像 / 大卡片 / 浮层 */
    --radius-xl: 20px;     /* 大尺寸头像 / 胶囊 */
    --radius-full: 50%;    /* 头像 / 圆点 */

    /* 间距：4px 基准栅格。2px 为紧凑半档，仅用于 tag/chip 等密集元素 */
    --space-half: 2px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;   /* 区块级大间距 */
    --space-20: 80px;

    /* 字号：8 档 type scale */
    --text-xs: 12px;    /* 辅助说明 / 时间戳 */
    --text-sm: 13px;    /* 次要正文 */
    --text-base: 14px;  /* 正文（默认） */
    --text-md: 15px;    /* 表单输入 */
    --text-lg: 16px;    /* 卡片标题 */
    --text-xl: 18px;    /* 区块标题 */
    --text-2xl: 22px;   /* 页面标题 */
    --text-3xl: 28px;   /* 统计大数字 */
    --text-4xl: 36px;   /* 评分 / 强调数字 */
    --text-5xl: 48px;   /* 落地页 Hero 标题 */

    /* 行高：统一 unitless，避免与 px 混用 */
    --leading-tight: 1.4;    /* 标题 */
    --leading-normal: 1.6;   /* 正文（默认） */
    --leading-loose: 1.8;    /* 长文 / Markdown */

    /* 控件高度：3 档 */
    --control-sm: 32px;   /* 紧凑：表格行内按钮 */
    --control-md: 38px;   /* 标准：表单 / 工具栏 */
    --control-lg: 48px;   /* 门面页 / 主操作 */

    /* 字重：3 档 */
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;

    --header-height: 60px;
    --sidebar-width: 220px;
    --sidebar-collapsed-width: 60px;
    --content-max-width: 1400px;

    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;

    /* ---------- 排版 ---------- */
    --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
                        'Microsoft YaHei', sans-serif;
    --font-size-base: 14px;

    /* 让浏览器原生控件（下拉框、滚动条、日期选择器）跟随主题 */
    color-scheme: dark;
}

/* ==========================================================================
   主题一：黑金（默认）
   ========================================================================== */
:root,
html[data-theme="dark"] {
    color-scheme: dark;

    /* ---------- 主色：金 ---------- */
    --primary-color: #c9a86a;
    --primary-light: #e8c97a;
    --primary-dark: #9a7b46;
    --primary-gradient: linear-gradient(135deg, #e8c97a 0%, #c9a86a 50%, #a8894f 100%);
    --primary-gradient-hover: linear-gradient(135deg, #d9b979 0%, #c9a86a 100%);

    /* 金色文字：深色底上承载信息的金色，WCAG AA ≥4.5:1（#e8c97a on #17171c = 9.6:1） */
    --gold-text: #e8c97a;
    /* 金色填充之上的文字（金底深字，两套主题一致，7.7:1） */
    --on-primary: #1a1a1a;

    /* ---------- 功能色 ---------- */
    --success-color: #34d399;
    --warning-color: #e8c97a;
    --danger-color: #f87171;
    --info-color: #60a5fa;

    /* 功能色浅底（状态标签 / 趋势胶囊） */
    --success-bg: rgba(0, 184, 148, 0.10);
    --danger-bg: rgba(225, 112, 85, 0.10);
    --warning-bg: rgba(253, 203, 110, 0.15);
    --neutral-bg: rgba(178, 190, 195, 0.15);
    --info-bg: rgba(116, 185, 255, 0.15);

    /* ---------- 业务强调色（上传按钮 / 文件标签 / 操作链接） ---------- */
    --accent-red: #ff5722;
    --accent-orange: #ff8c42;
    --accent-green: #2dbd8e;
    --accent-blue: #4a90e2;
    --accent-purple: #7e57c2;
    --accent-cyan: #00cec9;
    /* 强调色填充之上的文字 */
    --on-accent: #ffffff;

    /* 状态文字色（保证在标签底色上可读） */
    --status-warn-text: #d4a017;
    --status-info-text: #0984e3;
    --status-neutral-text: #b8b4ac;

    /* ---------- 表面 / 背景 ---------- */
    --bg-page: #0f0f13;
    --bg-card: #17171c;
    --bg-sidebar: #0a0a0c;
    --bg-header: #131318;
    --bg-header-cell: #141419;   /* 表头 */
    --bg-input: #141419;         /* 输入框 / 下拉框 */
    --bg-elevated: #1d1d24;      /* 浮层：下拉面板 / 菜单 / 弹窗按钮 */
    --bg-menu: #1a1a20;          /* dropdown 菜单 */
    --bg-hover: #1d1d24;         /* 表格行 hover */
    --bg-sidebar-active: rgba(201, 168, 106, 0.16);

    /* ---------- 文字 ---------- */
    --text-primary: #ece9e3;
    --text-secondary: #b8b4ac;
    --text-placeholder: #8b877e;
    --text-inverse: #1a1a1a;

    /* ---------- 侧边栏 ---------- */
    --sidebar-text: rgba(255, 255, 255, 0.65);
    --sidebar-text-hover: #ffffff;
    --sidebar-text-active: #ffffff;
    --sidebar-text-strong: #ffffff;      /* Logo 文字 */
    --sidebar-hover-bg: rgba(255, 255, 255, 0.06);
    --sidebar-section-text: rgba(255, 255, 255, 0.35);
    --sidebar-divider: rgba(255, 255, 255, 0.08);
    --sidebar-border-color: transparent;

    /* ---------- 顶栏 ---------- */
    --header-border-color: transparent;

    /* ---------- 边框 ---------- */
    --border-color: #3a3a44;
    --border-strong: #4a4a56;
    /* 卡片描边：黑金靠阴影区分层级，无需描边 */
    --card-border-color: transparent;

    /* ---------- 阴影 ---------- */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
    --shadow-overlay: 0 8px 32px rgba(0, 0, 0, 0.6);
    --shadow-menu: 0 8px 28px rgba(0, 0, 0, 0.6);
    --shadow-select: 0 4px 16px rgba(0, 0, 0, 0.55);
    --shadow-glow: 0 0 0 4px rgba(201, 168, 106, 0.18);

    /* ---------- 遮罩 ---------- */
    --overlay-bg: rgba(0, 0, 0, 0.6);

    /* ---------- 落地页 / 门面页专用 ---------- */
    --bg-deep: #0a0a0c;                 /* 最深底色 */
    --bg-deep-2: #08080a;               /* 页脚 / 交替区块 */
    --bg-glass: rgba(10, 10, 12, 0.85); /* 半透明吸顶导航 */
    --brand-gradient: linear-gradient(160deg, #0a0a0c 0%, #141419 55%, #1a1610 100%);
    --brand-gradient-alt: linear-gradient(135deg, #141419 0%, #1a1610 100%);
    --on-brand: #ffffff;                /* 品牌渐变底之上的文字 */
    --on-brand-muted: rgba(255, 255, 255, 0.65);  /* 品牌渐变底之上的次要文字 */

    /* ---------- 金色透明度阶梯 ---------- */
    --gold-a04: rgba(201, 168, 106, 0.04);
    --gold-a06: rgba(201, 168, 106, 0.06);
    --gold-a08: rgba(201, 168, 106, 0.08);
    --gold-a10: rgba(201, 168, 106, 0.10);
    --gold-a12: rgba(201, 168, 106, 0.12);
    --gold-a14: rgba(201, 168, 106, 0.14);
    --gold-a16: rgba(201, 168, 106, 0.16);
    --gold-a18: rgba(201, 168, 106, 0.18);
    --gold-a22: rgba(201, 168, 106, 0.22);
    --gold-a25: rgba(201, 168, 106, 0.25);
    --gold-a30: rgba(201, 168, 106, 0.30);
    --gold-a35: rgba(201, 168, 106, 0.35);
    --gold-a40: rgba(201, 168, 106, 0.40);
    --gold-a45: rgba(201, 168, 106, 0.45);
    --gold-a50: rgba(201, 168, 106, 0.50);

    /* ---------- 图表（mermaid 等） ---------- */
    --chart-node: #1d1d24;
    --chart-text: #e8e8e8;
    --chart-canvas: #17171c;
}

/* ==========================================================================
   主题二：雅白（白底 + 金色点缀）
   --------------------------------------------------------------------------
   保留品牌金色作为「填充色」（金底深字，对比度 7.7:1），
   金色「文字」改用加深的青铜金 #8a6d3b（白底 4.84:1，满足 WCAG AA）。
   ========================================================================== */
html[data-theme="light"] {
    color-scheme: light;

    /* ---------- 主色：金 ---------- */
    --primary-color: #c9a86a;
    --primary-light: #e8c97a;
    --primary-dark: #8a6d3b;
    --primary-gradient: linear-gradient(135deg, #d8b878 0%, #c9a86a 55%, #b08d4f 100%);
    --primary-gradient-hover: linear-gradient(135deg, #c9a86a 0%, #b08d4f 100%);

    /* 白底 5.98:1；浅金底(--gold-a25) 4.78:1；品牌渐变浅端 4.91:1 —— 三处均达 AA */
    --gold-text: #7a5f31;
    --on-primary: #1a1a1a;     /* 金底之上仍是深字，7.7:1 */

    /* ---------- 功能色（加深以通过白底 AA） ---------- */
    --success-color: #097150;  /* 白底 6.0:1；--success-bg 底 5.3:1 */
    --warning-color: #8a5a00;  /* 5.9:1  */
    --danger-color: #c0392b;   /* 5.4:1  */
    --info-color: #1867b8;     /* 白底 5.7:1；--info-bg 底 5.0:1 */

    --success-bg: rgba(10, 127, 87, 0.10);
    --danger-bg: rgba(192, 57, 43, 0.10);
    --warning-bg: rgba(184, 88, 0, 0.12);
    --neutral-bg: rgba(122, 130, 141, 0.12);
    --info-bg: rgba(26, 111, 196, 0.10);

    /* ---------- 业务强调色（加深以通过白底 AA） ---------- */
    --accent-red: #d93a0f;     /* 4.6:1 */
    --accent-orange: #b85800;  /* 4.7:1 */
    --accent-green: #0a7f57;   /* 4.8:1 */
    --accent-blue: #1a6fc4;    /* 5.1:1 */
    --accent-purple: #6b46c1;  /* 6.4:1 */
    --accent-cyan: #0a7a76;    /* 5.2:1 */
    --on-accent: #ffffff;

    --status-warn-text: #8a5a00;
    --status-info-text: #1867b8;
    --status-neutral-text: #5c6470;

    /* ---------- 表面 / 背景 ---------- */
    --bg-page: #f4f5f7;
    --bg-card: #ffffff;
    --bg-sidebar: #ffffff;
    --bg-header: #ffffff;
    --bg-header-cell: #fafbfc;
    --bg-input: #ffffff;
    --bg-elevated: #f4f5f7;
    --bg-menu: #ffffff;
    --bg-hover: #f0f2f5;
    --bg-sidebar-active: rgba(201, 168, 106, 0.18);

    /* ---------- 文字 ---------- */
    --text-primary: #1f2329;    /* 15.8:1 */
    --text-secondary: #5c6470; /* 6.0:1  */
    --text-placeholder: #7a828d;/* 3.9:1  */
    --text-inverse: #ffffff;

    /* ---------- 侧边栏 ---------- */
    --sidebar-text: #5c6470;       /* 白底 6.0:1 */
    --sidebar-text-hover: #1f2329;
    --sidebar-text-active: #8a6d3b;
    --sidebar-text-strong: #1f2329;
    --sidebar-hover-bg: #f0f2f5;
    --sidebar-section-text: #6b7280;   /* 白底 4.82:1（AA，2.61 → 4.82） */
    --sidebar-divider: #e4e7ec;
    --sidebar-border-color: #e4e7ec;

    /* ---------- 顶栏 ---------- */
    --header-border-color: #e4e7ec;

    /* ---------- 边框 ---------- */
    --border-color: #e4e7ec;
    --border-strong: #cdd3dc;
    /* 卡片描边：白底上用浅灰描边界定卡片边界 */
    --card-border-color: #e4e7ec;

    /* ---------- 阴影（浅色投影，改用冷灰避免脏） ---------- */
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
    --shadow-lg: 0 10px 28px rgba(16, 24, 40, 0.12);
    --shadow-overlay: 0 12px 40px rgba(16, 24, 40, 0.16);
    --shadow-menu: 0 8px 28px rgba(16, 24, 40, 0.12);
    --shadow-select: 0 4px 16px rgba(16, 24, 40, 0.10);
    --shadow-glow: 0 0 0 4px rgba(201, 168, 106, 0.22);

    /* ---------- 遮罩 ---------- */
    --overlay-bg: rgba(16, 24, 40, 0.35);

    /* ---------- 落地页 / 门面页专用 ---------- */
    --bg-deep: #ffffff;
    --bg-deep-2: #f4f5f7;
    --bg-glass: rgba(255, 255, 255, 0.85);
    /* 品牌渐变：白底 + 极淡暖金，保留黑金版的高级层次感 */
    --brand-gradient: linear-gradient(160deg, #ffffff 0%, #f8f6f1 55%, #f1e8d5 100%);
    --brand-gradient-alt: linear-gradient(135deg, #ffffff 0%, #f5ecda 100%);
    --on-brand: #1f2329;                /* 浅色品牌底上改用深色文字 */
    --on-brand-muted: #5c6470;          /* 5.5:1 */

    /* ---------- 金色透明度阶梯（白底需加重才可见） ---------- */
    --gold-a04: rgba(201, 168, 106, 0.10);
    --gold-a06: rgba(201, 168, 106, 0.12);
    --gold-a08: rgba(201, 168, 106, 0.14);
    --gold-a10: rgba(201, 168, 106, 0.16);
    --gold-a12: rgba(201, 168, 106, 0.18);
    --gold-a14: rgba(201, 168, 106, 0.20);
    --gold-a16: rgba(201, 168, 106, 0.22);
    --gold-a18: rgba(201, 168, 106, 0.24);
    --gold-a22: rgba(201, 168, 106, 0.28);
    --gold-a25: rgba(201, 168, 106, 0.30);
    --gold-a30: rgba(201, 168, 106, 0.36);
    --gold-a35: rgba(201, 168, 106, 0.42);
    --gold-a40: rgba(201, 168, 106, 0.48);
    --gold-a45: rgba(201, 168, 106, 0.55);
    --gold-a50: rgba(201, 168, 106, 0.60);

    /* ---------- 图表 ---------- */
    --chart-node: #ffffff;
    --chart-text: #1f2329;
    --chart-canvas: #ffffff;
}