/* ==========================================================================
   Flaxl Claw · Design Tokens  v1.5
   设计原则：黑白灰 + 一个红 + 一组「身份识别色」。所有颜色 / 字号 / 间距 / 圆角 / 阴影 均由此派生。
   不要在任何业务样式里写死色值，一律引用变量。
   ========================================================================== */

:root {
  /* ---------- 中性色阶 Ink （承担 95% 的界面面积） ---------- */
  --ink-1000: #000000;  /* 原稿纯黑：只用于登录页左侧品牌区 */
  --ink-950: #0B0D10;
  --ink-900: #14161A;   /* 主标题 · 深色底 · 深色按钮 */
  --ink-800: #1E2126;
  --ink-700: #2E3238;   /* 正文 */
  --ink-600: #4A4F57;
  --ink-500: #6B717A;   /* 次要说明文字 */
  --ink-400: #8F959E;   /* 辅助信息 · 占位符 */
  --ink-300: #B7BCC4;   /* 禁用 */
  --ink-200: #DFE3E8;   /* 常规边框 */
  --ink-150: #EAEDF1;   /* 浅色边框 · 分割线 */
  --ink-100: #F2F4F7;   /* 浅底 · 胶囊底 · 斑马纹 */
  --ink-50:  #F8F9FB;   /* 页面/侧栏底色 */
  --white:   #FFFFFF;

  /* ---------- 品牌红 Brand （承担 5% 的强调面积） ---------- */
  /* 说明：原稿使用纯 #FF0000。纯红在白底上会产生色晕、大面积使用时刺眼。
     这里收敛到 #E60012 —— 色相完全一致，但更沉稳、更"贵"。
     规范：--brand-500 只用于「主按钮 / 选中态 / 关键数字 / logo 徽标」；
           大面积浅色区域一律使用 --brand-100 打底 + --brand-500 描边或文字。 */
  --brand-700: #A8000D;
  --brand-600: #C20010;   /* 按下 */
  --brand-500: #E60012;   /* 主品牌红 · logo cn 徽标同源 */
  --brand-400: #FF4D4F;   /* 深底上的红字/图标 */
  --brand-300: #FF8A8F;   /* 深底上的红字（弱）· 通话状态点 */
  --brand-200: #FFC9C5;   /* 红色描边 */
  --brand-100: #FFECEA;   /* 红色浅底 */
  --brand-50:  #FFF6F5;   /* 悬停浅底 */

  /* ---------- 功能色（严格克制，每个色只允许出现在它该出现的地方） ---------- */
  --success:    #12B76A;   /* 仅用于「运行中」状态点、支付成功 */
  --success-bg: #E7F8F0;
  --success-ink: #0B8F52;  /* 成功浅底上的文字（保证对比度 ≥ 4.5:1） */
  --warning:    #F59E0B;   /* 仅用于「待处理/审核中」 */
  --warning-bg: #FFF7E6;
  --warning-ink: #B26B00;  /* 警告浅底上的文字 */
  --danger:     var(--brand-500);
  /* 注意：本项目不引入第二个「语义」彩色色系 —— 原稿的蓝 #2A82E4 / 紫 #6E6AE3 已全部废弃。
     唯一例外是下面这组「身份识别色」：它不表达状态、品牌或任何业务语义，
     只回答"这是哪一个对象"这个问题，因此可以在一屏列表里安全地给出色彩区分。 */

  /* ---------- 身份识别色 Identity Tones（仅「数字员工」页使用） ----------
     规则：-bg 作头像底色，-ink 作图标与卡片顶条，同一色相成对使用、不跨色混搭。
     对比度（已实测）：-ink 对白底 5.02~7.90:1，-ink 对自身 -bg 4.61~6.94:1 —— 两两均 ≥ WCAG AA 的 4.5:1。
     边界：只在数字员工卡上出现（顶条 / 头像 / 状态徽章），不得外溢到其他页面或组件。 */
  --tone-blue-bg:    #EEF3FF;  --tone-blue-ink:    #1D4ED8;
  --tone-indigo-bg:  #EFEFFE;  --tone-indigo-ink:  #4338CA;
  --tone-violet-bg:  #F5F0FF;  --tone-violet-ink:  #7C3AED;
  --tone-magenta-bg: #FCEFFB;  --tone-magenta-ink: #A21CAF;
  --tone-amber-bg:   #FEF4E6;  --tone-amber-ink:   #B45309;
  --tone-teal-bg:    #E7F5F3;  --tone-teal-ink:    #0F766E;
  --tone-cyan-bg:    #E5F4F9;  --tone-cyan-ink:    #0E7490;

  /* ---------- 渐变（只保留一处：手机相机键的品牌红） ----------
     原 --grad-ink（深色卡渐变）随数字员工卡改版一起废弃：
     7 张深色卡在一屏浅色界面里过重，改版后已全部收敛为浅色卡。 */
  --grad-brand: linear-gradient(135deg, #E60012 0%, #A8000D 100%);

  /* ---------- 字体 ----------
     全部是可免费商用的字体，项目内不打包、不分发任何字体文件：
       ① Inter            —— SIL OFL 1.1，免费可商用（西文 / 数字）
       ② Noto Sans SC     —— SIL OFL 1.1，免费可商用（中文首选）
       ③ JetBrains Mono   —— SIL OFL 1.1，免费可商用（等宽数字）
     下面几项是**系统兜底**：CSS 写字体名只是"调用本机字体"，
     不涉及分发，因此不需要另取授权；用户机器上没有前三种时才轮到它们。
       · PingFang SC        macOS 系统字体
       · Microsoft YaHei    Windows 系统字体
       · system-ui          跟随系统界面字体
     明确不用的：任何方正 / 汉仪 / 造字工房等商业授权字体，以及需要
     单独购买嵌入式授权的字体 —— 原型要能随便发给别人打开，就不能带这些雷。 */
  --font-sans: "Inter", "Noto Sans SC", "Source Han Sans SC", "PingFang SC",
               "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num:  "Inter", "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* ---------- 字阶（六档，不再新增） ---------- */
  --fs-display: 32px; --lh-display: 42px;  /* 空态大标题 */
  --fs-h1:      24px; --lh-h1:      34px;  /* 页面主标题 */
  --fs-h2:      18px; --lh-h2:      28px;  /* 区块标题 */
  --fs-h3:      15px; --lh-h3:      24px;  /* 卡片标题 */
  --fs-body:    14px; --lh-body:    22px;  /* 正文 */
  --fs-sm:      13px; --lh-sm:      20px;  /* 次要正文 · 导航 */
  --fs-xs:      12px; --lh-xs:      18px;  /* 说明 · 表头 */
  --fs-2xs:     11px; --lh-2xs:     16px;  /* 角标 */

  /* 字重只用 3 档：400 常规 / 500 中黑 / 600 半粗 */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;

  /* ---------- 间距（4pt 栅格，只用这 11 档） ---------- */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px;  --sp-7: 28px;  --sp-8: 32px;
  --sp-9: 36px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  /* ---------- 圆角 ---------- */
  --r-xs:  6px;  --r-sm: 8px;  --r-md: 10px;
  --r-lg: 14px;  --r-xl: 18px; --r-full: 999px;

  /* ---------- 阴影（越靠上层越深） ---------- */
  --sh-xs:    0 1px 2px rgba(16, 24, 40, .05);
  --sh-sm:    0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
  --sh-md:    0 6px 16px -4px rgba(16, 24, 40, .10), 0 2px 6px -2px rgba(16, 24, 40, .06);
  --sh-lg:    0 16px 40px -12px rgba(16, 24, 40, .18);
  --sh-focus: 0 0 0 3px rgba(230, 0, 18, .12);

  /* ---------- 动效 ---------- */
  --ease:   cubic-bezier(.22, .61, .36, 1);
  --t-fast: 140ms cubic-bezier(.22, .61, .36, 1);
  --t-base: 220ms cubic-bezier(.22, .61, .36, 1);
  --t-slow: 380ms cubic-bezier(.22, .61, .36, 1);

  /* ---------- 布局 ---------- */
  --sidebar-w:   232px;
  --topbar-h:    56px;
  --content-max: 1120px;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
}

/* 无障碍：尊重系统「减少动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}