/* ===== 云枢智控 · Design Token 层（mobile.tokens.css） =====
   全端唯一 Design Token 源（20260818 组件库接入：从 mobile.css 内联抽取，统一管理·一键全局改）。
   权威基准：《全局UI配色规范-DesignToken-亮色蓝主色》+《移动端UI参照微信》三态。
   亮色默认 + 手动深色([data-theme=dark]) + 普通档(跟随系统 prefers-color-scheme)。
   被 /static/mobile.html 在 mobile.css 之前引用。单文件 ≤500 行。 */

/* ===== 亮色默认基准（豆包蓝 #007AFF） =====
   三层背景阶：顶白#FFF / 内容白#FFF / Tab浅灰#F7F7F7（禁渐变，学微信）；
   主文字#1F2329 / 次级#6B7280 / 分隔线#E5E7EB；蓝绿红黄仅语义色不担当主色。 */
:root{
  /* 背景/文字/边框 */
  --bg:#f5f7fa; --surface:#ffffff; --card:var(--surface); --border:#e3e8ef;
  --text:#1f2933; --sub:#6b7280; --bar-bg:#eef2f6; --warn:#f59e0b;
  --online:#16a34a; --offline:#dc2626;   /* 语义色：在线绿/离线红（老板08-18 蓝主色，绿红黄仅语义） */
  --accent:#007AFF;                       /* 豆包蓝主色：按钮/链接/选中/发送键 */

  /* 派生状态色（分散色值→Token） */
  --accent-blue:#007AFF;   /* 辅助点缀（表格链接/通知角标） */
  --accent-grad:linear-gradient(135deg,#007AFF,#0a5cd6);   /* 豆包蓝主操作渐变 */
  --accent-grad-h:linear-gradient(90deg,#007AFF,#0063d6,#0050b3);
  --accent-soft:#007AFF24; --accent-border:#007AFF73; --accent-bg-light:#007AFF1F;   /* 蓝派生软色 */
  --online-soft:#16a34a14; --offline-soft:#dc26261a;
  --card-shadow:0 4px 14px rgba(31,41,51,.10);

  /* 组件专用（wb-* 组件类引用，随主题切换） */
  --bubble-user:#007AFF;   /* 用户气泡=蓝底 #007AFF 白字（权威气泡规格） */
  --bubble-ai:#ffffff;     /* AI 气泡=白底灰字左对齐（满屏无框时随页面背景） */
  --text-2:#6b7280; --text-3:#9ca3af;   /* 次级/占位 */
  --success:#34c759; --danger:#dc2626;  /* 绿对勾/错误离线 */
  --bad:#EF4444; --ok:#4ADE80;          /* 权威规范值：按住说话红/完成对勾 */

  /* 底部导航（亮色：Tab 浅灰 #F7F7F7 纯色禁渐变；选中蓝#007AFF/未选中灰#8A8A8E 对照微信） */
  --tabbar-bg:#ffffff; --tabbar-border:#D3D9E0;   /* 先行整改单③(20260818): 亮色 Tab 底 #F7F7F7→#fff 与 body 白无缝(手势条区同色无断层), 上沿分割线保留分层; 深色#191919三层本就同色 */
  --tab-idle:#8A8A8E; --tab-active:#007AFF; --tab-active-bg:transparent;

  /* 安全区（所有贴底输入框/面板统一垫高） */
  --safe-b:calc(16px + env(safe-area-inset-bottom));

  /* ===== 字号 7 层表（老板08-18 系统化：全App组件一律引用变量，严禁页面自定） ===== */
  --fs-l1:28px; --fs-l2:17px; --fs-l3:16px; --fs-l4:14px; --fs-l5:12px; --fs-l6:10px;
  --fs-num:24px; --fs-num-sm:20px;

  /* ===== 圆角 / 阴影 / 间距 ===== */
  --r-input:16px; --r-btn:20px; --r-bubble:16px; --r-card:12px; --r-tab:25px; --r-icon:10px;
  --sh:0 2px 8px rgba(0,0,0,.08); --sh-card:0 1px 4px rgba(0,0,0,.06);
  --sp:16px;
}

/* ===== 手动深色（[data-theme=dark]，三态主题「深」档） =====
   深色=三层背景阶（导航/内容区/Tab）同色#191919 非纯黑，分隔线#38383A，主文字#D2D3E0，
   Tab未选中#858699/选中亮蓝#3B82F6；布局尺寸与亮色完全一致，只换衬托色不漂移。 */
:root[data-theme="dark"]{
  --bg:#191919; --surface:#191919; --card:#191919; --border:#38383A;
  --text:#D2D3E0; --sub:#858699; --bar-bg:#232323; --warn:#ffab40;
  --online:#00e676; --offline:#ff5252;
  --accent:#3B82F6;   /* 暗色主色=选中亮蓝 */

  --accent-blue:#3B82F6;
  --accent-grad:linear-gradient(135deg,#3B82F6,#2563EB);
  --accent-grad-h:linear-gradient(90deg,#3B82F6,#2563EB,#1D4ED8);
  --accent-soft:#3B82F629; --accent-border:#3B82F680; --accent-bg-light:#3B82F624;
  --online-soft:#00e67622; --offline-soft:#ff525222; --card-shadow:0 4px 14px rgba(0,0,0,.45);

  --bubble-user:#3267BE;   /* 暗色用户气泡=略暗蓝底（老板08-19: 暗色亮蓝刺眼，适当调暗） */
  --bubble-ai:#191919;     /* AI 气泡随页面深底 */
  --text-2:#858699; --text-3:#6b7280;
  --success:#34c759; --danger:#ff5252;
  --bad:#EF4444; --ok:#4ADE80;

  --tabbar-bg:#191919; --tabbar-border:#38383A;
  --tab-idle:#858699; --tab-active:#3B82F6; --tab-active-bg:transparent;

  --r-input:16px; --r-btn:20px; --r-bubble:16px; --r-card:12px; --r-tab:25px; --r-icon:10px;
  --sh:0 2px 8px rgba(0,0,0,.2); --sh-card:0 1px 4px rgba(0,0,0,.12);
  --sp:16px;
}

/* ===== 普通档（跟随系统 prefers-color-scheme） =====
   默认无 data-theme 即普通档：系统深色自动转深、系统亮色自动转亮；
   手动选亮(data-theme=light)则固定亮色不受系统影响。值同「深」档。 */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#191919; --surface:#191919; --card:#191919; --border:#38383A;
    --text:#D2D3E0; --sub:#858699; --bar-bg:#232323; --warn:#ffab40;
    --online:#00e676; --offline:#ff5252;
    --accent:#3B82F6;

    --accent-blue:#3B82F6;
    --accent-grad:linear-gradient(135deg,#3B82F6,#2563EB);
    --accent-grad-h:linear-gradient(90deg,#3B82F6,#2563EB,#1D4ED8);
    --accent-soft:#3B82F629; --accent-border:#3B82F680; --accent-bg-light:#3B82F624;
    --online-soft:#00e67622; --offline-soft:#ff525222; --card-shadow:0 4px 14px rgba(0,0,0,.45);

    --bubble-user:#3267BE;   /* 老板08-19: 暗色用户气泡调暗 */
    --bubble-ai:#191919;
    --text-2:#858699; --text-3:#6b7280;
    --success:#34c759; --danger:#ff5252;
    --bad:#EF4444; --ok:#4ADE80;

    --tabbar-bg:#191919; --tabbar-border:#38383A;
    --tab-idle:#858699; --tab-active:#3B82F6; --tab-active-bg:transparent;

    --r-input:16px; --r-btn:20px; --r-bubble:16px; --r-card:12px; --r-tab:25px; --r-icon:10px;
    --sh:0 2px 8px rgba(0,0,0,.2); --sh-card:0 1px 4px rgba(0,0,0,.12);
    --sp:16px;
  }
}