/* Chat 与登录页共用的 Catppuccin 语义色。 */
:root, :root[data-theme="light"] {
  --base: #eff1f5; --mantle: #e6e9ef; --crust: #dce0e8;
  --text: #4c4f69; --subtext0: #6c6f85; --overlay0: #9ca0b0;
  --surface0: #ccd0da; --surface1: #bcc0cc;
  --surface-hover: color-mix(in srgb, var(--surface0) 36%, var(--base));
  --blue: #1e66f5; --lavender: #7287fd; --green: #40a02b; --red: #d20f39;
  --yellow: #df8e1d;
  --shadow: 0 2px 12px rgba(76, 79, 105, .10);
}

/* Macchiato：与 Latte 同属柔和系，层级关系与亮色一一对应 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --base: #24273a; --mantle: #1e2030; --crust: #181926;
    --text: #cad3f5; --subtext0: #a5adcb; --overlay0: #6e738d;
    --surface0: #363a4f; --surface1: #494d64;
    --surface-hover: color-mix(in srgb, var(--surface0) 36%, var(--base));
    --blue: #8aadf4; --lavender: #b7bdf8; --green: #a6da95; --red: #ed8796;
    --yellow: #eed49f;
    --shadow: 0 2px 12px rgba(202, 211, 245, .10);
  }
}

:root[data-theme="dark"] {
  --base: #24273a; --mantle: #1e2030; --crust: #181926;
  --text: #cad3f5; --subtext0: #a5adcb; --overlay0: #6e738d;
  --surface0: #363a4f; --surface1: #494d64;
  --surface-hover: color-mix(in srgb, var(--surface0) 36%, var(--base));
  --blue: #8aadf4; --lavender: #b7bdf8; --green: #a6da95; --red: #ed8796;
  --yellow: #eed49f;
  --shadow: 0 2px 12px rgba(202, 211, 245, .10);
}

/* Semi 的组件只读取这些语义 token，不在页面上逐个覆盖 .semi-* 选择器。 */
:root,
body[theme-mode="light"],
body[theme-mode="dark"] {
  --semi-color-white: var(--base);
  --semi-color-black: var(--crust);
  --semi-color-primary: var(--blue);
  --semi-color-primary-hover: var(--lavender);
  --semi-color-primary-active: var(--blue);
  --semi-color-primary-disabled: var(--overlay0);
  --semi-color-primary-light-default: var(--surface0);
  --semi-color-primary-light-hover: var(--surface1);
  --semi-color-primary-light-active: var(--surface1);
  --semi-color-secondary: var(--lavender);
  --semi-color-secondary-hover: var(--blue);
  --semi-color-secondary-active: var(--blue);
  --semi-color-tertiary: var(--subtext0);
  --semi-color-default: var(--surface0);
  --semi-color-default-hover: var(--surface1);
  --semi-color-default-active: var(--surface1);
  --semi-color-info: var(--blue);
  --semi-color-success: var(--green);
  --semi-color-danger: var(--red);
  --semi-color-warning: var(--yellow);
  --semi-color-focus-border: var(--lavender);
  --semi-color-disabled-text: var(--overlay0);
  --semi-color-disabled-border: var(--surface0);
  --semi-color-disabled-bg: var(--surface0);
  --semi-color-disabled-fill: var(--surface0);
  --semi-color-link: var(--blue);
  --semi-color-link-hover: var(--lavender);
  --semi-color-border: var(--surface0);
  --semi-color-nav-bg: var(--base);
  --semi-color-fill-0: var(--surface0);
  --semi-color-fill-1: var(--surface1);
  --semi-color-fill-2: var(--surface1);
  --semi-color-bg-0: var(--base);
  --semi-color-bg-1: var(--mantle);
  --semi-color-bg-2: var(--crust);
  --semi-color-bg-3: var(--surface0);
  --semi-color-bg-4: var(--surface1);
  --semi-color-text-0: var(--text);
  --semi-color-text-1: var(--subtext0);
  --semi-color-text-2: var(--overlay0);
  --semi-color-text-3: var(--overlay0);
  --semi-color-shadow: var(--shadow);
  --semi-shadow-elevated: var(--shadow);
}

/* 氛围光 + 玻璃质感 token（主应用与登录页共用） */
:root,
:root[data-theme="light"] {
  --ambient-a: color-mix(in srgb, var(--blue) 20%, transparent);
  --ambient-b: color-mix(in srgb, var(--lavender) 14%, transparent);
  --glass-bg: color-mix(in srgb, var(--base) 90%, var(--mantle));
  --glass-border: color-mix(in srgb, var(--surface0) 50%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ambient-a: color-mix(in srgb, var(--blue) 20%, transparent);
    --ambient-b: color-mix(in srgb, var(--lavender) 14%, transparent);
    --glass-bg: color-mix(in srgb, var(--base) 90%, var(--mantle));
    --glass-border: color-mix(in srgb, var(--surface0) 50%, transparent);
  }
}

:root[data-theme="dark"] {
  --ambient-a: color-mix(in srgb, var(--blue) 20%, transparent);
  --ambient-b: color-mix(in srgb, var(--lavender) 14%, transparent);
  --glass-bg: color-mix(in srgb, var(--base) 90%, var(--mantle));
  --glass-border: color-mix(in srgb, var(--surface0) 50%, transparent);
}

html {
  background: var(--base);
  --ambient-bg:
    radial-gradient(ellipse 70% 55% at 8% -5%, var(--ambient-a), transparent 55%),
    radial-gradient(ellipse 55% 45% at 95% 105%, var(--ambient-b), transparent 50%),
    radial-gradient(
      ellipse 40% 35% at 55% 45%,
      color-mix(in srgb, var(--lavender) 6%, transparent),
      transparent 70%
    );
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--ambient-bg);
}

#root {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
}