/* ============================================================================
 * OPC 平台 · contract.css
 * Tier 2 —— 语义令牌契约（组件的唯一入口）+ 兜底 + 排版基线
 *
 * 引入顺序：base.css → contract.css → skins/<端>.css
 *
 * 规则：
 *   1. 组件库（packages/ui）里只允许出现 var(--bg) 这一层，
 *      禁止 var(--c-teal-400)、禁止 #hex、禁止 px 圆角、禁止字体族字面量。
 *   2. 本文件列出的变量就是"皮肤契约"：四份皮肤必须全部给出，
 *      少一个不会白屏（这里有兜底），但会悄悄回落成灰色 —— 所以 CI 要做比对。
 *   3. 皮肤只覆盖 [data-skin="x"] 块内的变量，不改任何选择器结构。
 * ========================================================================== */

/* ── 契约 ──────────────────────────────────────────────────────────────
   共 38 个必需变量（含 2 个扩展槽 :--pending / --pending-soft）。
   兜底值取"安全的中性灰"，任何皮肤漏配都退化成可读状态。 */
:root {
  /* 表面 */
  --bg:          #F4F2EC;   /* 页面底 */
  --bg-2:        #EFECE4;   /* 次级底 / 分区底 */
  --surface:     #FDFCF9;   /* 卡片 */
  --surface-2:   #F7F5EF;   /* 卡片内嵌块 / 表头 */
  --overlay:     rgba(20, 24, 22, .44);

  /* 文字 */
  --ink:         #192927;   /* 标题 / 主文本 */
  --ink-2:       #3E4D4A;   /* 正文 */
  --muted:       #7A8582;   /* 说明 / 占位 */
  --on-brand:    #FFFFFF;   /* 品牌色底上的文字 */

  /* 描边 */
  --line:        #E6E1D6;   /* 结构线 */
  --line-2:      #EFEBE2;   /* 分隔线（更轻） */
  --line-strong: #CFC9BD;   /* 强调描边 / 输入框 */

  /* 品牌 */
  --brand:       #3B8B71;
  --brand-2:     #2F7560;   /* hover / 深一档 */
  --brand-soft:  #E3EEE8;   /* 浅底标签 / 选中态 */
  --brand-ink:   #2C6B57;   /* 浅底上的品牌色文字 */

  /* 导航轨（后台侧栏 / OPC 底栏 / 大屏页眉） */
  --rail-bg:     #1E3A39;
  --rail-ink:    #C9D9D3;
  --rail-muted:  #7F9A93;
  --rail-active: rgba(255, 255, 255, .10);

  /* 状态 */
  --danger:      #D2554B;
  --danger-soft: #FBE7E3;
  --warn:        #DA9A2E;
  --warn-soft:   #FAF0DA;
  --info:        #4E7FB8;
  --info-soft:   #E6EEF8;

  /* 扩展槽：审核中 / 待外部确认。后台与大屏必用，门户与 OPC 端继承此兜底 */
  --pending:      #8A76C7;
  --pending-soft: #EEEAF8;

  /* 形状 / 密度 / 字体（皮肤可覆盖） */
  --radius-card: 12px;
  --radius-ctl:  8px;
  --radius-chip: 999px;
  --shadow-1:    0 1px 0 rgba(255,255,255,.9) inset, 0 1px 2px rgba(40,50,45,.05), 0 6px 16px -6px rgba(40,50,45,.10);
  --shadow-2:    0 1px 0 rgba(255,255,255,.9) inset, 0 2px 4px rgba(40,50,45,.05), 0 18px 36px -14px rgba(40,60,50,.20);
  --density:     1;          /* 间距乘数：后台 .92 / 门户 1 / OPC 1.12 / 大屏 1.6 */
  --fs-body:     15px;       /* 正文字号：OPC 端 16 / 大屏 18 */
  --ctl-h:       36px;       /* 控件高度：OPC 端 ≥ 44（触控） */
  --font-title:  var(--f-sans);   /* 统一黑体，四端一致 */
  --font-body:   var(--f-sans);
}

/* ── 重置 ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--w-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-title);
  font-weight: var(--w-semi);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}

p { margin: 0 0 calc(var(--s-3) * var(--density)); }

a { color: var(--brand-ink); text-decoration: none; }
a:hover { color: var(--brand); }

button, input, select, textarea { font: inherit; color: inherit; }

img, svg { display: block; max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::selection { background: var(--brand-soft); color: var(--ink); }

/* ── 排版工具类：去 serif 后，层级靠这五档承担 ───────────────────────────
   使用方式固定，不要再在业务里手写 font-size。 */
.t-display { font-family: var(--font-title); font-size: var(--t-display); font-weight: var(--w-bold);    line-height: var(--lh-display); letter-spacing: var(--ls-display); color: var(--ink); }
.t-h1      { font-family: var(--font-title); font-size: var(--t-h1);      font-weight: var(--w-semi);    line-height: var(--lh-h1);      letter-spacing: var(--ls-h1);      color: var(--ink); }
.t-h2      { font-family: var(--font-title); font-size: var(--t-h2);      font-weight: var(--w-semi);    line-height: var(--lh-h2);      letter-spacing: var(--ls-h2);      color: var(--ink); }
.t-h3      { font-family: var(--font-title); font-size: var(--t-h3);      font-weight: var(--w-semi);    line-height: var(--lh-h3);      color: var(--ink); }
.t-h4      { font-family: var(--font-title); font-size: var(--t-h4);      font-weight: var(--w-medium);  line-height: var(--lh-h3);      color: var(--ink); }
.t-body    { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); }
.t-sm      { font-size: var(--t-sm);    line-height: var(--lh-sm);   color: var(--ink-2); }
.t-muted   { font-size: var(--t-sm);    color: var(--muted); }

/* 全大写小标签：替代原来 serif 提供的"标识感"，靠字距而不是字体 */
.t-caps {
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--muted);
}

/* 数字：不做衬线、也不切 mono 字体，用等宽数字对齐 —— 表格金额列必须加 */
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
}

/* 代码 / ID / 哈希 */
.code {
  font-family: var(--f-mono);
  font-size: .9em;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  padding: 1px 5px;
  border-radius: var(--r-xs);
}