/* =========================================================================
 * 悠獭智能中枢 · 全站唯一设计令牌 (Single Source of Truth)
 * -------------------------------------------------------------------------
 * 引用方式
 *   admin 壳层 : public/admin/index.html  -> <link href="/common/tokens.css">
 *   React 大屏 : 根 index.html            -> <link href="/common/tokens.css">
 *   任何页面不得再自行定义颜色/圆角/字阶，只能引用本文件的变量。
 *
 * 色彩预算 (90 / 8 / 2)
 *   约 90%  中性 : 五级底色 + 三级描边 + 三级文字
 *   不超 8% 强调 : 天青 --primary（主操作 / 选中 / 焦点 / 进度 / 关键单位）
 *   不超 2% 状态 : --danger 异常 · --warn 待关注 · --ok 正常
 *
 * 用色规则（check:ui-tokens 守卫）
 *   1. 数字默认 --text / --text-muted，仅“偏离预期”才允许着色
 *   2. 状态一律「6px 圆点 + 灰字」，不做带底色带边框的彩色胶囊
 *   3. 实心填充只给每屏唯一主操作，其余用描边或纯文字
 *   4. 禁用色相：紫 / 橙 / 粉 / 青绿 / 第二蓝；禁用 0 0 Npx 光晕、inset 阴影、纵向渐变
 *   5. 圆角仅 --r-xs 4 / --r-sm 6 / --r-md 8 / --r-pill 999；字号仅走字阶
 * ========================================================================= */

:root, .theme-dark {
  /* ===== 五级高度阶梯（唯一背景来源，纯中性，无蓝色偏） ===== */
  --bg-sunken:  #080b11;
  --bg-base:    #0a0d13;
  --bg-surface: #11151b;
  --bg-raised:  #161b22;
  --bg-overlay: #1b212a;

  /* ===== 描边：三级 ===== */
  --border:         rgba(148, 163, 184, 0.10);
  --border-strong:  rgba(148, 163, 184, 0.20);
  --border-focus:   rgba(56, 189, 248, 0.45);

  /* ===== 文字：三级 ===== */
  --text:       #f1f5f9;
  --text-muted: #b6c2d1;
  --text-dim:   #8696aa;
  --text-faint: #5f6e82;

  /* ===== 唯一强调色：天青 ===== */
  --primary:        #38bdf8;
  --primary-hover:  #7dd3fc;
  --primary-active: #0ea5e9;
  --primary-bg:     rgba(56, 189, 248, 0.08);
  --on-primary:     #04141f;

  /* ===== 状态色：只用于圆点 / 少量文字 ===== */
  --ok:     #34d399;
  --warn:   #fbbf24;
  --danger: #f87171;
  --ok-bg:     rgba(52, 211, 153, 0.08);
  --warn-bg:   rgba(251, 191, 36, 0.08);
  --danger-bg: rgba(248, 113, 113, 0.08);

  /* ===== 圆角 / 间距 / 字阶 / 阴影 ===== */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-pill: 999px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
  --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 32px; --fs-hero: 56px;
  --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* =======================================================================
   * 大屏字阶（Screen Type Scale）—— React 大屏 / admin 嵌入视图唯一字号来源
   * -----------------------------------------------------------------------
   * 锚点：智能监控风控详情页（ChannelDetailView）已验收的字号关系
   *   标签 12 · 辅助 13 · 正文 14 · 强调 15 · 副标题 16 · 小标题 18
   *   面板标题 20 · 页面标题 24 · 指标 28/34 · 展示 44 · Hero 56
   *
   * 铁律
   *   1. 只允许使用下列 12 级，禁止再写 10 / 10.5 / 11.5 / 12.5 / 13.5 / 14.5 / 17 / 19 等碎片字号
   *   2. 低于 12px 一律禁止（12px 是全平台可读性下限）
   *   3. 字号只表达层级，不表达状态；状态用「6px 圆点 + 文字」
   *   4. 数字与文字同阶：不要为了「显眼」给数字单独加 2px，改用字重 --fw-bold + 颜色
   *   5. 守卫：npm run check:type-scale（CI 拦截 src/ 下任何字面量 font-size）
   * ======================================================================= */
  /* 标签组 —— 元信息，不承载结论 */
  --fs-label:    12px;   /* 单位 / 时间戳 / 图表轴 / 角标 / 表头 */
  --fs-caption:  13px;   /* 辅助说明 / 表格辅助列 / 次级标签 */
  /* 正文组 —— 承载内容 */
  --fs-body:     14px;   /* 正文基准：卡片正文、列表副行、表单值 */
  --fs-lead:     15px;   /* 正文强调：结论句、卡片主文、关键字段值 */
  --fs-subhead:  16px;   /* 副标题：列表主名、卡片副标题、行内主值 */
  /* 标题组 —— 划分区块 */
  --fs-head:     18px;   /* 小标题：区块头、面板头、侧栏分组名 */
  --fs-title:    20px;   /* 面板标题 / 弹窗标题 / 中号指标 */
  --fs-title-lg: 24px;   /* 页面标题 / 大号指标 */
  /* 数字组 —— 只给 Hero 与结论数字 */
  --fs-metric:   28px;   /* 结论级指标：运营正常 / 健康分 */
  --fs-metric-lg: 34px;  /* 页面级指标：回本天数、当日收入 */
  --fs-display:  44px;   /* 展示级：Hero 副数字 */
  --fs-mega:     56px;   /* Hero 主数字：回本倒计时 */

  /* 行高 —— 与字阶配套，禁止页面自定义小数 */
  --lh-tight: 1.2;    /* ≥28px 数字 */
  --lh-snug: 1.35;    /* 18–24px 标题 */
  --lh-normal: 1.5;   /* 12–16px 单行 */
  --lh-relaxed: 1.6;  /* 14–16px 多行正文 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 14px 32px rgba(0, 0, 0, 0.44);

  /* ===== 字体 ===== */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* ===== 侧边栏 ===== */
  --sidebar-bg: #090c11;
  --sidebar-border: rgba(148, 163, 184, 0.08);
  --sidebar-text: #8696aa;
  --sidebar-text-hover: #f1f5f9;
  --sidebar-item-hover: rgba(148, 163, 184, 0.07);
  --sidebar-active-bg: rgba(148, 163, 184, 0.10);
  --sidebar-active-text: #f1f5f9;

  /* ===== 旧变量名别名（兼容存量页面，逐步迁移，新代码禁用） ===== */
  --bg: var(--bg-base);
  --bg-alt: var(--bg-surface);
  --panel: var(--bg-surface);
  --panel-alt: var(--bg-raised);
  --panel-raised: var(--bg-raised);
  --panel-hover: var(--bg-overlay);
  --surface: var(--bg-surface);
  --surface-2: var(--bg-raised);
  --card-bg: var(--bg-surface);
  --border-light: var(--border);
  --border-neutral: var(--border);
  --border-hover: var(--border-strong);
  --primary-flat: var(--primary);
  --primary-dim: var(--primary-bg);
  --brand: var(--primary);
  --brand-hover: var(--primary-hover);
  --brand-active: var(--primary-active);
  --brand-light: var(--primary-bg);
  --brand-soft: var(--primary-bg);
  --info: var(--primary);
  --info-soft: var(--primary-bg);
  --green: var(--ok);   --green-bg: var(--ok-bg);
  --amber: var(--warn); --amber-bg: var(--warn-bg);
  --red: var(--danger); --red-bg: var(--danger-bg);
  --success: var(--ok); --success-soft: var(--ok-bg);
  --warning: var(--warn); --warning-soft: var(--warn-bg);
  --danger-soft: var(--danger-bg);
  --status-sage: var(--ok);
  --status-amber: var(--warn);
  --status-coral: var(--danger);
  /* 禁用色相：保留变量名但收敛为中性 / 主色，防止存量引用报错 */
  --cyan: var(--primary);   --cyan-bg: var(--primary-bg);
  --purple: var(--text-dim); --purple-bg: var(--bg-raised); --purple-soft: var(--bg-raised);
  --text-1: var(--text);
  --text-2: var(--text-muted);
  --text-3: var(--text-dim);
  --text-on-brand: var(--on-primary);
  --shadow-flat-sm: var(--shadow-sm);
  --shadow-flat-md: var(--shadow-md);
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-md);
  --radius-xl: var(--r-md);
  --fs-base: var(--fs-sm);

  color-scheme: dark;
}

