/* ==========================================================================
   设计令牌（design tokens）
   换品牌 / 换配色只需要改这一个文件。
   命名按语义（--c-fg、--c-border），不按色相（--c-blue-500）——暗色主题
   才能只覆盖值而不改用法。

   对比度：正文与 --c-fg-muted 对其底色均 ≥4.5:1；--c-fg-subtle 仅用于
   辅助说明与占位框标签，已按 ≥4.5:1 校准（易踩的坑是暗色下的 muted 太暗）。
   ========================================================================== */

:root {
  /* --- 颜色：浅色（默认） --- */
  --c-bg: #ffffff;
  --c-bg-elev: #f7f8fb; /* 卡片、抬升面 */
  --c-bg-sunken: #eef1f7; /* 页面底、代码块、表头 */
  --c-fg: #14161c;
  --c-fg-muted: #565c6b;
  --c-fg-subtle: #6b7385;
  --c-border: #e2e6ef;
  --c-border-strong: #c9d0de;

  --c-brand: #2450c8; /* 白字在其上 6.9:1 */
  --c-brand-fg: #ffffff;
  --c-brand-soft: #e8eefc;

  /* 状态色：成对使用（--c-x 是 --c-x-soft 上的文字色） */
  --c-ok: #0f6b3f;
  --c-ok-soft: #e3f5ea;
  --c-warn: #8a5300;
  --c-warn-soft: #fdf0da;
  --c-danger: #a3232b;
  --c-danger-soft: #fdeaec;
  --c-info: #1c4f9c;
  --c-info-soft: #e6eefb;

  --c-focus: #2450c8;

  --shadow-1: 0 1px 2px rgba(20, 22, 28, 0.06), 0 1px 3px rgba(20, 22, 28, 0.04);
  --shadow-2: 0 4px 12px rgba(20, 22, 28, 0.08), 0 1px 3px rgba(20, 22, 28, 0.05);

  /* --- 间距（4px 基数） --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* --- 排版 --- */
  --fs-xs: 0.8125rem; /* 13px */
  --fs-sm: 0.875rem; /* 14px */
  --fs-base: 1rem; /* 16px */
  --fs-lg: 1.125rem; /* 18px */
  --fs-xl: 1.375rem; /* 22px */
  --fs-2xl: 1.75rem; /* 28px */
  --fs-3xl: clamp(2rem, 1.4rem + 2.4vw, 3rem); /* 32–48px，hero */

  /* 中文正文需要比西文更松的行高 */
  --lh-tight: 1.25;
  --lh-base: 1.7;
  --lh-loose: 1.9;

  /* 系统字体栈：不加载任何 webfont，保证离线可用 */
  --ff-sans: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei",
    "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
  --ff-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* --- 形状与动效 --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --container: 1120px;

  --dur-fast: 120ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* 断点（媒体查询不能用 CSS 变量，仅作记录）：
     ≥768px 特性卡两列 + 目录变 sticky 侧栏
     ≥1024px 特性卡三列 + hero 字号放大 */
}

/* 暗色主题。用 prefers-color-scheme 自动跟随；
   [data-theme="dark"] 是将来加手动开关的扩展点（v1 不做开关）。 */
@media (prefers-color-scheme: dark) {
  :root {
    --c-bg: #0e1117;
    --c-bg-elev: #161b24;
    --c-bg-sunken: #1c222c;
    --c-fg: #e8ecf4;
    --c-fg-muted: #a8b3c7;
    --c-fg-subtle: #8b97ac;
    --c-border: #262e3b;
    --c-border-strong: #3a4557;

    --c-brand: #7ea6ff; /* 深色字在其上 7.9:1 */
    --c-brand-fg: #0b1020;
    --c-brand-soft: #1b2740;

    --c-ok: #7fd8a4;
    --c-ok-soft: #12301f;
    --c-warn: #f0c274;
    --c-warn-soft: #33260f;
    --c-danger: #f2a2a8;
    --c-danger-soft: #3a1c1f;
    --c-info: #9dc0f7;
    --c-info-soft: #16263f;

    --c-focus: #9dc0f7;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.5);
  }
}

/* 显式指定主题时覆盖系统偏好（与上面的暗色块同值）。 */
:root[data-theme="dark"] {
  --c-bg: #0e1117;
  --c-bg-elev: #161b24;
  --c-bg-sunken: #1c222c;
  --c-fg: #e8ecf4;
  --c-fg-muted: #a8b3c7;
  --c-fg-subtle: #8b97ac;
  --c-border: #262e3b;
  --c-border-strong: #3a4557;
  --c-brand: #7ea6ff;
  --c-brand-fg: #0b1020;
  --c-brand-soft: #1b2740;
  --c-ok: #7fd8a4;
  --c-ok-soft: #12301f;
  --c-warn: #f0c274;
  --c-warn-soft: #33260f;
  --c-danger: #f2a2a8;
  --c-danger-soft: #3a1c1f;
  --c-info: #9dc0f7;
  --c-info-soft: #16263f;
  --c-focus: #9dc0f7;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.5);
}