/* ==========================================================================
   超级交子孵化器 · 品牌设计令牌 v1.0
   依据：08-品牌与视觉/品牌视觉识别手册-v1.0-2026-09-21.html
   用途：网页、HTML 文档、公众号排版、内嵌汇报页直接 @import 或 <link>
   日期：2026-10-31
   ========================================================================== */

/* --- 字体：本包自带 woff2，缺 400/500，需系统回退或补文件 --------------- */
@font-face {
  font-family: "SJ Plex";
  src: url("./fonts/plex-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SJ Plex";
  src: url("./fonts/plex-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- 品牌三色 ---------------------------------------------------------- */
  --sj-red: #CF1920;        /* Super Red 主红，强调专用，全书占比约 10% */
  --sj-ink: #232220;        /* Ink 墨黑，文字与结构 */
  --sj-white: #FFFFFF;

  /* ---- 灰阶（带暖调，不要用纯灰 #808080 / 纯黑 #000000）------------------ */
  --sj-ink-900: #232220;    /* 标题 */
  --sj-ink-700: #4A4845;    /* 次级标题 */
  --sj-ink-500: #7A7773;    /* 说明文字，仅限 13px 以上非关键文本 */
  --sj-ink-300: #B8B5B0;    /* 禁用 / 占位 */
  --sj-line: #E7E4E0;       /* 分隔线 */
  --sj-paper: #FAF9F7;      /* 米白底色 */

  /* ---- 功能色（只在功能场景出现，不当装饰色）----------------------------- */
  --sj-success: #1F8A5B;
  --sj-warning: #C77700;
  --sj-info: #1D5FBF;
  --sj-danger: #8E1418;     /* 危险不是主红：#CF1920 代表前冲，不代表报错 */

  /* ---- 字体栈 ------------------------------------------------------------ */
  --sj-font-sans: "SJ Plex", "IBM Plex Sans", "PingFang SC", "Microsoft YaHei",
                  "Source Han Sans SC", "Noto Sans SC", sans-serif;
  --sj-font-serif: "Source Han Serif SC", "Songti SC", "SimSun", serif;
  --sj-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- 字阶（数字产品，px / 行高 px / 字重 / 字距）------------------------ */
  --sj-h1-size: 48px;   --sj-h1-lh: 1.17; --sj-h1-w: 700; --sj-h1-ls: -0.03em;
  --sj-h2-size: 32px;   --sj-h2-lh: 1.25; --sj-h2-w: 700; --sj-h2-ls: -0.03em;
  --sj-h3-size: 24px;   --sj-h3-lh: 1.33; --sj-h3-w: 600; --sj-h3-ls: -0.02em;
  --sj-lead-size: 17px; --sj-lead-lh: 1.76; --sj-lead-w: 400;
  --sj-body-size: 16px; --sj-body-lh: 1.72; --sj-body-w: 400;
  --sj-caption-size: 13px; --sj-caption-lh: 1.54; --sj-caption-w: 400;

  /* ---- 几何：1:3 斜切角是唯一官方角度 ------------------------------------ */
  --sj-skew: -18.43deg;     /* 等同 skewX；竖向下降 3、横向偏移 1 */
  --sj-angle: 18.43deg;
  --sj-radius: 6px;         /* 上限，不要再大 */
  --sj-radius-sm: 3px;
  --sj-arc-ratio: 0.125;    /* 扬升弧线线宽 = 字标高 × 12.5%，安全空间单位 X */

  /* ---- 栅格与间距：一律 8 的倍数 ----------------------------------------- */
  --sj-maxw: 1180px;
  --sj-gutter: 24px;
  --sj-pad: 40px;
  --sj-s1: 8px;  --sj-s2: 16px; --sj-s3: 24px; --sj-s4: 32px;
  --sj-s5: 40px; --sj-s6: 48px; --sj-s8: 64px; --sj-s10: 80px;

  /* ---- LOGO 尺寸下限 ----------------------------------------------------- */
  --sj-logo-mark-min: 120px;   /* 标志版最小宽度（印刷 25mm） */
  --sj-logo-lockup-min: 320px; /* 组合版最小宽度（印刷 55mm） */

  /* ---- 用色比例目标：白 60 / 墨 25 / 红 10 / 灰 5 ------------------------ */
}

/* ==========================================================================
   基础
   ========================================================================== */
.sj-doc {
  font-family: var(--sj-font-sans);
  font-size: var(--sj-body-size);
  line-height: var(--sj-body-lh);
  color: var(--sj-ink-900);
  background: var(--sj-white);
  -webkit-font-smoothing: antialiased;
}

.sj-doc h1 { font-size: var(--sj-h1-size); line-height: var(--sj-h1-lh);
  font-weight: var(--sj-h1-w); letter-spacing: var(--sj-h1-ls); margin: 0 0 var(--sj-s3); }
.sj-doc h2 { font-size: var(--sj-h2-size); line-height: var(--sj-h2-lh);
  font-weight: var(--sj-h2-w); letter-spacing: var(--sj-h2-ls); margin: var(--sj-s6) 0 var(--sj-s2); }
.sj-doc h3 { font-size: var(--sj-h3-size); line-height: var(--sj-h3-lh);
  font-weight: var(--sj-h3-w); letter-spacing: var(--sj-h3-ls); margin: var(--sj-s5) 0 var(--sj-s1); }
.sj-doc p  { margin: 0 0 var(--sj-s3); max-width: 42em; }

.sj-lead    { font-size: var(--sj-lead-size); line-height: var(--sj-lead-lh); color: var(--sj-ink-700); }
.sj-caption { font-size: var(--sj-caption-size); line-height: var(--sj-caption-lh); color: var(--sj-ink-500); }
.sj-mono    { font-family: var(--sj-font-mono); font-size: 13px; letter-spacing: 0.02em; }

/* 标题关键词强调：同页只强调一个词 */
.sj-accent { color: var(--sj-red); }

/* 中文语义标点用全角，英文专名不翻译 */

/* ==========================================================================
   1:3 斜切角 —— 唯一官方切法
   ========================================================================== */
/* 用法一：直接斜切元素（hero 侧带、页脚色带） */
.sj-slant-left  { clip-path: polygon(18.43% 0, 100% 0, 100% 100%, 0 100%); }
.sj-slant-right { clip-path: polygon(0 0, 100% 0, 81.57% 100%, 0 100%); }
/* 用法二：CSS 变换，适合小色块引线 */
.sj-skew { transform: skewX(var(--sj-skew)); }

/* 标题引线：标题左侧一小段红线，斜边 1:3，长度 ≤ 标题宽 20% */
.sj-rule-lead {
  display: inline-block;
  width: 32px; height: 6px;
  background: var(--sj-red);
  transform: skewX(var(--sj-skew));
  vertical-align: middle;
  margin-right: var(--sj-s2);
}

/* ==========================================================================
   LOGO 引用
   ========================================================================== */
/* 标志版：内容宽高比 666:201 ≈ 3.31:1。
   ⚠️ 原始方形 PNG 画布四周留白，不要用文件边缘当边界，用下面这个容器裁到内容 */
.sj-logo-mark {
  width: var(--sj-logo-mark-min);
  aspect-ratio: 666 / 201;
  object-fit: contain;
  display: block;
}
/* 组合版：3:1 横版，最小宽 320px */
.sj-logo-lockup {
  width: var(--sj-logo-lockup-min);
  aspect-ratio: 3 / 1;
  object-fit: contain;
  display: block;
}

/* ==========================================================================
   卡片 / 组件（手册 §9）
   ========================================================================== */
.sj-card {
  background: var(--sj-white);
  border: 1px solid var(--sj-line);
  border-radius: var(--sj-radius);
  padding: var(--sj-s4);
  /* ⚠️ 禁止左侧彩色竖条卡（手册明令禁用） */
}
.sj-card--paper { background: var(--sj-paper); border-color: transparent; }

.sj-divider { height: 1px; background: var(--sj-line); border: 0; margin: var(--sj-s5) 0; }

/* 数据排法：数字用红 + 700 + 紧字距，单位墨黑 600 在右侧，不加卡片投影 */
.sj-stat { display: flex; align-items: baseline; gap: 6px; }
.sj-stat__num {
  font-size: 40px; font-weight: 700; letter-spacing: -0.045em;
  color: var(--sj-red); font-variant-numeric: tabular-nums;
}
.sj-stat__unit { font-size: 16px; font-weight: 600; color: var(--sj-ink-900); }
.sj-stat__desc {
  font-size: 12px; color: var(--sj-ink-500);
  margin-top: var(--sj-s1); line-height: 1.5;
}

/* ==========================================================================
   深色区块：红/墨底上必须换用透明底反白 logo
   ========================================================================== */
.sj-inverse {
  background: var(--sj-ink);
  color: var(--sj-white);
  padding: var(--sj-s6);
  /* 配图：../LOGO/_衍生/组合-深底版-透明底.svg */
}
.sj-red-band {
  background: var(--sj-red);
  color: var(--sj-white);
  /* 配图：../LOGO/_衍生/组合-全反白-透明底.svg */
}

/* ==========================================================================
   打印
   ========================================================================== */
@media print {
  .sj-doc { font-size: 11pt; line-height: 1.7; }
  .sj-doc h1 { font-size: 24pt; }
  .sj-doc h2 { font-size: 18pt; }
  .sj-doc h3 { font-size: 14pt; }
  /* A4 页边距 上18 / 下18 / 内16 / 外16 mm */
  @page { size: A4; margin: 18mm 16mm; }
  /* 大面积红必须数码打样，CMYK 0/88/85/19 只是换算值不是定稿 */
}