/* ============================================================
   设计令牌 (Design Tokens)
   风格: 暗夜 OLED × 极光玻璃 (Aurora Glass)
   语义化命名: color / spacing / typography / radius / shadow / motion
   ============================================================ */

:root {
  /* ---- 字号阶梯(用户可调, 由 JS 覆盖 --font-size) ---- */
  --font-size: 16px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: var(--font-size);
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 26px;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- 间距阶梯 ---- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 14px;
  --space-lg: 20px;
  --space-xl: 28px;

  /* ---- 圆角 ---- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-full: 9999px;

  /* ---- 动效 ---- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --duration-fast: 160ms;
  --duration-base: 260ms;
  --duration-slow: 420ms;

  /* ---- 玻璃质感 ---- */
  --glass-blur: 22px;
  --glass-saturate: 1.4;
  --glass-border-w: 1px;
}

/* ============ 暗夜 OLED(默认) ============ */
:root, [data-theme="dark"] {
  color-scheme: dark;

  /* 背景: 深空 + 极光光斑 */
  --color-bg: #070a13;
  --color-bg-2: #0c1120;
  --color-blob-1: rgba(124, 92, 255, .30);
  --color-blob-2: rgba(79, 209, 229, .18);
  --color-blob-3: rgba(255, 92, 200, .10);

  /* 玻璃 */
  --glass-bg: rgba(17, 23, 41, .58);
  --glass-bg-strong: rgba(17, 23, 41, .82);
  --glass-border: rgba(255, 255, 255, .10);
  --glass-highlight: rgba(255, 255, 255, .06);

  /* 文本 */
  --color-text: #eef1f9;
  --color-text-sub: #9aa3bb;
  --color-text-faint: #6b7590;

  /* 品牌色: 紫 → 青 */
  --color-primary: #8b7bff;
  --color-primary-2: #4fd1e5;
  --accent-grad: linear-gradient(135deg, #7c5cff 0%, #4fd1e5 100%);
  --accent-grad-soft: linear-gradient(135deg, rgba(124,92,255,.16), rgba(79,209,229,.12));

  /* 语义色 */
  --color-success: #3ddc97;
  --color-warning: #ffb648;
  --color-danger: #ff6b7d;
  --color-info: #58a6ff;

  /* 输入 / 悬浮 */
  --input-bg: rgba(255, 255, 255, .05);
  --hover: rgba(139, 123, 255, .12);
  --active: rgba(139, 123, 255, .20);

  /* 气泡 */
  --bubble-mine: linear-gradient(135deg, #6d4df5 0%, #3fa8d6 100%);
  --bubble-theirs: rgba(255, 255, 255, .07);
  --bubble-mine-text: #ffffff;
  --bubble-theirs-text: #eef1f9;

  /* 阴影 */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .28);
  --shadow-md: 0 10px 32px rgba(0, 0, 0, .38);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, .5);
  --glow: 0 0 24px rgba(124, 92, 255, .35);

  /* 滚动条 */
  --scroll-thumb: rgba(140, 155, 200, .28);
  --scroll-track: transparent;

  /* 背景网格微光 */
  --grid-line: rgba(255, 255, 255, .028);
}

/* ============ 白昼(浅色) ============ */
[data-theme="light"] {
  color-scheme: light;

  --color-bg: #f2f4fa;
  --color-bg-2: #e9edf7;
  --color-blob-1: rgba(124, 92, 255, .16);
  --color-blob-2: rgba(79, 209, 229, .14);
  --color-blob-3: rgba(255, 92, 200, .08);

  --glass-bg: rgba(255, 255, 255, .62);
  --glass-bg-strong: rgba(255, 255, 255, .88);
  --glass-border: rgba(255, 255, 255, .85);
  --glass-highlight: rgba(255, 255, 255, .5);

  --color-text: #1c2333;
  --color-text-sub: #5d6a79;
  --color-text-faint: #8b95ab;

  --color-primary: #6d4df5;
  --color-primary-2: #0f9cc0;
  --accent-grad: linear-gradient(135deg, #6d4df5 0%, #0f9cc0 100%);
  --accent-grad-soft: linear-gradient(135deg, rgba(109,77,245,.12), rgba(15,156,192,.10));

  --color-success: #17a86a;
  --color-warning: #e69500;
  --color-danger: #e5485c;
  --color-info: #2f7fe0;

  --input-bg: rgba(255, 255, 255, .8);
  --hover: rgba(109, 77, 245, .08);
  --active: rgba(109, 77, 245, .14);

  --bubble-mine: linear-gradient(135deg, #6d4df5 0%, #0f9cc0 100%);
  --bubble-theirs: rgba(255, 255, 255, .9);
  --bubble-mine-text: #ffffff;
  --bubble-theirs-text: #1c2333;

  --shadow-sm: 0 2px 8px rgba(60, 70, 110, .10);
  --shadow-md: 0 10px 32px rgba(60, 70, 110, .14);
  --shadow-lg: 0 24px 64px rgba(60, 70, 110, .18);
  --glow: 0 0 22px rgba(109, 77, 245, .22);

  --scroll-thumb: rgba(110, 125, 165, .30);
  --grid-line: rgba(30, 40, 80, .04);
}