/* ============================================================
   Design Tokens — 科云企业管理后台
   基于 work-review-prototype.html 提炼，作为所有页面的统一视觉标准
   ============================================================ */

:root {
  /* ===== 主色 / Primary ===== */
  --color-primary: #3370FF;
  --color-primary-hover: #2860E0;
  --color-primary-light: #E1EAFF;   /* 浅色描边 / 发光环 */
  --color-primary-bg: #F0F5FF;       /* 浅色背景 / 选中态底色 */

  /* ===== 辅助色 ===== */
  --color-secondary: #8B5CF6;        /* 辅助强调 (头像渐变、特殊标记) */

  /* ===== 语义色：成功 / Success ===== */
  --color-success: #34C759;
  --color-success-light: #E8F8EC;    /* 浅色边框 */
  --color-success-bg: #F0FAF3;       /* 浅色背景 */

  /* ===== 语义色：警告 / Warning ===== */
  --color-warning: #FF9500;
  --color-warning-light: #FFF3E0;    /* 浅色边框 */
  --color-warning-bg: #FFF8F0;       /* 浅色背景 */

  /* ===== 语义色：危险 / Danger ===== */
  --color-danger: #FF4D4F;
  --color-danger-light: #FFEDEC;     /* 浅色背景 / 高亮行 */

  /* ===== 语义色：信息 / Info ===== */
  --color-info: #3370FF;             /* 复用主色，保持一致 */
  --color-info-light: #E1EAFF;
  --color-info-bg: #F0F5FF;

  /* ===== 文字色阶 ===== */
  --color-text-1: #1F2329;           /* 主标题、正文 */
  --color-text-2: #646A73;           /* 次要文字、导航 */
  --color-text-3: #8F959E;           /* 辅助说明、placeholder */
  --color-text-4: #C9CDD4;           /* 禁用 / 占位 / 分隔符 */

  /* ===== 背景色阶 ===== */
  --color-bg-page: #F2F3F5;          /* 页面底色 */
  --color-bg-white: #FFFFFF;         /* 卡片 / 容器白底 */
  --color-bg-hover: #F7F8FA;         /* 悬停 / 表头浅灰底 */
  --color-bg-mask: rgba(0, 0, 0, 0.4); /* 弹窗遮罩 */

  /* ===== 边框色 ===== */
  --color-border-1: #E5E6EB;         /* 主边框 / 分隔线 */
  --color-border-2: #F0F1F3;         /* 细分隔线 / 轻量边框 */

  /* ===== 阴影 ===== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);   /* 卡片默认 */
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);   /* 悬浮升高 */
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08);  /* 弹窗 / 下拉 */

  /* ===== 圆角 ===== */
  --radius-sm: 6px;    /* 小按钮、tag、输入框、骨架线、进度轨道 */
  --radius-md: 8px;    /* 卡片、区域、说明状态块 */
  --radius-lg: 12px;   /* 大容器 */
  --radius-xl: 16px;   /* 弹窗 */
  --radius-full: 999px; /* 等宽圆形 / 短徽标；禁止用于骨架线、进度轨道和说明容器 */

  /* ===== 字号阶梯 ===== */
  --font-size-xs: 12px;   /* 辅助标签、tooltip、角标 */
  --font-size-sm: 13px;   /* 次要正文、表格、导航 */
  --font-size-md: 14px;   /* 正文基准 */
  --font-size-lg: 16px;   /* 小标题、卡片标题 */
  --font-size-xl: 18px;   /* 区块标题 */
  --font-size-2xl: 22px;  /* 页面标题 */
  --font-size-3xl: 28px;  /* 统计数字 */

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

  /* ===== 行高 ===== */
  --line-height-tight: 1.4;    /* 紧凑列表 */
  --line-height-normal: 1.6;   /* 正文 */
  --line-height-relaxed: 1.8;  /* 长文本 / 文本域 */

  /* ===== 间距刻度 (4px 基数) ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ===== 组件尺寸 ===== */
  --sidebar-width: 220px;
  --topbar-height: 56px;

  /* ===== z-index 层级 ===== */
  --z-dropdown: 50;     /* 顶部栏 sticky */
  --z-sidebar: 100;     /* 侧边栏 */
  --z-tooltip: 200;     /* tooltip / popover */
  --z-modal: 300;       /* 弹窗遮罩 */
  --z-toast: 400;       /* 全局提示 */

  /* ===== 过渡 ===== */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;

  /* ===== 字体家族 ===== */
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
}