/* 设计令牌：颜色 / 间距 / 字体 / 圆角 / 阴影。明暗两套，跟随系统并可手动切换 */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs: 11px;
  --fs-sm: 12.5px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 26px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 22px;
  --sp-6: 30px;
  --sp-7: 42px;

  --r-sm: 6px;
  --r-md: 9px;
  --r-lg: 14px;
  --r-full: 999px;

  --dur: 160ms;
  --ease: cubic-bezier(.4, 0, .2, 1);

  --accent-h: 248;
  --accent: hsl(var(--accent-h) 62% 58%);
  --accent-strong: hsl(var(--accent-h) 62% 50%);
  --accent-soft: hsl(var(--accent-h) 62% 58% / .12);
  --accent-line: hsl(var(--accent-h) 62% 58% / .38);

  --ok: #10a37f;
  --ok-soft: #10a37f1f;
  --warn: #d68d16;
  --warn-soft: #d68d161f;
  --danger: #dc4a4a;
  --danger-soft: #dc4a4a1f;
  --info: #3b82c4;
  --info-soft: #3b82c41f;
}

:root, :root[data-theme="light"] {
  --bg: #f6f7f9;
  --bg-elev: #ffffff;
  --bg-sunken: #eceef2;
  --bg-hover: #00000008;
  --bg-active: hsl(var(--accent-h) 62% 58% / .1);
  --border: #dfe2e8;
  --border-strong: #c8ccd4;
  --text: #1c1f26;
  --text-2: #5a6070;
  --text-3: #8b90a0;
  --shadow-sm: 0 1px 2px #0f172a0f;
  --shadow-md: 0 4px 14px #0f172a14;
  --shadow-lg: 0 12px 34px #0f172a1f;
  --scrim: #1c1f2699;
}

:root[data-theme="dark"] {
  --bg: #101116;
  --bg-elev: #181a21;
  --bg-sunken: #0b0c10;
  --bg-hover: #ffffff0d;
  --bg-active: hsl(var(--accent-h) 62% 62% / .18);
  --border: #262932;
  --border-strong: #363b47;
  --text: #e7e9ee;
  --text-2: #a2a8b8;
  --text-3: #6f7688;
  --shadow-sm: 0 1px 2px #00000059;
  --shadow-md: 0 4px 16px #00000066;
  --shadow-lg: 0 16px 40px #00000080;
  --scrim: #05060ac2;
  --accent: hsl(var(--accent-h) 70% 68%);
  --accent-strong: hsl(var(--accent-h) 70% 62%);
  --ok: #34d3a6;
  --warn: #e5a83c;
  --danger: #f06a6a;
  --info: #63a6e0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #101116;
    --bg-elev: #181a21;
    --bg-sunken: #0b0c10;
    --bg-hover: #ffffff0d;
    --bg-active: hsl(var(--accent-h) 62% 62% / .18);
    --border: #262932;
    --border-strong: #363b47;
    --text: #e7e9ee;
    --text-2: #a2a8b8;
    --text-3: #6f7688;
    --shadow-sm: 0 1px 2px #00000059;
    --shadow-md: 0 4px 16px #00000066;
    --shadow-lg: 0 16px 40px #00000080;
    --scrim: #05060ac2;
    --accent: hsl(var(--accent-h) 70% 68%);
    --accent-strong: hsl(var(--accent-h) 70% 62%);
    --ok: #34d3a6;
    --warn: #e5a83c;
    --danger: #f06a6a;
    --info: #63a6e0;
  }
}