/* 设计变量：亮色写在 :root，暗色写在 html.dark。组件只引用这里的变量。 */
:root {
  --radius: 10px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-card: 20px;
  --radius-dialog: 24px;

  --background: oklch(1 0 0);
  --foreground: oklch(0.141 0.005 285.823);
  --card: oklch(1 0 0);
  --popover: oklch(1 0 0);
  --primary: oklch(0.21 0.006 285.885);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.967 0.001 286.375);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --muted: oklch(0.967 0.001 286.375);
  --muted-foreground: oklch(0.552 0.016 285.938);
  --accent: oklch(0.967 0.001 286.375);
  --accent-foreground: oklch(0.21 0.006 285.885);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.92 0.004 286.32);
  --input: oklch(0.92 0.004 286.32);
  --ring: oklch(0.705 0.015 286.067);

  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);

  /* 语义色：成功、警告、危险、严重、信息、强调、国际版 */
  --success: #059669;
  --warning: #d97706;
  --danger: #dc2626;
  --severe: #e11d48;
  --info: #2563eb;
  --violet: #7c3aed;
  --sky: #0369a1;

  --dock-item: #e5e7eb;
  --tooltip-bg: #f3f4f6;
  --tooltip-fg: #404040;
  --tooltip-border: #e5e7eb;

  --shadow-dialog: 0 24px 60px rgba(15, 23, 42, 0.10);
  --shadow-toast: 0 16px 40px -18px rgba(15, 23, 42, 0.30), 0 2px 8px -4px rgba(15, 23, 42, 0.10);
  --shadow-dock: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --mask: rgba(0, 0, 0, 0.16);
  --pill-active: #ffffff;

  --font-sans: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;

  color-scheme: light;
}

html.dark {
  --background: oklch(0.141 0.005 285.823);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.21 0.006 285.885);
  --popover: oklch(0.21 0.006 285.885);
  --primary: oklch(0.92 0.004 286.32);
  --primary-foreground: oklch(0.21 0.006 285.885);
  --secondary: oklch(0.274 0.006 286.033);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.274 0.006 286.033);
  --muted-foreground: oklch(0.705 0.015 286.067);
  --accent: oklch(0.274 0.006 286.033);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.552 0.016 285.938);

  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);

  --success: #34d399;
  --warning: #fbbf24;
  --danger: #f87171;
  --severe: #fb7185;
  --info: #60a5fa;
  --violet: #a78bfa;
  --sky: #38bdf8;

  --dock-item: #262626;
  --tooltip-bg: #262626;
  --tooltip-fg: #ffffff;
  --tooltip-border: #171717;

  --shadow-dialog: 0 24px 60px rgba(0, 0, 0, 0.42);
  --shadow-toast: 0 18px 44px -18px rgba(0, 0, 0, 0.7);
  --shadow-dock: 0 10px 15px -3px rgba(255, 255, 255, 0.05), 0 4px 6px -4px rgba(255, 255, 255, 0.05);
  --mask: rgba(0, 0, 0, 0.55);
  --pill-active: rgba(255, 255, 255, 0.08);

  color-scheme: dark;
}