/* ============================================================
 * variables.css — 设计 Token（CSS 变量）
 * 来源：docs/phase2-ui-design.md 第 4 章「原样落地」
 * 约束：全站只允许引用本文件变量，不允许散落魔法值；
 *       契约基线（phase3-contract-baseline.md）与 UI 稿冲突时以契约为准。
 * 增补项均以 [增补] 注释标明来源，未改动 UI 第 4 章任何既有值。
 * ============================================================ */

:root {
  /* ===== 主色（品牌蓝）===== */
  --color-primary:          #1E5EFF;   /* 主按钮、当前导航、链接、聚焦边框 */
  --color-primary-hover:    #1748CC;   /* 主色 hover */
  --color-primary-active:   #123A9E;   /* 主色按下 */
  --color-primary-light:    #EAF0FF;   /* 主色浅底：选中行底、聚焦光晕、信息提示条 */

  /* ===== 辅色 ===== */
  --color-secondary:        #0E9F6E;   /* 辅助绿：完成态、图表点缀 */
  --color-accent:           #6E56CF;   /* 强调紫：图表第二系列、徽章点缀 */

  /* ===== 中性色 ===== */
  --color-bg:               #F5F6F8;   /* 页面背景 */
  --color-surface:          #FFFFFF;   /* 卡片/表格/模态底色 */
  --color-surface-hover:    #F0F3F8;   /* 表格行/列表项 hover 底 */
  --color-surface-disabled: #EEF0F3;   /* 禁用底 */
  --color-border:           #DCE0E6;   /* 常规边框 */
  --color-border-strong:    #C3C9D4;   /* 强边框：输入框默认态 */
  --color-text:             #1F2329;   /* 主文本 */
  --color-text-secondary:   #646A73;   /* 次级文本：标签、说明 */
  --color-text-placeholder: #A0A6AD;   /* 占位符 */
  --color-text-inverse:     #FFFFFF;   /* 主色底上的文字 */

  /* ===== 状态色（匹配判定/操作反馈）===== */
  --color-success:          #0E9F6E;   /* ✅ 符合 */
  --color-success-bg:       #E6F6F0;
  --color-warning:          #F79009;   /* ⚠️ 待确认 */
  --color-warning-bg:       #FFF4E5;
  --color-danger:           #E5484D;   /* ❌ 不符合 / 删除 / 错误 */
  --color-danger-bg:        #FDECEC;
  --color-info:             #1E5EFF;   /* 提示（与主色一致） */
  --color-info-bg:          #EAF0FF;

  /* ===== 人工修改高亮（用户硬性需求，全站统一）===== */
  --color-modified:         #FFF3C4;   /* 人工修改字段黄底 */
  --color-modified-border:  #F5C542;   /* 人工修改字段黄边框 */
  --color-modified-text:    #7A5C00;   /* 黄底上的文字色（保证对比度） */

  /* ===== 骨架屏 ===== */
  --color-skeleton:         #E8EBEF;   /* 骨架块底色 */
  --color-skeleton-shine:   #F5F6F8;   /* 骨架呼吸高亮 */

  /* ===== 字体（本地字体栈，禁止外链字体，离线约束）===== */
  --font-family: "Microsoft YaHei", "微软雅黑", "Segoe UI", "PingFang SC", sans-serif;
  --font-family-mono: "Consolas", "Courier New", monospace;  /* 合同编号、账号 */

  /* 字号 */
  --font-size-xs:   12px;   /* 辅助说明、tooltip、错误提示 */
  --font-size-sm:   13px;   /* 表头、标签、次级信息 */
  --font-size-md:   14px;   /* 正文基准：表格单元格、输入框 */
  --font-size-lg:   16px;   /* 卡片标题、模态标题次级 */
  --font-size-xl:   18px;   /* 页面主标题 */
  --font-size-xxl:  28px;   /* 仪表盘大数字 */

  /* 字重 */
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;

  /* 行高 */
  --line-height-tight: 1.4;
  --line-height-normal: 1.6;

  /* ===== 间距（4px 基数）===== */
  --space-1: 4px;   /* 图标与文字间距 */
  --space-2: 8px;   /* 表单项纵向间距 */
  --space-3: 12px;  /* 筛选控件间距、表格单元格左右 padding */
  --space-4: 16px;  /* 卡片间距、卡片内边距 */
  --space-5: 20px;  /* 表单分组间距 */
  --space-6: 24px;  /* 页面左右 padding、卡片大内边距 */
  --space-8: 32px;  /* 登录卡片内边距、页面标题下间距 */

  /* ===== 圆角 ===== */
  --radius-sm:   4px;    /* 输入框、小标签、进度条内元素 */
  --radius-md:   8px;    /* 卡片、模态、表格容器 */
  --radius-lg:   12px;   /* 上传拖拽区、大浮层 */
  --radius-full: 999px;  /* 徽章、开关、圆点 */

  /* ===== 阴影 ===== */
  --shadow-sm: 0 1px 2px rgba(31, 35, 41, 0.06);              /* 卡片静止 */
  --shadow-md: 0 4px 12px rgba(31, 35, 41, 0.08);             /* 卡片 hover、下拉 */
  --shadow-lg: 0 8px 24px rgba(31, 35, 41, 0.12);             /* 模态、抽屉 */
  --shadow-overlay: 0 0 0 1px rgba(31,35,41,0.04), 0 8px 24px rgba(31,35,41,0.12);

  /* ===== 过渡 ===== */
  --transition-fast: 150ms ease;   /* hover、聚焦、按钮 */
  --transition-normal: 250ms ease; /* 折叠展开、tab 切换 */
  --spinner-duration: 1s;          /* spinner 旋转周期 */

  /* ===== 布局 ===== */
  --header-height: 56px;
  --content-max-width: 1440px;
  --table-row-height: 48px;
  --input-height: 40px;
  --modal-width-payment: 560px;
  --modal-width-login: 400px;

  /* ===== [增补] 以下变量为 UI 第 4 章之外的落地必要增补 ===== */

  /* 页面主标题 20px/600（UI 第 2 章全局框架："页面标题 20px/600"，
     UI 第 4 章字号表最大为 xxl 28px，无 20px 档，故增补） */
  --font-size-page-title: 20px;

  /* 登录页品牌区系统名 24px/600（UI 3.1 线框图标注，第 4 章字号表无 24px 档，增补） */
  --font-size-brand: 24px;

  /* 层级 z-index 阶梯（UI 6.1 仅规定 topnav z-index:100，其余按浮层关系推导） */
  --z-index-topnav: 100;    /* 顶部导航 sticky */
  --z-index-dropdown: 200;  /* 导航用户下拉等浮层 */
  --z-index-modal: 1000;    /* 模态/抽屉 */
  --z-index-toast: 1100;    /* toast 提示 */

  /* 顶部导航用户区头像圆点尺寸（UI 1.2："头像圆点 + 用户名"） */
  --avatar-size: 28px;
}

