/* 微语设计令牌：全部颜色/间距/圆角/阴影集中在此，暗色主题通过覆盖变量实现。
   品牌视觉：科技蓝渐变（靛蓝 → 宝蓝 → 青蓝），主色 #2563EB，与 Logo 的渐变保持一致。 */
:root {
  --brand: #2563eb;
  --brand-600: #1d4ed8;
  --brand-700: #1e40af;
  --brand-soft: #e8f0ff;
  --brand-tint: #f3f7ff;
  --accent: #06b6d4;
  --danger: #dc4c4c;
  --danger-soft: #fdecec;
  --warning: #c47a10;
  --warning-soft: #fdf4e3;
  --success: #10b981;
  --success-soft: #e7f8f2;
  --info: #2563eb;
  --info-soft: #eaf2ff;

  --bg: #f2f4f8;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --surface-3: #eceff4;
  --overlay: rgba(8, 16, 32, 0.45);
  --text: #0b1b2b;
  --text-2: #43556b;
  --text-3: #7c8ca0;
  --text-inverse: #ffffff;
  --border: #e2e8f0;
  --border-2: #cfdae7;
  --bubble-in: #ffffff;
  --bubble-in-border: #eceff5;
  --bubble-out: #dbeafe;
  --bubble-out-border: #c7dffc;

  --shadow-1: 0 1px 2px rgba(11, 27, 43, 0.05), 0 1px 4px rgba(11, 27, 43, 0.04);
  --shadow-2: 0 6px 20px rgba(11, 27, 43, 0.09);
  --shadow-3: 0 18px 52px rgba(11, 27, 43, 0.16);
  --ring: 0 0 0 3px rgba(37, 99, 235, 0.18);

  --radius-xs: 6px;
  --radius-sm: 9px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Code", Consolas, monospace;

  --rail-w: 76px;
  --list-w: 320px;
  --header-h: 64px;
  --composer-max: 960px;

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --speed: 180ms;
}

:root[data-theme='dark'] {
  --brand: #60a5fa;
  --brand-600: #4f93f0;
  --brand-700: #3b82f6;
  --brand-soft: #16233b;
  --brand-tint: #111a2b;
  --accent: #22d3ee;
  --danger: #f07171;
  --danger-soft: #34191a;
  --warning: #e5a54b;
  --warning-soft: #332614;
  --success: #34d399;
  --success-soft: #10281f;
  --info: #60a5fa;
  --info-soft: #14243a;

  --bg: #0b1220;
  --surface: #141e2e;
  --surface-2: #182335;
  --surface-3: #1f2b3f;
  --overlay: rgba(0, 0, 0, 0.62);
  --text: #e8eef7;
  --text-2: #aebdd0;
  --text-3: #7d8ea5;
  --text-inverse: #0b1220;
  --border: #26344a;
  --border-2: #324258;
  --bubble-in: #1c2839;
  --bubble-in-border: #26344a;
  --bubble-out: #1e3a8a;
  --bubble-out-border: #2a4aa8;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 6px 22px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 18px 52px rgba(0, 0, 0, 0.55);
  --ring: 0 0 0 3px rgba(96, 165, 250, 0.24);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --brand: #60a5fa;
    --brand-600: #4f93f0;
    --brand-700: #3b82f6;
    --brand-soft: #16233b;
    --brand-tint: #111a2b;
    --accent: #22d3ee;
    --danger: #f07171;
    --danger-soft: #34191a;
    --warning: #e5a54b;
    --warning-soft: #332614;
    --success: #34d399;
    --success-soft: #10281f;
    --info: #60a5fa;
    --info-soft: #14243a;
    --bg: #0b1220;
    --surface: #141e2e;
    --surface-2: #182335;
    --surface-3: #1f2b3f;
    --overlay: rgba(0, 0, 0, 0.62);
    --text: #e8eef7;
    --text-2: #aebdd0;
    --text-3: #7d8ea5;
    --text-inverse: #0b1220;
    --border: #26344a;
    --border-2: #324258;
    --bubble-in: #1c2839;
    --bubble-in-border: #26344a;
    --bubble-out: #1e3a8a;
    --bubble-out-border: #2a4aa8;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 6px 22px rgba(0, 0, 0, 0.45);
    --shadow-3: 0 18px 52px rgba(0, 0, 0, 0.55);
    --ring: 0 0 0 3px rgba(96, 165, 250, 0.24);
  }
}