/* 客宝 · 全站设计 token（唯一来源）
   官网 / 管理后台 / 值班台 / 帮助中心 / 挂件 共用。
   改色只改这里。 */

:root {
  /* ---- 品牌色：一主一辅，不再三绿并存 ---- */
  --brand: #0f766e;          /* 主色 teal-700，与后台一致 */
  --brand-strong: #115e59;   /* 按下 / 深调 */
  --brand-soft: #ecfdf5;     /* 浅底 */
  --brand-line: #99f6e4;     /* 浅边 */
  --accent: #2dd4bf;         /* 深底上的高亮，仅用于暗色表面 */

  /* ---- 中性色：冷灰一套，官网与后台对齐 ---- */
  --ink: #0f172a;
  --ink-2: #334155;
  --muted: #64748b;
  --soft: #94a3b8;
  --line: #e2e8f0;
  --line-soft: #f1f5f9;
  --bg: #f8fafc;
  --panel: #ffffff;

  /* ---- 暗色表面（导航 / 首屏 / 页脚） ---- */
  --dark: #0b1620;
  --dark-2: #12212e;
  --dark-line: rgba(255, 255, 255, .10);
  --on-dark: #e8eef2;
  --on-dark-muted: #9fb0bd;

  /* ---- 状态色 ---- */
  --ok: #059669;
  --warn: #d97706;
  --danger: #dc2626;
  --info: #0284c7;
  --info-ink: #1d4ed8;
  --warn-ink: #92400e;
  --danger-ink: #b91c1c;

  /* ---- 语义浅底：列表选中 / 气泡 / 徽章 / 按钮，随主题切换 ---- */
  --btn: #e5e7eb;
  --hover: #f8fafc;
  --input: #ffffff;
  --msg: #f3f4f6;
  --msg-agent: #ecfdf5;
  --msg-visitor: #eff6ff;
  --msg-bot: #eef2ff;
  --msg-note: #fffbeb;
  --msg-bot-line: #c7d2fe;
  --warn-soft: #fffbeb;
  --warn-mid: #fff7ed;
  --warn-hot: #ffedd5;
  --warn-line: #fde68a;
  --danger-soft: #fef2f2;
  --info-soft: #eff6ff;
  --chip: var(--msg);

  /* ---- 字体 ---- */
  --font: "PingFang SC", "HarmonyOS Sans SC", "Hiragino Sans GB", "Noto Sans SC",
          "Source Han Sans SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* ---- 字阶（中文不用负字距） ---- */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: clamp(24px, 2.4vw, 30px);
  --fs-4xl: clamp(28px, 3.4vw, 38px);
  --fs-5xl: clamp(34px, 4.6vw, 50px);
  --fs-display: clamp(38px, 5.4vw, 62px);

  --lh-tight: 1.25;
  --lh-snug: 1.45;
  --lh-body: 1.75;

  --fw: 400;
  --fw-md: 500;
  --fw-sb: 600;
  --fw-bd: 700;

  /* ---- 间距 ---- */
  --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;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ---- 圆角 ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;
  --radius: var(--r-md);   /* 兼容后台旧变量名 */

  /* ---- 阴影 ---- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 6px 18px rgba(15, 23, 42, .08);
  --shadow-lg: 0 18px 44px rgba(15, 23, 42, .12);
  --shadow-xl: 0 30px 70px rgba(8, 20, 30, .30);
  --shadow: var(--shadow-md);   /* 兼容后台旧变量名 */

  /* ---- 焦点环 ---- */
  --focus: 0 0 0 2px var(--panel), 0 0 0 4px var(--brand);
  --focus-dark: 0 0 0 2px var(--dark), 0 0 0 4px var(--accent);

  /* ---- 版心 ---- */
  --wrap: 1160px;
  --wrap-narrow: 820px;

  /* ---- 动效 ---- */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --dur: .18s;
}

/* 兼容各子应用沿用的旧变量名，避免逐处替换 */
:root {
  --brand-2: var(--accent);
  --side: #f3f5f7;
  --side-ink: var(--ink);
  --fs-xl-legacy: var(--fs-2xl);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0s; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* 后台 / 值班台 / 系统 / 客户中心暗色：只覆盖颜色，不改字号基准 */
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e8eef2;
  --ink-2: #c5d0d8;
  --muted: #9fb0bd;
  --soft: #6b7c88;
  --line: rgba(232, 238, 242, .14);
  --line-soft: rgba(232, 238, 242, .07);
  --bg: #0b1620;
  --panel: #12212e;
  --side: #0e1a24;
  --side-ink: #e8eef2;
  --brand-soft: rgba(45, 212, 191, .14);
  --brand-line: rgba(45, 212, 191, .38);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, .32);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, .4);
  --shadow-xl: 0 30px 70px rgba(0, 0, 0, .48);
  --shadow: var(--shadow-md);
  --focus: 0 0 0 2px var(--panel), 0 0 0 4px var(--accent);
  --info-ink: #93c5fd;
  --warn-ink: #fbbf24;
  --danger-ink: #fca5a5;
  --btn: rgba(232, 238, 242, .14);
  --hover: rgba(232, 238, 242, .06);
  --input: #0e1a24;
  --msg: rgba(232, 238, 242, .08);
  --msg-agent: rgba(45, 212, 191, .18);
  --msg-visitor: rgba(96, 165, 250, .16);
  --msg-bot: rgba(129, 140, 248, .18);
  --msg-note: rgba(251, 191, 36, .14);
  --msg-bot-line: rgba(129, 140, 248, .42);
  --warn-soft: rgba(251, 191, 36, .12);
  --warn-mid: rgba(234, 88, 12, .16);
  --warn-hot: rgba(234, 88, 12, .22);
  --warn-line: rgba(251, 191, 36, .38);
  --danger-soft: rgba(220, 38, 38, .16);
  --info-soft: rgba(96, 165, 250, .14);
  --chip: var(--msg);
}