/* ══════════════════════════════════════════════════════════════════
   设计 token —— **本项目唯一允许出现色值的地方**

   来源：design-md 语料库 `designs/claude/DESIGN.md`（Format A）。
   下面的每一个值都从该文件的 YAML frontmatter 逐条抄来，
   **没有自行发明任何一个色值、字号或间距**。

   注意：纪律：其它任何 CSS 文件、模板、JS 里都**不得内联 hex**。
      需要新颜色时，先问"语料里有没有对应的 token"，没有就用最接近的，
      并在交付说明里标为扩展。

   语料的硬约束（Do/Don't 原文）也记在这里，改样式前先读：
     · 画布永远是奶油底，**不用纯白、不用冷灰** —— 暖调是这个系统的命
     · 珊瑚色 --primary 只用于主 CTA 和整块珊瑚 callout，**不要到处刷**
     · 衬线大标题 weight 永远是 400，**不加粗**（700 会显得浮夸）
     · 明暗交替是节奏机制，**连续两段不用同一种表面**
     · 不要引入第四种表面色（没有紫色卡片、没有绿色区块）
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* ── 品牌与强调色 ──────────────────────────────────────────── */
  --primary:          #cc785c;   /* 珊瑚 —— 签名色，稀缺使用 */
  --primary-active:   #a9583e;   /* 按下/悬停加深 */
  --primary-disabled: #e6dfd8;

  /* ── 表面色（三档，明暗交替靠它们）─────────────────────────── */
  --canvas:               #faf9f5;  /* 页面底色。奶油，绝不换纯白 */
  --surface-soft:         #f5f0e8;  /* 区块分隔、极浅色带 */
  --surface-card:         #efe9de;  /* 内容卡，比画布深一档 */
  --surface-cream-strong: #e8e0d2;  /* 选中的 tab、强调色带 */
  --surface-dark:          #181715; /* 深色产品面：机框、页脚 */
  --surface-dark-elevated: #252320; /* 深色面里的浮起卡 */
  --surface-dark-soft:     #1f1e1b; /* 深色面里的代码块 */

  /* ── 文字 ──────────────────────────────────────────────────── */
  --ink:         #141413;  /* 标题与主文字。暖黑，非纯黑 */
  --body-strong: #252523;
  --body:        #3d3d3a;  /* 正文默认色 */
  --muted:       #6c6a64;  /* 次级文字、面包屑 */
  --muted-soft:  #8e8b82;  /* 说明、版权行 */
  --on-primary:  #ffffff;  /* 珊瑚底上的字 */
  --on-dark:     #faf9f5;  /* 深色面上的字（刻意用奶油调，呼应画布） */
  --on-dark-soft:#a09d96;

  /* ── 分隔线 ────────────────────────────────────────────────── */
  --hairline:      #e6dfd8;  /* 与 primary-disabled 同值：边框是"一级高度"而非墨线 */
  --hairline-soft: #ebe6df;

  /* ── 语义色 ────────────────────────────────────────────────── */
  --success: #5db872;
  --warning: #d4a017;
  --error:   #c64545;
  --accent-teal:  #5db8a6;
  --accent-amber: #e8a55a;

  /* ── 圆角（语料的层级：按钮 8 / 内容卡 12 / 大容器 16）─────── */
  --rounded-xs:  4px;
  --rounded-sm:  6px;
  --rounded-md:  8px;   /* 按钮、输入框、tab */
  --rounded-lg:  12px;  /* 内容卡、气泡 */
  --rounded-xl:  16px;  /* 大容器、iPhone 机框 */
  --rounded-pill: 9999px;

  /* ── 间距（基准 4px）───────────────────────────────────────── */
  --sp-xxs: 4px;
  --sp-xs:  8px;
  --sp-sm:  12px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  32px;   /* 卡片内边距 */
  --sp-xxl: 48px;
  --sp-section: 96px;

  /* ── 字体 ──────────────────────────────────────────────────── */
  /* 语料的 Copernicus / StyreneB 是 Anthropic 专有字体，拿不到。
     其 Known Gaps 节给了替代方向；中文场景再叠一层 CJK 兜底。
     不要写 Copernicus / StyreneB 字体名 —— 写了也加载不到，
     只会让后面接手的人以为"我们有这套字体"。 */
  --font-serif: "Cormorant Garamond", "EB Garamond",
                "Noto Serif SC", "Source Han Serif SC", "Songti SC",
                Georgia, serif;
  --font-sans:  "Inter", "Noto Sans SC", "Source Han Sans SC",
                "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
                -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* 字距：语料对衬线标题用负字距（-0.3 ~ -1.5px）。
     注意：那是为拉丁字母调的；中文方块字加同样幅度的负字距会挤在一起。
     中文场景收敛到 -0.01em（本项目扩展，非语料原值），见 app.css。 */
  --tracking-display: -0.01em;
  --tracking-normal: 0;

  /* ── 阴影：语料哲学是"色块优先，阴影罕见" ─────────────────── */
  --shadow-hover: 0 1px 3px rgba(20, 20, 19, 0.08);
}