/* ============================================================
   校准线 Calibrite · 设计 Token（代码唯一源）
   所有页面 @import 本文件，不要在页面里另写色值/字体/圆角。
   配套规范：校准线-设计系统.md
   ============================================================ */

/* 字体：Noto Serif SC（衬线/标题）+ Noto Sans SC（无衬线/正文） */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700;900&family=Noto+Sans+SC:wght@300;400;500;600&display=swap');

:root {
  /* —— 墨 Ink（炭黑，第二主角：标题/关键数字/压舱/章节号）—— */
  --ink: #1E232B;
  --ink-80: rgba(30, 35, 43, .8);
  --ink-60: rgba(30, 35, 43, .6);
  --ink-40: rgba(30, 35, 43, .4);

  /* —— 金 Gold（唯一交互/强调色）—— */
  --gold: #B98A3C;
  --gold-hover: #D4A94E;
  --gold-deep: #9C7330;
  --gold-soft: #F5ECD8;
  --gold-faint: rgba(185, 138, 60, .06);
  --gold-border: rgba(185, 138, 60, .3);
  --gold-on-dark: #D9B871;      /* 深色底上的浅金小字 */

  /* —— 底 / 纸 / 线（精确值，勿偏移）—— */
  --bg: #F7F7F5;                /* 页面底，不是 #F7F6F3 */
  --bg-warm: #FAFAF8;
  --paper: #FFFFFF;
  --line: #E8E6E0;              /* 不是 #E6E3DB / #E2E3DD */
  --line-soft: #EDEAE3;
  --muted: #6B6B65;
  --hint: #9B9B93;

  /* —— 语义色（只染字+细边框，绝不填底色，除非特殊点缀）—— */
  --green: #5E8B6A;
  --green-deep: #477154;
  --green-soft: rgba(94, 139, 106, .09);
  --red: #C45B4A;
  --red-deep: #A8472F;
  --red-soft: rgba(196, 91, 74, .07);
  --blue: #3A6FB0;              /* 第四色，仅特定场景（如渠道配色）*/
  --blue-deep: #2F5C95;

  /* —— 圆角 —— */
  --radius: 8px;               /* 全局 */
  --r-sm: 6px;                 /* 小元素 */
  --r-pill: 999px;             /* 药丸 chip/tag */

  /* —— 字体 —— */
  --serif: 'Noto Serif SC', 'Songti SC', serif;
  --sans: 'Noto Sans SC', 'PingFang SC', system-ui, sans-serif;

  /* —— 布局（开发改这两个值即可调整内容宽度与两侧留白）—— */
  --content-max: 1000px;       /* 内部判断工具 1000；获客工具可放宽到 1080 */
  --content-pad: 24px;

  /* —— 阴影（克制）—— */
  --shadow-sm: 0 2px 10px rgba(30, 35, 43, .04);
  --shadow-card: 0 4px 24px rgba(30, 35, 43, .05);

  --t: 200ms ease;             /* 统一过渡 */
}

/* ============================================================
   常用基底（可选，按需取用）
   ============================================================ */

/* 内容容器：满宽背景 + 内层限宽居中 */
.cal-shell {
  width: min(var(--content-max), calc(100% - var(--content-pad) * 2));
  margin: 0 auto;
}

/* 品牌 logo 方块 */
.cal-logo {
  width: 32px; height: 32px;
  border-radius: var(--radius);
  background: var(--gold);
  color: #fff;
  font-family: var(--serif);
  font-weight: 700; font-size: 18px;
  display: grid; place-items: center;
}

/* chip / tag：默认透明底细边框药丸 */
.cal-tag {
  display: inline-flex; align-items: center;
  border-radius: var(--r-pill);
  padding: 3px 11px;
  background: transparent;
  border: 1px solid var(--gold-border);
  color: var(--gold-deep);
  font-size: 11px; font-weight: 600;
  white-space: nowrap;
}
.cal-tag.green { border-color: rgba(94,139,106,.4); color: var(--green-deep); }
.cal-tag.red   { border-color: rgba(196,91,74,.4);  color: var(--red-deep); }
.cal-tag.ink   { background: var(--ink); border-color: var(--ink); color: #fff; }

/* 主按钮 / 次按钮 */
.cal-btn {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  padding: 8px 15px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--paper);
  color: var(--muted); cursor: pointer; transition: var(--t);
}
.cal-btn:hover { border-color: var(--gold-border); color: var(--gold); }
.cal-btn--primary { background: var(--gold); color: #fff; border-color: var(--gold); }
.cal-btn--primary:hover { background: var(--gold-hover); border-color: var(--gold-hover); }

/* 章节号炭黑色块（获客工具用） */
.cal-sec-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--ink); color: #fff;
  font-family: var(--sans); font-size: 13px; font-weight: 700;
}