/* ============================================================
   设计令牌（Design Tokens）
   ------------------------------------------------------------
   主题：暖光阅读（参考 awesome-design-md 的 claude DESIGN.md 令牌）
   - 日间：奶油画布 #faf9f5 + 珊瑚主色 #cc785c + 衬线标题
   - 夜间：同一套语义变量，换成暖调深色 surface，保持同一设计语言

   规则（写新样式时必须遵守）：
   1. 其它 CSS 文件里禁止出现任何 hex / rgb 字面量，一律引用这里的变量；
   2. 日夜切换只改这里的变量值，组件样式一行都不用改；
   3. 深浅两套都要保证文字与背景对比度达标；
   4. 阴影在夜间要减弱（深色背景上大阴影会脏），用 --shadow-* 统一控制。
   ============================================================ */

:root {
  /* ---------- 字体 ---------- */
  /* 标题用衬线（claude 的 Copernicus/Tiempos 无授权，用系统衬线兜底） */
  --font-display: 'Songti SC', 'Source Han Serif SC', 'Noto Serif CJK SC',
    Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas,
    'Liberation Mono', monospace;

  /* ---------- 字号阶梯（整数，8 点栅格友好） ---------- */
  --fs-display: 32px;
  --fs-h1: 26px;
  --fs-h2: 21px;
  --fs-h3: 18px;
  --fs-body: 15px;
  --fs-sm: 14px;
  --fs-xs: 13px;
  --fs-xxs: 12px;

  --lh-tight: 1.2;
  --lh-snug: 1.4;
  --lh-body: 1.6;
  --lh-loose: 1.75;

  /* ---------- 间距（8 点栅格） ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* ---------- 圆角 ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;

  /* ---------- 动效 ---------- */
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 280ms;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* ---------- 布局 ---------- */
  --sidebar-w: 264px;
  --view-max: 1120px;
  --chat-max: 800px;
  --topbar-h: 60px;
}

/* ============================================================
   日间模式（默认）
   ============================================================ */
:root,
:root[data-theme='light'] {
  color-scheme: light;

  /* 画布与表面 */
  --canvas: #faf9f5;
  --surface-1: #ffffff;
  --surface-2: #f5f0e8;
  --surface-3: #efe9de;
  --surface-4: #e8e0d2;
  /* 反色块：代码块、深色卡片 */
  --surface-invert: #181715;
  --surface-invert-2: #1f1e1b;
  --on-invert: #faf9f5;
  --on-invert-soft: #a09d96;

  /* 边框 */
  --hairline: #e6dfd8;
  --hairline-soft: #ebe6df;
  --hairline-strong: #d8cfc4;

  /* 文字 */
  --ink: #141413;
  --ink-body: #3d3d3a;
  --ink-muted: #6c6a64;
  --ink-subtle: #8e8b82;

  /* 主色 */
  --primary: #cc785c;
  --primary-hover: #d98a70;
  --primary-active: #a9583e;
  --primary-soft: #f6e9e2;
  --on-primary: #ffffff;
  --focus-ring: rgba(204, 120, 92, .32);

  /* 语义色 */
  --ok: #5db872;
  --ok-soft: #e8f5ea;
  --warn: #d4a017;
  --warn-soft: #fbf2dc;
  --danger: #c64545;
  --danger-soft: #fbe9e9;
  --info: #5db8a6;
  --info-soft: #e6f4f1;

  /* 遮罩 */
  --scrim: rgba(20, 20, 19, .38);

  /* 阴影（claude 的哲学是色块优先、阴影极少，所以整体很轻） */
  --shadow-0: none;
  --shadow-1: 0 1px 3px rgba(20, 20, 19, .08);
  --shadow-2: 0 6px 20px rgba(20, 20, 19, .10);
  --shadow-3: 0 16px 44px rgba(20, 20, 19, .16);

  /* 角色扮演文本渲染 */
  --rp-speech: #a9583e;
  --rp-inner: #8e8b82;
  --rp-action: #6c6a64;
  --rp-system-bg: #f5f0e8;
  --rp-system-fg: #6c6a64;
  --rp-think-bg: #f5f0e8;

  /* 标签气泡：8 组稳定配色（按标签文本哈希取色） */
  --tag-1-bg: #f6e9e2; --tag-1-fg: #a9583e;
  --tag-2-bg: #e6f4f1; --tag-2-fg: #2f7f70;
  --tag-3-bg: #eae6f6; --tag-3-fg: #5d4a9c;
  --tag-4-bg: #fbf2dc; --tag-4-fg: #8a6a12;
  --tag-5-bg: #e8f0f8; --tag-5-fg: #35618f;
  --tag-6-bg: #f8e8f0; --tag-6-fg: #94427a;
  --tag-7-bg: #e9f2e6; --tag-7-fg: #4a7a3c;
  --tag-8-bg: #f0ece6; --tag-8-fg: #6c6a64;
}

/* ============================================================
   夜间模式（同一主题的暗调，不是另一套设计）
   ============================================================ */
:root[data-theme='dark'] {
  color-scheme: dark;

  --canvas: #16150f;
  --surface-1: #1f1e1b;
  --surface-2: #252320;
  --surface-3: #2d2a26;
  --surface-4: #35312c;
  --surface-invert: #0f0e0c;
  --surface-invert-2: #171613;
  --on-invert: #f3efe7;
  --on-invert-soft: #8e8b82;

  --hairline: #332f2a;
  --hairline-soft: #2a2723;
  --hairline-strong: #443f38;

  --ink: #f3efe7;
  --ink-body: #ddd7cc;
  --ink-muted: #a8a29a;
  --ink-subtle: #837d75;

  /* 深底上把珊瑚提亮一档，保证可读性 */
  --primary: #e0906f;
  --primary-hover: #eda483;
  --primary-active: #c4744f;
  --primary-soft: #3a2a22;
  --on-primary: #1a1512;
  --focus-ring: rgba(224, 144, 111, .36);

  --ok: #74c98a;
  --ok-soft: #25332a;
  --warn: #e0b53f;
  --warn-soft: #372f1c;
  --danger: #e07070;
  --danger-soft: #3a2424;
  --info: #74c9b8;
  --info-soft: #1f322f;

  --scrim: rgba(0, 0, 0, .58);

  /* 深色背景上阴影几乎不可见，改用极轻阴影 + 依赖 surface 阶梯表达层级 */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .40);
  --shadow-2: 0 6px 18px rgba(0, 0, 0, .46);
  --shadow-3: 0 16px 40px rgba(0, 0, 0, .56);

  --rp-speech: #eda483;
  --rp-inner: #948d84;
  --rp-action: #a8a29a;
  --rp-system-bg: #252320;
  --rp-system-fg: #a8a29a;
  --rp-think-bg: #252320;

  --tag-1-bg: #3d2a22; --tag-1-fg: #e8ac91;
  --tag-2-bg: #1f322f; --tag-2-fg: #8ad5c5;
  --tag-3-bg: #2b2540; --tag-3-fg: #b3a4e8;
  --tag-4-bg: #383018; --tag-4-fg: #e3c86a;
  --tag-5-bg: #1f2c3a; --tag-5-fg: #93c2ea;
  --tag-6-bg: #382432; --tag-6-fg: #e099c7;
  --tag-7-bg: #26331f; --tag-7-fg: #a6d194;
  --tag-8-bg: #2e2b27; --tag-8-fg: #bdb6ab;
}