/* ============================================================
 * theme.css — 外观定制的唯一入口（变量层，不含任何布局规则）
 *
 * 1. 改配色/毛玻璃/字体/动画速度：只改本文件即可全站生效。
 * 2. 页面内「设置 → 外观」用行内变量覆盖这里的值（仅本机浏览器）。
 * 3. 新增主题：复制一个 [data-theme="xxx"] 块改颜色，
 *    再在 index.html 主题下拉框加一项即可，无需构建。
 *
 * 字体：思源宋体（Noto Serif SC 400/700）已本地化在
 *       /vendor/fonts/notoserifsc.css，不依赖 Google 外网。
 * 图标：Font Awesome 6.5.2 本地化在 /vendor/fontawesome/。
 * ============================================================ */

:root,
[data-theme="light"] {
  /* ---- 颜色 ---- */
  --bg: #eef1f7;
  --bg-soft: #e6eaf3;
  --sidebar: #ffffff;
  --panel: #ffffff;
  --border: #dfe4ee;
  --text: #1c2233;
  --text-2: #6b7488;
  --accent: #3f6cf0;
  --accent-2: #2b52cf;
  --accent-contrast: #ffffff;
  --user-bubble: #3f6cf0;
  --user-bubble-text: #ffffff;
  --ai-bubble: #ffffff;
  --code-bg: #f2f4f9;
  --danger: #d9484b;

  /* ---- 背景层（页面底色 + 三团弥散光斑，毛玻璃靠它们透出质感）---- */
  --bg-grad:
    radial-gradient(1100px 720px at 8% -10%, #e3ecff 0%, rgba(227, 236, 255, 0) 62%),
    radial-gradient(900px 640px at 96% 4%, #ffe8dd 0%, rgba(255, 232, 221, 0) 58%),
    linear-gradient(178deg, #f7f9fd 0%, #e9edf6 100%);
  --glow-1: rgba(96, 132, 255, .38);
  --glow-2: rgba(255, 150, 110, .30);
  --glow-3: rgba(64, 200, 176, .24);

  /* ---- 毛玻璃 ---- */
  --glass-alpha: .66;          /* 面板不透明度：0.5 很透，0.9 接近实心 */
  --glass-blur: 20px;          /* 模糊半径 */
  --glass-border: rgba(255, 255, 255, .72);
  --glass-hi: rgba(255, 255, 255, .85);   /* 顶部内高光 */
  --glass-shade: rgba(24, 32, 56, .10);

  /* ---- 其它外观 ---- */
  --accent-grad: linear-gradient(135deg, var(--accent) 0%, #6a8dff 100%);
  --radius: 16px;
  --fs: 15px;
  --font: "Noto Serif SC", "Source Han Serif SC", "Songti SC", Georgia, serif;
  --mono: ui-monospace, "Cascadia Code", Consolas, "JetBrains Mono", monospace;
  --shadow: 0 10px 30px rgba(20, 30, 60, .10);
  --shadow-lg: 0 22px 60px rgba(20, 30, 60, .16);
  --ring: rgba(63, 108, 240, .28);

  /* ---- 动效节奏 ---- */
  --dur: .22s;
  --dur-slow: .45s;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

[data-theme="dark"] {
  --bg: #12151c;
  --bg-soft: #191d26;
  --sidebar: #14181f;
  --panel: #1b2029;
  --border: #2b323e;
  --text: #e7eaf1;
  --text-2: #98a2b3;
  --accent: #6b8cff;
  --accent-2: #5573e0;
  --accent-contrast: #ffffff;
  --user-bubble: #4a6fe0;
  --user-bubble-text: #f4f7ff;
  --ai-bubble: #1b2029;
  --code-bg: #12161d;
  --danger: #f0736f;

  --bg-grad:
    radial-gradient(1100px 700px at 10% -8%, #1d2740 0%, rgba(29, 39, 64, 0) 60%),
    radial-gradient(900px 620px at 94% 6%, #2a2036 0%, rgba(42, 32, 54, 0) 58%),
    linear-gradient(178deg, #14181f 0%, #0e1116 100%);
  --glow-1: rgba(90, 120, 255, .26);
  --glow-2: rgba(180, 90, 220, .18);
  --glow-3: rgba(40, 190, 170, .16);

  --glass-alpha: .58;
  --glass-blur: 22px;
  --glass-border: rgba(255, 255, 255, .10);
  --glass-hi: rgba(255, 255, 255, .12);
  --glass-shade: rgba(0, 0, 0, .35);

  --accent-grad: linear-gradient(135deg, #5b7cf5 0%, #8f6cf0 100%);
  --shadow: 0 12px 32px rgba(0, 0, 0, .45);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, .55);
  --ring: rgba(107, 140, 255, .35);
}

[data-theme="paper"] {
  --bg: #f0e6d2;
  --bg-soft: #e7dbc2;
  --sidebar: #f4ead6;
  --panel: #f9f2e3;
  --border: #dccaa4;
  --text: #3f3427;
  --text-2: #8b7a5d;
  --accent: #a3662a;
  --accent-2: #855220;
  --accent-contrast: #fdf8ee;
  --user-bubble: #8f5c26;
  --user-bubble-text: #fbf3e3;
  --ai-bubble: #f9f2e3;
  --code-bg: #ece0c6;
  --danger: #b34a37;

  --bg-grad:
    radial-gradient(1000px 680px at 6% -6%, #f7eeda 0%, rgba(247, 238, 218, 0) 62%),
    radial-gradient(880px 620px at 95% 8%, #e9d9b8 0%, rgba(233, 217, 184, 0) 60%),
    linear-gradient(178deg, #f4ebd9 0%, #e8dcc2 100%);
  --glow-1: rgba(214, 176, 112, .38);
  --glow-2: rgba(163, 102, 42, .22);
  --glow-3: rgba(120, 150, 96, .20);

  --glass-alpha: .72;
  --glass-blur: 16px;
  --glass-border: rgba(255, 250, 238, .80);
  --glass-hi: rgba(255, 252, 244, .90);
  --glass-shade: rgba(96, 72, 32, .14);

  --accent-grad: linear-gradient(135deg, #a3662a 0%, #c8912f 100%);
  --radius: 12px;
  --shadow: 0 10px 26px rgba(96, 72, 32, .16);
  --shadow-lg: 0 22px 54px rgba(96, 72, 32, .22);
  --ring: rgba(163, 102, 42, .30);
}

[data-theme="neon"] {
  --bg: #070a10;
  --bg-soft: #0d1219;
  --sidebar: #090d14;
  --panel: #0f1620;
  --border: #1b4a48;
  --text: #d9fbf5;
  --text-2: #6ec3b8;
  --accent: #00e6bf;
  --accent-2: #00b998;
  --accent-contrast: #03110d;
  --user-bubble: #00786a;
  --user-bubble-text: #d9fbf5;
  --ai-bubble: #0f1620;
  --code-bg: #081015;
  --danger: #ff5d7a;

  --bg-grad:
    radial-gradient(1000px 660px at 12% -10%, #0b2b2f 0%, rgba(11, 43, 47, 0) 60%),
    radial-gradient(860px 600px at 92% 4%, #24103a 0%, rgba(36, 16, 58, 0) 58%),
    linear-gradient(178deg, #080c13 0%, #04060a 100%);
  --glow-1: rgba(0, 230, 191, .28);
  --glow-2: rgba(140, 80, 255, .24);
  --glow-3: rgba(0, 150, 255, .20);

  --glass-alpha: .52;
  --glass-blur: 24px;
  --glass-border: rgba(0, 230, 191, .22);
  --glass-hi: rgba(0, 230, 191, .18);
  --glass-shade: rgba(0, 0, 0, .45);

  --accent-grad: linear-gradient(135deg, #00e6bf 0%, #6de5ff 100%);
  --radius: 10px;
  --shadow: 0 0 22px rgba(0, 230, 191, .14);
  --shadow-lg: 0 0 46px rgba(0, 230, 191, .20);
  --ring: rgba(0, 230, 191, .38);
}