/* tokens.css - 设计 token（颜色/字号/间距/字体） */
/* 装修基础课 v1.2 */

:root {
  /* 主色板：咖啡暖棕系 */
  --c-deep: #3d2b1f;          /* 深咖（正文） */
  --c-mid: #7c5c3e;           /* 中咖（标题/品牌） */
  --c-light: #a0704a;         /* 浅咖（次标题） */
  --c-bg: #f5f0eb;            /* 暖米（背景） */
  --c-card: #faf6f2;          /* 浅米（卡片） */
  --c-decor: #f0dcc0;         /* 奶咖（装饰） */
  --c-line: #e0d4c8;          /* 分隔线 */

  /* 强调色（学习标记） */
  --c-red: #c0392b;           /* 必学必记 */
  --c-yellow: #d4a017;        /* 重要提醒 */
  --c-green: #4a7c4a;         /* 决策建议 */
  --c-blue: #4a5a7c;          /* 数据参考 */
  --c-purple: #7c4a7c;        /* 实战口诀 */
  --c-grey: #7a6555;          /* 案例故事 */

  /* 中性色 */
  --c-text: var(--c-deep);
  --c-text-soft: #6a5240;
  --c-text-mute: #9a8675;
  --c-white: #ffffff;

  /* 字号 */
  --fs-base: 16px;
  --fs-xs: 0.78rem;           /* 标签/角标 */
  --fs-sm: 0.88rem;           /* 注释/小字 */
  --fs-md: 1rem;              /* 正文 */
  --fs-lg: 1.15rem;           /* 小标题 */
  --fs-xl: 1.4rem;            /* 中标题 */
  --fs-2xl: 1.8rem;           /* 大标题 */
  --fs-3xl: 2.4rem;           /* 章标题 */
  --fs-hero: 3rem;            /* Hero 区 */

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

  /* 圆角 */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* 阴影 */
  --shadow-sm: 0 1px 4px rgba(61,43,31,0.06);
  --shadow-md: 0 2px 12px rgba(61,43,31,0.08);
  --shadow-lg: 0 8px 28px rgba(61,43,31,0.12);

  /* 字体 */
  --font-display: "Source Han Serif SC", "Noto Serif SC", "Songti SC", serif;
  --font-body: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", "SF Mono", Consolas, monospace;
  --font-script: "LXGW WenKai", "Klee", "霞鹜文楷", cursive;

  /* 排版 */
  --lh-tight: 1.4;
  --lh-base: 1.7;
  --lh-loose: 1.9;
  --tracking-base: 0;
  --tracking-wide: 0.05em;

  /* 容器 */
  --container-max: 1100px;
  --container-narrow: 720px;

  /* 响应式断点（CSS 变量参考） */
  /* mobile: < 640px */
  /* tablet: 640-1024px */
  /* desktop: > 1024px */
}