/* ============================================================
 * 深色主题：html[data-theme="dark"] 时覆盖颜色与阴影 Token
 * 间距 / 字号 / 圆角等结构变量与浅色共用
 * ============================================================ */
html[data-theme="dark"] {
  color-scheme: dark;

  --color-primary:          #4D84FF;
  --color-primary-hover:    #6C9BFF;
  --color-primary-active:   #3B6FE0;
  --color-primary-light:    #1B2740;

  --color-secondary:        #3DDC97;
  --color-accent:           #9B8AF5;

  --color-bg:               #0F141B;
  --color-surface:          #171D26;
  --color-surface-hover:    #1F2732;
  --color-surface-disabled: #222A35;
  --color-border:           #2A3441;
  --color-border-strong:    #3A4757;
  --color-text:             #E6EAF0;
  --color-text-secondary:   #98A2B3;
  --color-text-placeholder: #6B7684;
  --color-text-inverse:     #FFFFFF;

  --color-success:          #3DDC97;
  --color-success-bg:       #12352A;
  --color-warning:          #F5A524;
  --color-warning-bg:       #3A2C12;
  --color-danger:           #FF6B6B;
  --color-danger-bg:        #3B1A1D;
  --color-info:             #4D84FF;
  --color-info-bg:          #1B2740;

  --color-modified:         #4A3F14;
  --color-modified-border:  #C9A227;
  --color-modified-text:    #FFE9A3;

  --color-skeleton:         #232B36;
  --color-skeleton-shine:   #2B3441;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.55);
  --shadow-overlay: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 8px 24px rgba(0, 0, 0, 0.55);
}