/* ============================================================
   Design Tokens — 参照 DESIGN.md（Claude/Anthropic 设计系统）
   所有页面通过 <link rel="stylesheet" href="design-tokens.css">
   引用此文件，禁止在此文件中编写组件样式。
   ============================================================ */

:root {
  /* ——— 品牌色 ——— */
  --color-brand:       #c96442;   /* Terracotta Brand — 主要 CTA */
  --color-brand-hover: #b5573a;   /* 深一档，用于 hover */
  --color-coral:       #d97757;   /* Coral Accent — 浅暖橙，链接/次级强调 */

  /* ——— 背景层（由浅到深） ——— */
  --color-bg:          #f5f4ed;   /* Parchment — 页面背景，暖奶油 */
  --color-surface:     #faf9f5;   /* Ivory — 卡片/容器，最轻暖色 */
  --color-white:       #ffffff;   /* Pure White — 最高对比度元素 */
  --color-sand:        #e8e6dc;   /* Warm Sand — 次级按钮/交互面 */

  /* ——— 深色面 ——— */
  --color-dark:         #141413;  /* Near Black — 深色主背景/主文字 */
  --color-dark-surface: #30302e;  /* Dark Surface — 深色卡片/边框 */
  --color-dark-warm:    #3d3d3a;  /* Dark Warm — 深色文字链接 */

  /* ——— 文字色 ——— */
  --color-text-primary:    #141413;  /* Near Black */
  --color-text-secondary:  #5e5d59;  /* Olive Gray — 次级正文 */
  --color-text-tertiary:   #87867f;  /* Stone Gray — 元数据/时间戳/说明 */
  --color-text-warm-light: #b0aea5;  /* 深色背景上的文字 */
  --color-charcoal:        #4d4c48;  /* 浅色面上的深文字 */

  /* ——— 边框 ——— */
  --color-border-light: #f0eee6;  /* Border Cream — 最轻边框（几乎透明暖色） */
  --color-border-warm:  #e8e6dc;  /* Border Warm — 明显边框/分隔线 */
  --color-border-dark:  #30302e;  /* 深色面边框 */

  /* ——— 阴影 Ring 系统 ——— */
  --color-ring:      #d1cfc5;  /* 标准 ring 颜色 */
  --color-ring-deep: #c2c0b6;  /* 深 ring（active/pressed） */

  /* ——— 语义色 ——— */
  --color-error: #b53333;  /* Error Crimson — 深暖红 */
  --color-focus: #3898ec;  /* Focus Blue — 系统中唯一的冷色（无障碍焦点） */

  /* ——— 字体族 ——— */
  --font-serif: Georgia, "Times New Roman", "Songti SC", serif;
  --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                "Microsoft YaHei", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:  "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;

  /* ——— 圆角刻度 ——— */
  --radius-xs:   4px;   /* Sharp — 极小内联元素 */
  --radius-sm:   6px;   /* Subtly rounded — 小按钮/辅助元素 */
  --radius-md:   8px;   /* Comfortably rounded — 标准按钮/卡片 */
  --radius-lg:   12px;  /* Generously rounded — 主按钮/输入框 */
  --radius-xl:   16px;  /* Very rounded — 特色容器 */
  --radius-2xl:  24px;  /* Highly rounded — 标签/话题按钮 */
  --radius-3xl:  32px;  /* Maximum — 大卡片/Hero 容器 */
  --radius-full: 9999px;

  /* ——— 阴影 ——— */
  --shadow-whisper: rgba(0, 0, 0, 0.05) 0px 4px 24px;      /* 极轻浮动 */
  --shadow-card:    rgba(0, 0, 0, 0.06) 0px 4px 24px;      /* 标准卡片 */
  --shadow-ring:    0px 0px 0px 1px var(--color-ring);     /* Ring Level 2 */
  --shadow-ring-brand: 0px 0px 0px 3px rgba(201, 100, 66, 0.15); /* 品牌 ring */
  --shadow-ring-focus: 0px 0px 0px 3px rgba(56, 152, 236, 0.20); /* 焦点 ring */

  /* ——— 间距（8px 基础单位） ——— */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* ——— 过渡 ——— */
  --transition-fast: all 0.15s ease;
  --transition-base: all 0.2s ease;
}