/* ============================================================
 * JL Bank 客服问答系统 — 阶段三原型 Design Tokens
 * 设计取向：原生骨架 + Arco 皮（吸收豆包/Doubao 视觉语言）
 * 基线：前端 SPEC §9.1（品牌深蓝 #1F3B66 / 强调蓝 #3B82F6 / 明暗双主题）
 * 扩展：补充 Arco 语义色与中性灰阶，满足组件多状态需求
 * ============================================================ */

:root[data-theme='light'] {
  /* —— 品牌 / 强调 —— */
  --brand: #1F3B66;          /* 品牌主色（侧栏/标题/品牌元素） */
  --brand-2: #2E5CA8;        /* 次级品牌蓝（用户气泡/选中态） */
  --accent: #3B82F6;         /* 强调蓝（发送按钮/主操作/链接） */
  --accent-hover: #2F6FE0;

  /* —— 语义色（克制使用，仅危险用红） —— */
  --success: #00B42A;
  --warning: #FF7D00;
  --danger: #F53F3F;
  --danger-bg: #FFECE8;

  /* —— 背景 / 表面 —— */
  --bg: #F5F7FA;             /* 应用底色 */
  --card: #FFFFFF;           /* 卡片/面板 */
  --card-2: #F2F3F5;         /* 次级表面（输入框/悬停） */
  --sidebar-bg: #FFFFFF;
  --header-bg: rgba(255,255,255,.85);

  /* —— 文字 —— */
  --text: #1F2329;
  --text-2: #4E5969;
  --muted: #6B7280;
  --text-inverse: #FFFFFF;

  /* —— 气泡 —— */
  --user-bubble: #2E5CA8;
  --user-bubble-text: #FFFFFF;
  --assistant-bubble: #FFFFFF;
  --assistant-bubble-text: #1F2329;

  /* —— 描边 / 分割 —— */
  --border: #E5E7EB;
  --border-2: #EDEFF2;
  --divider: #EEF0F3;

  /* —— 引用 / 高亮 —— */
  --cite-bg: #EAF1FB;
  --cite-text: #2E5CA8;
  --cite-border: #BFD3F2;
  --mark-bg: #FFF3B0;        /* 来源命中高亮（黄） */
  --mark-text: #1F2329;

  /* —— 中性灰阶（Arco 风） —— */
  --gray-1: #F7F8FA;
  --gray-2: #F2F3F5;
  --gray-3: #E5E6EB;
  --gray-4: #C9CDD4;
  --gray-5: #86909C;
  --gray-6: #4E5969;

  /* —— 形状 / 阴影 / 动效 —— */
  --radius: 10px;
  --radius-lg: 14px;
  --radius-sm: 6px;
  --radius-pill: 999px;
  --shadow: 0 1px 4px rgba(16,24,40,.08);
  --shadow-md: 0 4px 16px rgba(16,24,40,.12);
  --shadow-drawer: -8px 0 24px rgba(16,24,40,.10);
  --shadow-pop: 0 6px 24px rgba(16,24,40,.16);
  --ease: cubic-bezier(.32,.72,.36,1);
  --dur: .22s;
}

:root[data-theme='dark'] {
  --brand: #2E5CA8;
  --brand-2: #3B6FC4;
  --accent: #3B82F6;
  --accent-hover: #4F90F7;

  --success: #27C346;
  --warning: #FF9A2E;
  --danger: #F76965;
  --danger-bg: #3A2422;

  --bg: #10151D;
  --card: #1A2230;
  --card-2: #232C3B;
  --sidebar-bg: #141B25;
  --header-bg: rgba(20,27,37,.85);

  --text: #E6EAF2;
  --text-2: #B4BDCC;
  --muted: #9AA3B2;
  --text-inverse: #0B0F15;

  --user-bubble: #2E5CA8;
  --user-bubble-text: #FFFFFF;
  --assistant-bubble: #1F2937;
  --assistant-bubble-text: #E6EAF2;

  --border: #2A3444;
  --border-2: #232C3B;
  --divider: #232C3B;

  --cite-bg: #1E2A3E;
  --cite-text: #8FB4F0;
  --cite-border: #34507E;
  --mark-bg: #5A4A12;
  --mark-text: #FFE9A8;

  --gray-1: #161D28;
  --gray-2: #1A2230;
  --gray-3: #232C3B;
  --gray-4: #3A4555;
  --gray-5: #6B7688;
  --gray-6: #B4BDCC;

  --radius: 10px;
  --radius-lg: 14px;
  --radius-sm: 6px;
  --radius-pill: 999px;
  --shadow: 0 1px 4px rgba(0,0,0,.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,.5);
  --shadow-drawer: -8px 0 24px rgba(0,0,0,.5);
  --shadow-pop: 0 6px 24px rgba(0,0,0,.55);
  --ease: cubic-bezier(.32,.72,.36,1);
  --dur: .22s;
}

/* 字号层级（SPEC §9.2）：正文 14px / 标题 16·20px / 行距 1.6 */
:root {
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 16px;
  --fs-lg: 20px;
  --lh: 1.6;
  --hit: 44px;               /* 关键操作命中区 ≥44px */
}