/* ===== SHARED DESIGN TOKENS ===== */
/* index.html + chat.html 共用 */

:root {
  /* --- Colors --- */
  --bg: #0a0a0b;
  --surface: #111113;
  --surface-2: #1a1a1e;
  --border: #2a2a2e;
  --border-subtle: rgba(255,255,255,0.06);
  --text: #f0f0f0;
  --text-secondary: #8a8a8e;
  --text-tertiary: #5a5a5e;
  --accent: #e0e0e0;
  --accent-light: #d0d0d0;
  --header-bg: rgba(10, 10, 11, 0.85);
  --header-border: rgba(255, 255, 255, 0.06);

  /* --- Typography --- */
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-s:    13px;
  --fs-base: 14px;
  --fs-m:    15px;
  --fs-l:    16px;
  --fs-xl:   18px;

  --lh-tight:  1.2;
  --lh-normal: 1.5;
  --lh-body:   1.65;

  /* --- Border Radius --- */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-full: 999px;

  /* --- Spacing (4px grid) --- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
}

[data-theme="light"] {
  --bg: #fafafa;
  --surface: #ffffff;
  --surface-2: #f5f5f5;
  --border: #e5e5e5;
  --border-subtle: rgba(0,0,0,0.05);
  --text: #1a1a1a;
  --text-secondary: #666666;
  --text-tertiary: #999999;
  --accent: #333333;
  --accent-light: #555555;
  --header-bg: rgba(250, 250, 250, 0.88);
  --header-border: rgba(0, 0, 0, 0.06);
}