/* 设计变量。
 *
 * 所有颜色、间距、圆角、动画时长只在这里定义一次。组件里一律用 var()，
 * 不许再出现字面色值 —— 这是上一版最大的问题：同一个"卡片背景"在不同
 * 地方写了三个略微不同的灰，改主题时改不干净。
 *
 * 深色优先：这是运维工具，多数时候开着不关，深色长时间看不刺眼。
 * 浅色主题通过 [data-theme="light"] 覆盖同一组变量，组件不需要知道。
 */

:root {
  /* ── 底色 ─────────────────────────────────────────────────────── */
  --bg: #09090b;            /* 页面背景 */
  --bg-sidebar: #0c0c0f;    /* 侧栏 */
  --bg-card: #18181b;       /* 卡片 */
  --bg-hover: #202024;      /* 悬浮 */
  --bg-input: #121214;      /* 输入框 */
  --bg-subtle: #131316;     /* 表头这类"比卡片略深一点" */

  /* ── 描边 ─────────────────────────────────────────────────────── */
  --line: #27272a;          /* 默认 */
  --line-strong: #3f3f46;   /* 强调、悬浮 */

  /* ── 文字 ─────────────────────────────────────────────────────── */
  --fg: #fafafa;            /* 主文字 */
  --fg-2: #a1a1aa;          /* 次级 */
  --fg-3: #71717a;          /* 弱提示 */
  --fg-disabled: #52525b;   /* 禁用 */

  /* ── 主题色 ───────────────────────────────────────────────────── */
  --accent: #f59e0b;
  --accent-hover: #d97706;
  --accent-soft: rgba(245, 158, 11, .12);
  --accent-ring: rgba(245, 158, 11, .35);
  /* 琥珀色上放深色文字对比度才够（白字在 #f59e0b 上只有 2.1:1） */
  --on-accent: #1c1300;

  /* ── 状态色 ───────────────────────────────────────────────────── */
  --ok: #22c55e;
  --ok-soft: rgba(34, 197, 94, .12);
  --warn: #f59e0b;
  --warn-soft: rgba(245, 158, 11, .12);
  --err: #ef4444;
  --err-soft: rgba(239, 68, 68, .12);
  --info: #3b82f6;
  --info-soft: rgba(59, 130, 246, .12);
  --muted-soft: rgba(161, 161, 170, .12);

  /* ── 字体 ─────────────────────────────────────────────────────── */
  /* Inter 排第一，装了就用；没装退回系统字体。不引 CDN，所以不做
   * @font-face —— 为了一个字体多打几百 KB 进二进制不划算。
   * 中文必须显式给 PingFang / 微软雅黑，否则某些系统会退到宋体，
   * 小字号下几乎看不清。 */
  --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto,
          "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 30px;

  /* ── 间距 ─────────────────────────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* ── 圆角 ─────────────────────────────────────────────────────── */
  --r-sm: 6px;
  --r: 8px;
  --r-lg: 12px;
  --r-full: 999px;

  /* ── 阴影 ─────────────────────────────────────────────────────── */
  /* 深色背景上阴影几乎看不见，所以主要靠边框分层；阴影只用于浮层。 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 4px 12px rgba(0, 0, 0, .45);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, .55);

  /* ── 层级 ─────────────────────────────────────────────────────── */
  --z-sticky: 10;
  --z-sidebar: 40;
  --z-backdrop: 50;
  --z-modal: 60;
  --z-toast: 70;

  /* ── 动画 ─────────────────────────────────────────────────────── */
  --t-fast: 150ms;
  --t: 180ms;
  --t-slow: 220ms;
  --ease: cubic-bezier(.4, 0, .2, 1);

  /* ── 布局 ─────────────────────────────────────────────────────── */
  --sidebar-w: 250px;
  --sidebar-w-collapsed: 64px;
  --topbar-h: 64px;
  --page-pad: 24px;

  color-scheme: dark;
}

/* 浅色主题：只覆盖变量，组件一行都不用改。
 *
 * 不是简单取反 —— 浅色下边框要更浅、阴影要更实，否则卡片会糊成一片。
 * 琥珀色在白底上对比度不够，主色按钮改用更深的 amber-600。 */
:root[data-theme="light"] {
  --bg: #fafafa;
  --bg-sidebar: #ffffff;
  --bg-card: #ffffff;
  --bg-hover: #f4f4f5;
  --bg-input: #ffffff;
  --bg-subtle: #f9f9fa;

  --line: #e4e4e7;
  --line-strong: #d4d4d8;

  --fg: #18181b;
  --fg-2: #52525b;
  --fg-3: #71717a;
  --fg-disabled: #a1a1aa;

  --accent: #d97706;
  --accent-hover: #b45309;
  --accent-soft: rgba(217, 119, 6, .1);
  --accent-ring: rgba(217, 119, 6, .3);
  --on-accent: #ffffff;

  --ok: #16a34a;
  --ok-soft: rgba(22, 163, 74, .1);
  --warn: #d97706;
  --warn-soft: rgba(217, 119, 6, .1);
  --err: #dc2626;
  --err-soft: rgba(220, 38, 38, .1);
  --info: #2563eb;
  --info-soft: rgba(37, 99, 235, .1);
  --muted-soft: rgba(113, 113, 122, .1);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
  --shadow: 0 4px 12px rgba(0, 0, 0, .08);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, .12);

  color-scheme: light;
}

/* 手机上留白收窄 —— 24px 的内边距在 375px 宽的屏幕上会吃掉 13% 的宽度 */
@media (max-width: 768px) {
  :root { --page-pad: 16px; }
}