/* ============================================================
   design-system.css — mobile chat design system
   唯一视觉真理来源。所有样式必须引用此处变量。
   禁止在任何其他文件中发明颜色、间距、圆角、字体值。
   ============================================================ */

:root {
  /* —— 色彩：深紫夜空基调 —— */
  --bg-primary:    #191328;            /* 页面底色：偏蓝粉紫 */
  --bg-surface:    #14111e;            /* 浮层/输入框：更深 */
  --bubble-user:   #231e35;            /* 用户消息气泡：带紫 */
  --bg-sunken:     #100e18;            /* 按压态、代码块底色 */
  --text-primary:  #e8e4f0;            /* 正文：浅紫白 */
  --text-secondary:#9b94a8;            /* 次要文字、时间戳 */
  --text-faint:    #6b6478;            /* 占位符 */

  /* —— 主题色：粉紫（仅按钮/发送图标/光标/强调） —— */
  --accent:        #b07adb;
  --accent-hover:  #c48ef0;
  --accent-fg:     #FFFFFF;            /* 紫底上的文字 */

  /* —— 边框：极淡，靠留白而非线条分层 —— */
  --border:        rgba(200, 180, 255, 0.10);
  --border-strong: rgba(200, 180, 255, 0.22);  /* 输入框聚焦 */

  /* —— 字体 —— */
  --font-serif: ui-serif, Georgia, 'PingFang SC', sans-serif;
  --font-sans:  -apple-system, system-ui, 'PingFang SC', sans-serif;
  --font-mono:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* —— 字号 / 行高 —— */
  --text-base:   16px;
  --text-sm:     13px;
  --text-title:  19px;
  --leading:     1.65;                 /* 正文行高，不得低于 1.6 */

  /* —— 圆角 —— */
  --radius-md:   12px;
  --radius-lg:   28px;                 /* 输入区容器 */
  --radius-bubble: 22px;               /* 用户气泡 */
  --radius-full: 999px;                /* 发送按钮 */

  /* —— 间距（呼吸感） —— */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --msg-gap: 28px;                     /* 消息之间的垂直间距 */
  --page-pad: 16px;                    /* 移动端页面左右留白 */

  /* —— 动效：克制 —— */
  --transition: 200ms ease;

  /* —— 阴影：几乎不用，仅输入区悬浮一层极轻的 —— */
  --shadow-soft: 0 1px 3px rgba(31, 30, 29, 0.05);
  /* —— 底部 composer 外圈轻 halo（light theme） —— */
  --shadow-composer:
    0 0 18px rgba(0, 0, 0, 0.045),
    0 8px 22px rgba(0, 0, 0, 0.045);
}

/* —— 暗色模式（与默认一致，已是深色） —— */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary:    #1a1625;
    --bg-surface:    #14111e;
    --bubble-user:   #231e35;
    --bg-sunken:     #100e18;
    --text-primary:  #e8e4f0;
    --text-secondary:#9b94a8;
    --text-faint:    #6b6478;
    --border:        rgba(200, 180, 255, 0.10);
    --border-strong: rgba(200, 180, 255, 0.22);
    --shadow-soft:   none;
    --shadow-composer: var(--shadow-soft);
  }
}