/*
 * 碳基社区 2.0 设计令牌
 * 规范来源：碳基 2.0 改版蓝图（2026-09-29 定稿）
 * 所有 v2 样式只允许使用这里的变量，不要在页面样式里写新的颜色、字号、间距。
 */

@font-face {
  font-family: "TJ Display";
  src: url("../../fonts/tj-display.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TJ Num";
  src: url("../../fonts/dm-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* 基础色 */
  --tj-ink: #111212;
  --tj-ink-2: #3a3b38;
  --tj-muted: #70716d;
  --tj-faint: #a5a6a0;
  --tj-line: #e8e8e3;
  --tj-line-ink: rgba(17, 18, 18, 0.09);
  --tj-line-strong: rgba(17, 18, 18, 0.16);
  --tj-paper: #ffffff;
  --tj-wash: #f6f6f2;
  --tj-danger: #d64545;

  /* 强调色：企客松与关键转化，每屏最多一处 */
  --tj-butter: #ffe36e;
  --tj-butter-hover: #ffda3d;
  --tj-butter-soft: #fff6c9;

  /* 首屏淡紫 */
  --tj-lilac: #ece8ff;
  --tj-lilac-2: #dcd5ff;

  /* 板块色：浅色做色块，深色做文字 */
  --tj-sky: #ddeffb;          /* 活动 */
  --tj-sky-ink: #1f7fb8;
  --tj-apricot: #ffe7d1;      /* 风采 */
  --tj-apricot-ink: #c4661b;
  --tj-lilac-ink: #5b4fd1;    /* 人才（底色用 --tj-lilac） */
  --tj-mint: #ddf5ea;         /* 需求 */
  --tj-mint-ink: #177450;

  /* 字体 */
  --tj-font-display: "TJ Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  --tj-font-body: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --tj-font-num: "TJ Num", "PingFang SC", "Microsoft YaHei", sans-serif;

  /* 字号：电脑 / 手机 在组件里用 clamp 或媒体查询切换 */
  --tj-fs-xl: clamp(40px, 5.6vw, 80px);
  --tj-fs-l: clamp(32px, 3.9vw, 56px);
  --tj-fs-h2: clamp(26px, 2.8vw, 40px);
  --tj-fs-h3: 24px;
  --tj-fs-h4: 18px;
  --tj-fs-lead: 17px;
  --tj-fs-body: 15px;
  --tj-fs-small: 13px;
  --tj-fs-cap: 12px;

  /* 间距：只用这 11 个数 */
  --tj-s1: 4px;
  --tj-s2: 8px;
  --tj-s3: 12px;
  --tj-s4: 16px;
  --tj-s5: 20px;
  --tj-s6: 24px;
  --tj-s7: 32px;
  --tj-s8: 40px;
  --tj-s9: 56px;
  --tj-s10: 80px;
  --tj-s11: 120px;

  /* 圆角 */
  --tj-r-sm: 8px;
  --tj-r-btn: 14px;
  --tj-r-card: 20px;
  --tj-r-panel: 32px;
  --tj-r-pill: 999px;

  /* 阴影：只给悬浮物（导航、弹层）用 */
  --tj-shadow-float: 0 4px 24px rgba(17, 18, 18, 0.06);
  --tj-shadow-pop: 0 12px 32px rgba(17, 18, 18, 0.1);

  /* 布局 */
  --tj-container: 1200px;
  --tj-gutter: 32px;
  --tj-section-y: 120px;
  --tj-nav-h: 56px;
}

@media (max-width: 767px) {
  :root {
    --tj-fs-h3: 20px;
    --tj-fs-h4: 16px;
    --tj-fs-lead: 16px;
    --tj-gutter: 16px;
    --tj-section-y: 80px;
  }
}