/* =============================================================
 *  design-tokens.css
 *  卡片式教学页面 · 设计令牌（v1.0）
 *  Source: code-agent-teaching-outline.html (2026-08-26)
 *
 *  用法：
 *    <link rel="stylesheet" href="_shared/design-tokens.css">
 *    <link rel="stylesheet" href="_shared/components.css">
 *
 *  本文件只放变量，不放组件规则
 *  组件规则见 components.css
 * ============================================================= */

:root {
  /* ---- 颜色：背景层 ---- */
  --bg:        #f5f7fb;   /* 页面背景（极淡冷灰） */
  --bg2:       #eef1f8;   /* 二级背景（chip、hover） */

  /* ---- 颜色：文字层 ---- */
  --ink:       #1c2434;   /* 主文字（深墨色） */
  --muted:     #5d6b82;   /* 次要文字（描述、图说、标签注） */
  --rule:      #dbe1ec;   /* 分隔线、表格行线 */

  /* ---- 颜色：强调 ---- */
  --accent:    #4f5dd5;   /* 主强调：蓝紫 */
  --accent2:   #0e9f8a;   /* 次强调：青绿 */

  /* ---- 透明度变体（用于卡片底/分隔线/描边） ---- */
  --accent-12: rgba(79, 93, 213, 0.12);   /* 卡片描边 */
  --accent-30: rgba(79, 93, 213, 0.30);   /* wiki chip 描边 */
  --accent-07: rgba(79, 93, 213, 0.07);   /* 卡片阴影 */
  --accent-06: rgba(79, 93, 213, 0.06);   /* part-banner 底 */
  --accent2-06: rgba(14, 159, 138, 0.06); /* callout 底 */
  --accent2-30: rgba(14, 159, 138, 0.30); /* paper chip 描边 */
  --card-bg:   rgba(255, 255, 255, 0.72); /* 卡片底（半透明白） */
  --border:    var(--rule);                /* SVG 描边专用:语义上是分隔线,与 --rule 同义 */

  /* ---- 字体 ---- */
  --font:      'InstrumentSans', 'Noto Sans CJK SC',
               'WenQuanYi Micro Hei', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono: 'JetBrainsMono', 'Noto Sans CJK SC', monospace;

  /* ---- 布局 ---- */
  --max:       960px;     /* 正文最大宽度（不要突破） */
  --radius:    12px;      /* 卡片圆角 */
  --radius-pill: 999px;   /* chip 圆角 */

  /* ---- 字号节奏 ---- */
  --fs-h1:     2.3rem;
  --fs-h2:     1.45rem;
  --fs-h3:     1.12rem;
  --fs-sub:    1.05rem;
  --fs-body:   0.95rem;
  --fs-sm:     0.88rem;
  --fs-xs:     0.82rem;
  --fs-label:  0.78rem;
  --fs-tag:    0.72rem;

  /* ---- 间距 ---- */
  --sp-1:      0.25rem;
  --sp-2:      0.5rem;
  --sp-3:      0.9rem;
  --sp-4:      1.2rem;
  --sp-5:      1.6rem;
  --sp-6:      2.4rem;
  --sp-7:      3.2rem;

  /* ---- 行高 ---- */
  --lh-body:   1.75;
  --lh-tight:  1.25;
}

/* 字体 @font-face 声明在 page-template.html 内 <head> 引入 */