/**
 * 前端公共主题变量（唯一维护点，页面样式统一引用变量，不写死颜色）：
 * 调整品牌色只需改这里，全局生效。各端页面 <link> 引入本文件后直接使用 var(--xxx)。
 * 业务约定：新增/保存按钮使用 --primary；success 绿色仅用于状态，不作为新增按钮
 */
:root {
    /* 品牌深色：导航栏、侧边栏、标题强调，禁止用于业务操作按钮 */
    --brand-dark: #1d3b66;
    /* 交互主色：新增、保存、链接、输入框焦点 */
    --primary: #2a5298;
    --primary-dark: #234682;   /* 主按钮 hover 加深 */
    --primary-outline: rgba(42, 82, 152, 0.1);

    --danger: #c0392b;         /* 错误红：删除操作 / 失败提示 */
    --danger-dark: #a93226;    /* 删除按钮 hover 深红 */
    --danger-outline: rgba(192, 57, 43, 0.12);

    --success: #27ae60;        /* 成功绿：成功提示 / 启用 / 通过 */
    --success-dark: #1e8449;   /* 成功绿 hover */

    --on-primary: #fff;        /* 深色组件上的文字：主按钮、顶栏白色文字 */

    --bg: #f0f2f5;             /* 页面浅灰背景 */
    --card-bg: #fff;           /* 卡片背景 */
    --border: #e8e8e8;         /* 分隔线 / 表格边框（浅） */
    --border-strong: #cfcfcf;  /* 输入框 / 按钮描边（比 --border 深一档） */

    --text-strong: #333;       /* 主要文字 */
    --text-main: #555;         /* 正文 / 次级文字 */
    --text-light: #888;        /* 弱化文字 */
    --text-muted: #999;        /* 占位 / 空态文字 */

    --disable-bg: #e5e6eb;
    --disable-text: #b8b9be;

    --hover-bg: var(--primary-outline); /* 悬停浅蓝背景（基于主色浅底） */
    --th-bg: #f7f9fc;          /* 表格表头背景 */

    /* tag 标签：背景+文字成对 */
    --tag-success-bg: #e8f7ee;
    --tag-success-text: #107c36;
    --tag-fail-bg: #fdecea;
    --tag-fail-text: #b4281a;
    --tag-info-bg: #eef2fb;
    --tag-info-text: #204285;
    --tag-warn-bg: #fdf6ec;
    --tag-warn-text: #b9770e;

    /* ========== 间距系统 ========== */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
    --space-xxl: 24px;

    /* ========== 圆角 ========== */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-xl: 8px;

    /* ========== 阴影 ========== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
    --shadow-md: 0 2px 12px rgba(0, 0, 0, .12);

    /* ========== 字体字号 ========== */
    --font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-size-xs: 13px;
    --font-size-sm: 12px;
    --font-size-base: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --line-height-sm: 1.3;
    --line-height-base: 1.5;

    /* ========== 层级 z-index ========== */
    --z-index-dropdown: 100;
    --z-index-modal: 1000;
    --z-index-toast: 2000;

    /* ========== 动画过渡 ========== */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;

    /* ========== focus 聚焦外发光 ========== */
    --focus-ring: 0 0 0 2px var(--primary-outline);
}

/* ========== 深色主题（html[data-theme="dark"] 覆盖） ==========
 * 主题切换逻辑见 common/js/common.js 的 THEME 模块（admin 与 store 分开记忆，存储 key 不同）。
 * 选择器用 html[data-theme]，优先级高于各端 base.css 对 :root 的覆盖（store 品牌色除外，
 * store 的深色品牌色在其 base.css 中按同样选择器覆盖，见 store/css/base.css）。
 * admin 品牌色默认走本文件；store 端页面需在 base.css 追加 html[data-theme="dark"] 覆盖。
 */
html[data-theme="dark"] {
    /* 品牌色提亮一档：深色下作顶栏/标题强调，保持品牌辨识度（浅色默认值不变） */
    --brand-dark: #5471a8;
    --primary: #5b8dd9;
    --primary-dark: #4a7ac4;
    --primary-outline: rgba(91, 141, 217, 0.18);

    --danger: #e0604f;
    --danger-dark: #c94a3a;
    --danger-outline: rgba(224, 96, 79, 0.18);

    --success: #4cc38a;
    --success-dark: #3aa875;

    --on-primary: #fff;          /* 顶栏/主按钮白字保持不变 */

    --bg: #1a1d23;               /* 页面深色背景 */
    --card-bg: #23262e;          /* 卡片背景 */
    --border: #2e323b;           /* 分隔线 / 表格边框（浅） */
    --border-strong: #3d424c;    /* 输入框 / 按钮描边 */

    --text-strong: #e8eaee;      /* 主要文字 */
    --text-main: #c3c8d2;        /* 正文 / 次级文字 */
    --text-light: #8d94a1;       /* 弱化文字 */
    --text-muted: #6b7280;       /* 占位 / 空态文字 */

    --disable-bg: #2c303a;
    --disable-text: #6b7280;

    --hover-bg: rgba(91, 141, 217, 0.12);
    --th-bg: #2a2e37;            /* 表格表头背景 */

    /* tag 标签：深色下背景加深、文字提亮，保持可读 */
    --tag-success-bg: #123823;
    --tag-success-text: #5fd698;
    --tag-fail-bg: #3d1c18;
    --tag-fail-text: #ef8b7c;
    --tag-info-bg: #1c2a44;
    --tag-info-text: #7ea3e8;
    --tag-warn-bg: #3d2e14;
    --tag-warn-text: #e0a23e;

    /* store 端页面背景（store/css/base.css 定义了 --page-bg，深色下同样调暗） */
    --page-bg: #171a1f;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 2px 12px rgba(0, 0, 0, .5);

    /* 原生控件（滚动条/日期选择等）跟随深色 */
    color-scheme: dark;
}

/* 组件级深色覆盖：无法用变量的硬编码颜色统一在此兜底 */
/* admin 内容区切换遮罩：浅色为白罩，深色下用暗罩避免闪白 */
html[data-theme="dark"] .content-loading { background: rgba(0, 0, 0, .55); }