/*
 * 主站皮肤 · orange — 卓采汇橙 · 工业贸易现代主义
 *
 * 与 default 的关系：
 *   default 是历史橙皮肤（hue 48 / radius 偏紧），样式偏经典 BS5 卡片版。
 *   orange 是面向新首页（templates/orange）的升级版橙皮肤：
 *     - 主色更高饱和（hue 48 → 50，chroma .17 → .19），与 #FF6A1A 对齐
 *     - 圆角恢复中性（6/8px），适合 Hero 大块面 + 工业方正风
 *     - 容器宽度从 1220 拉到 1280，给 Hero / 行业 silo 更多呼吸
 *
 * 加载顺序（base.html.twig 控制）：
 *   1. /build/tailwind.css        ← Tailwind utility 池 + @theme 默认 token
 *   2. /build/skin_site_orange.css← 本文件，覆盖 :root token
 *   3. <style>{ --bs-primary }</style> 终局兜底（base.html.twig 里 inline；orange 里在子模板中以橙色覆盖）
 */

:root {
  /* ===== 文本 ===== */
  --color-fg: #0E1620;
  --color-fg-muted: #475569;
  --color-fg-subtle: #94A3B8;
  --color-fg-on-primary: #FFFFFF;
  --color-fg-on-accent: #FFFFFF;

  /* ===== 背景 ===== */
  --color-bg: #FFFFFF;
  --color-bg-muted: #F5F7FA;          /* 雾白 — section 底 */
  --color-bg-subtle: #EEF1F6;
  --color-card: #FFFFFF;
  --color-input: #F5F7FA;

  /* ===== 主色：卓采汇橙 (oklch ≈ #FF6A1A) ===== */
  --color-primary: oklch(70% 0.19 50);
  --color-primary-hover: oklch(63% 0.19 50);
  --color-primary-active: oklch(55% 0.19 50);
  --color-primary-soft: #FFF1E6;       /* 主色 8% — chip / hover bg */

  /* Bootstrap 5 兜底（base.html.twig inline override 也读这两个变量） */
  --bs-primary: #FF6A1A;
  --bs-primary-rgb: 255, 106, 26;

  /* ===== 强调蓝（链接 / 表格 active） ===== */
  --color-accent: oklch(50% 0.18 258);  /* ≈ #1554D1 */
  --color-accent-hover: oklch(43% 0.18 258);

  /* ===== 状态色 ===== */
  --color-danger: oklch(58% 0.22 25);   /* 中国红，克制使用 */
  --color-success: oklch(62% 0.16 145);
  --color-warning: oklch(78% 0.15 80);
  --color-gold: #C8932E;

  /* ===== 边框 / 分隔 ===== */
  --color-border: #E5E9F0;              /* hairline */
  --color-border-strong: #CBD5E1;
  --color-ring: oklch(70% 0.19 50);

  /* ===== 圆角（B2B 偏方正） ===== */
  --radius-input: 6px;
  --radius-button: 6px;
  --radius-card: 8px;
  --radius-pill: 9999px;

  /* ===== 字体（Hero 用宋体、UI 用 HarmonyOS / PingFang、数字用 mono） ===== */
  --font-sans:
      "HarmonyOS Sans SC", "PingFang SC", "Hiragino Sans GB",
      "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-heading:
      "Noto Serif SC", "Source Han Serif SC", "Songti SC",
      "STSong", "SimSun", serif;
  --font-mono:
      "JetBrains Mono", "IBM Plex Mono", ui-monospace,
      "SFMono-Regular", Menlo, Consolas, monospace;

  /* ===== 阴影 ===== */
  --shadow-card:    0 1px 2px rgba(15,22,32,.04), 0 4px 12px rgba(15,22,32,.06);
  --shadow-popover: 0 2px 6px rgba(15,22,32,.06), 0 14px 28px rgba(15,22,32,.10);
  --shadow-modal:   0 12px 32px rgba(15,22,32,.16);
  --shadow-cta:     0 6px 16px rgba(255,106,26,.32);

  /* ===== 容器 ===== */
  --container-content: 1280px;
  --container-narrow: 980px;
}

/* ───── orange 皮肤专属 utilities（语义化补强，避免在模板里写魔法值） ───── */

/* 模块标题前的橙色指示条（::before 写法太啰嗦，用 class 收敛） */
.zc-section-bar::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 18px;
  background: var(--color-primary);
  margin-right: 12px;
  vertical-align: -3px;
  border-radius: 1px;
}

/* 英文小标 micro-label（顶在中文 H2 上方） */
.zc-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--color-primary);
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* 印章式认证 chip（金牌 / 实地 / VIP） */
.zc-stamp {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  font-size: 11px;
  letter-spacing: 0.12em;
  background: #fff;
  border-radius: 2px;
  white-space: nowrap;
}
.zc-stamp.is-gold { border-color: var(--color-gold); color: var(--color-gold); }
.zc-stamp.is-success { border-color: var(--color-success); color: var(--color-success); }

/* 工业蓝图栅格底纹（section 上叠加，弱透明度） */
.zc-blueprint {
  background-image:
    linear-gradient(to right, rgba(15,22,32,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,22,32,.04) 1px, transparent 1px);
  background-size: 80px 80px;
}

/* 等宽数字（数据背书条 / 价格 / ticker 时间） */
.zc-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Hero 主标题（宋体 + 高对比 + 微紧字距） */
.zc-display {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--color-fg);
}

/* CTA 主按钮（橙底 + 阴影 + 锐边） */
.zc-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  background: var(--color-primary);
  color: var(--color-fg-on-primary);
  font-weight: 600;
  border-radius: var(--radius-button);
  box-shadow: var(--shadow-cta);
  transition: background-color .15s, transform .15s, box-shadow .15s;
}
.zc-cta:hover { background: var(--color-primary-hover); transform: translateY(-1px); }
.zc-cta:active { background: var(--color-primary-active); transform: translateY(0); }

.zc-cta-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  background: transparent;
  color: var(--color-fg);
  font-weight: 600;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-button);
  transition: border-color .15s, color .15s;
}
.zc-cta-ghost:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* 实时撮合 ticker 条目入场闪光 */
@keyframes zc-tick-flash {
  0%   { background-color: var(--color-primary-soft); }
  100% { background-color: transparent; }
}
.zc-tick-row { animation: zc-tick-flash 1s ease-out; }

/* 数字滚动入场（DataBackbone 用） */
@keyframes zc-num-rise {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
.zc-num-rise { animation: zc-num-rise .6s ease-out both; }