/* MUSE 设计变量：中性灰阶 + 单一强调蓝，只用透明度做层次（Apple 观感） */
:root {
  color-scheme: light dark;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --bg: #f5f5f7;
  --bg-elevated: #ffffff;
  --bg-sunken: #ececee;
  --bg-input: rgba(120, 120, 128, 0.09);
  --bg-input-hover: rgba(120, 120, 128, 0.14);
  --bg-glass: rgba(250, 250, 252, 0.72);
  --bg-hover: rgba(120, 120, 128, 0.08);
  --bg-active: rgba(120, 120, 128, 0.14);

  --text: #1d1d1f;
  --text-2: #5c5c61;
  --text-3: #8a8a8f;
  --text-4: #b0b0b6;

  --line: rgba(60, 60, 67, 0.11);
  --line-strong: rgba(60, 60, 67, 0.2);

  --accent: #0071e3;
  --accent-hover: #0077ed;
  --accent-soft: rgba(0, 113, 227, 0.1);
  --accent-text: #ffffff;

  --green: #34c759;
  --orange: #ff9500;
  --red: #ff3b30;
  --purple: #af52de;
  --pink: #ff2d55;
  --teal: #30b0c7;

  --radius-xs: 7px;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.05);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 0 0 0.5px rgba(0, 0, 0, 0.05);
  --shadow-pop: 0 24px 64px rgba(0, 0, 0, 0.18), 0 0 0 0.5px rgba(0, 0, 0, 0.06);

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.28s;
  --dur-fast: 0.16s;

  /* 侧边栏：默认 72px 的窄轨，鼠标移上去 / 钉住时展开到 232px（浮层，不挤压内容） */
  --sidebar-w: 72px;
  --sidebar-w-open: 232px;
  --topbar-h: 56px;
  --content-max: 1080px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --bg-elevated: #1c1c1e;
    --bg-sunken: #141416;
    --bg-input: rgba(120, 120, 128, 0.22);
    --bg-input-hover: rgba(120, 120, 128, 0.3);
    --bg-glass: rgba(28, 28, 30, 0.72);
    --bg-hover: rgba(255, 255, 255, 0.07);
    --bg-active: rgba(255, 255, 255, 0.12);

    --text: #f5f5f7;
    --text-2: #a1a1a6;
    --text-3: #7c7c81;
    --text-4: #5a5a5f;

    --line: rgba(255, 255, 255, 0.11);
    --line-strong: rgba(255, 255, 255, 0.2);

    --accent: #0a84ff;
    --accent-hover: #1a8cff;
    --accent-soft: rgba(10, 132, 255, 0.16);

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-2: 0 2px 10px rgba(0, 0, 0, 0.55);
    --shadow-3: 0 14px 36px rgba(0, 0, 0, 0.6);
    --shadow-pop: 0 28px 70px rgba(0, 0, 0, 0.7);
  }
}

:root[data-theme="dark"] {
  --bg: #000000;
  --bg-elevated: #1c1c1e;
  --bg-sunken: #141416;
  --bg-input: rgba(120, 120, 128, 0.22);
  --bg-input-hover: rgba(120, 120, 128, 0.3);
  --bg-glass: rgba(28, 28, 30, 0.72);
  --bg-hover: rgba(255, 255, 255, 0.07);
  --bg-active: rgba(255, 255, 255, 0.12);
  --text: #f5f5f7;
  --text-2: #a1a1a6;
  --text-3: #7c7c81;
  --text-4: #5a5a5f;
  --line: rgba(255, 255, 255, 0.11);
  --line-strong: rgba(255, 255, 255, 0.2);
  --accent: #0a84ff;
  --accent-hover: #1a8cff;
  --accent-soft: rgba(10, 132, 255, 0.16);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 2px 10px rgba(0, 0, 0, 0.55);
  --shadow-3: 0 14px 36px rgba(0, 0, 0, 0.6);
  --shadow-pop: 0 28px 70px rgba(0, 0, 0, 0.7);
}