.theme-light {
  --bg-sunken:  #eef1f6;
  --bg-base:    #f5f7fa;
  --bg-surface: #ffffff;
  --bg-raised:  #f8fafc;
  --bg-overlay: #ffffff;

  --border:         rgba(100, 116, 139, 0.16);
  --border-strong:  rgba(100, 116, 139, 0.28);
  --border-focus:   rgba(2, 132, 199, 0.45);

  --text:       #0f172a;
  --text-muted: #334155;
  --text-dim:   #5b6b80;
  --text-faint: #8a97a8;

  --primary:        #0284c7;
  --primary-hover:  #0369a1;
  --primary-active: #075985;
  --primary-bg:     rgba(2, 132, 199, 0.07);
  --on-primary:     #ffffff;

  --ok:     #059669;
  --warn:   #b45309;
  --danger: #dc2626;
  --ok-bg:     rgba(5, 150, 105, 0.08);
  --warn-bg:   rgba(180, 83, 9, 0.08);
  --danger-bg: rgba(220, 38, 38, 0.08);

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 6px 16px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 14px 32px rgba(15, 23, 42, 0.12);

  --sidebar-bg: #ffffff;
  --sidebar-border: rgba(100, 116, 139, 0.14);
  --sidebar-text: #5b6b80;
  --sidebar-text-hover: #0f172a;
  --sidebar-item-hover: #f1f5f9;
  --sidebar-active-bg: rgba(2, 132, 199, 0.08);
  --sidebar-active-text: #0f172a;

  color-scheme: light;
}

html.theme-dark, body.theme-dark { color-scheme: dark; }
html.theme-light, body.theme-light { color-scheme: light; }

/* =========================================================================
 * 移动端安全区留白 (iOS 刘海 / 底部 Home 条)
 * ========================================================================= */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* =========================================================================
 * 原子工具类：状态圆点 / 数字 —— 新代码一律用这些，不再手写彩色胶囊
 * ========================================================================= */
.dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-faint); flex: none; vertical-align: middle;
}
.dot.ok { background: var(--ok); }
.dot.warn { background: var(--warn); }
.dot.danger { background: var(--danger); }
.dot.primary { background: var(--primary); }

.status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.4;
}
.status::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-faint); flex: none;
}
.status.ok::before { background: var(--ok); }
.status.warn::before { background: var(--warn); }
.status.danger::before { background: var(--danger); }
.status.primary::before { background: var(--primary); }

.num, .tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }