/* ============================================================
   设计规范（Design Tokens）
   参考：https://kargul.studio/（2026-10 实测计算样式）
   - 字号：全站统一使用下面 9 档字号 + 2 个响应式标题档
   - 圆角：全站所有圆角矩形统一为 --radius（按钮/标签为胶囊形，头像为圆形）
   - 颜色：首页使用 --k-* 配色（参考站中性灰黑体系）
   修改这里的数值即可全站生效。
   ============================================================ */

:root {
  /* ---------- 字号 Type scale ---------- */
  --fs-caption: 10.5px;   /* 标签 / 小角标（参考站技能标签 10.5px） */
  --fs-small: 13px;       /* 导航、辅助说明（参考站导航 13px） */
  --fs-body: 14px;        /* 正文（参考站正文 14px / 行高 22px） */
  --fs-lead: 16px;        /* 引导段落、按钮（参考站副标题 16px） */
  --fs-card-title: 18px;  /* 卡片标题（参考站 H3 18px） */
  --fs-title: 24px;       /* 小节标题、引言（参考站评价引语 24px） */
  --fs-section: 36px;     /* 区块标题固定值（参考站 H2 36px） */
  --fs-display: 52px;     /* 大标题固定值（参考站 H1 52px） */
  --fs-stat: 72px;        /* 数据大数字（参考站 $1B+ 72px） */

  /* 响应式标题：手机端约 28px，桌面端到达上限（与参考站一致） */
  --fs-h1: clamp(28px, 4.4vw + 11px, 52px);
  --fs-h2: clamp(28px, 1.5vw + 22px, 36px);

  /* ---------- 字体 Font（与首页一致：英文 Inter / Plus Jakarta Sans，中文苹方） ---------- */
  --font-cn: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-sans: "Inter", var(--font-cn);                         /* 正文 */
  --font-display: "Plus Jakarta Sans", "Inter", var(--font-cn); /* 标题、导航 */

  /* ---------- 版心 Layout ---------- */
  --detail-width: 980px;  /* 所有作品详情页的内容宽度（与「运营活动视觉设计」一致） */

  /* ---------- 圆角 Radius ---------- */
  --radius: 24px;         /* 唯一的圆角矩形尺寸（卡片、图片、面板、输入框等） */
  --radius-sm: 12px;      /* 例外：卡片里的配图（作品集封面图），比卡片本身更小的圆角 */
  --radius-pill: 999px;   /* 按钮 / 标签 / 分段控件：胶囊形（参考站按钮做法） */

  /* ---------- 颜色 Color（参考站 kargul.studio） ---------- */
  --k-bg: #efefef;            /* 页面底色 */
  --k-card: #ffffff;          /* 卡片 / 浮层 */
  --k-ink: #232323;           /* 主文字、主按钮、深色区块 */
  --k-ink-strong: #000000;    /* 强调文字 */
  --k-muted: #707070;         /* 次要文字 */
  --k-subtle: #9d9d9d;        /* 弱化文字（深底上的次要文字） */
  --k-faint: #b4b4b4;         /* 极弱文字 / Logo 灰 */
  --k-surface: #f5f5f5;       /* 浅灰填充 */
  --k-border: #e5e5e5;        /* 描边 / 分割线 */
  --k-dark: #232323;          /* 深色区块底 */
  --k-dark-surface: #313131;  /* 深色区块中的卡片 */
  --k-dark-fg: #efefef;       /* 深色区块中的文字 */
  --k-success: #1daf61;       /* 状态点（唯一彩色强调） */
}