/* web-kefu 设计令牌 —— 访客端与工作台共用，只在这里定义颜色/字号/圆角/阴影/动效。
   使用：<link rel="stylesheet" href="../shared/tokens.css">，组件 CSS 只引用 var(--*)。 */
:root {
  /* 品牌：深青，克制可信 */
  --brand-50: #F0FDFA;
  --brand-100: #CCFBF1;
  --brand-200: #99F6E4;
  --brand-500: #0D9488;
  --brand-600: #0F766E;
  --brand-700: #0B5F5A;
  --brand-contrast: #FFFFFF;

  /* 中性：暖灰 stone */
  --bg: #F7F7F5;
  --bg-sunken: #EFEEEB;
  --surface: #FFFFFF;
  --surface-hover: #FAFAF9;
  --border: #E7E5E4;
  --border-strong: #D6D3D1;
  --text: #1C1917;
  --text-secondary: #57534E;
  --text-muted: #8A847E;
  --text-inverse: #FFFFFF;

  /* 语义 */
  --accent: #F97316;        /* 未读角标、录音中 */
  --accent-soft: #FFEDD5;
  --success: #16A34A;
  --success-soft: #DCFCE7;
  --danger: #DC2626;
  --danger-soft: #FEE2E2;
  --warning: #D97706;

  /* 气泡 */
  --bubble-own-bg: var(--brand-600);
  --bubble-own-text: #FFFFFF;
  --bubble-other-bg: var(--surface);
  --bubble-other-text: var(--text);
  --bubble-other-border: var(--border);
  --bubble-system-text: var(--text-muted);

  /* 字体 */
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-chat: 15px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 22px;
  --lh: 1.5;

  /* 间距（8px 基数） */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px;

  /* 圆角 */
  --r-sm: 6px;
  --r-btn: 10px;
  --r-card: 12px;
  --r-bubble: 16px;
  --r-bubble-tail: 4px;
  --r-full: 999px;

  /* 阴影：只用两档 */
  --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.06);
  --shadow-md: 0 1px 2px rgba(28, 25, 23, 0.06), 0 8px 24px rgba(28, 25, 23, 0.08);

  /* 动效 */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 160ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;

  /* 尺寸 */
  --h-control: 42px;     /* 移动端按钮 */
  --h-control-sm: 36px;  /* 工作台按钮 */
  --h-icon-btn: 40px;
  --avatar: 36px;
  --launcher: 56px;      /* 悬浮按钮 */
  --focus-ring: 0 0 0 3px rgba(13, 148, 136, 0.35);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: var(--lh);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
img, video { max-width: 100%; display: block; }
.tnum { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}