/* ==========================================================================
   天合正外贸站 · 设计令牌（Design Tokens）
   —— 所有颜色/尺寸/阴影的**唯一来源**，其余模块只引用这里定义的变量。

   铁律（改动前必读）：
   1. 新增色值一律走变量，不得在别处写死。
   2. 站点配色由后端注入覆盖（见 app/theme.py），这里只是兜底默认值。
   3. 命名统一用 --ink / --primary 系列；--brand / --text / --surface 是
      历史别名，仅作兼容保留，新样式禁止使用。
   ========================================================================== */

:root {
  /* ---------- 品牌色 ---------- */
  --primary: #EF8337;
  --primary-hover: #D4741F;
  --primary-soft: #FDF0E6;
  --primary-border: #F7CDA6;

  --secondary: #4F638F;
  --secondary-soft: #EEF1F7;

  --accent: #0B5FFF;
  --accent-hover: #0949C9;

  /* ---------- 中性色阶 ---------- */
  --ink: #1A1D23;      /* 主文字 */
  --ink-2: #3D434D;    /* 次级文字 */
  --ink-3: #6B7280;    /* 弱化文字 */
  --line: #E5E7EB;     /* 分隔线 */
  --bg: #FFFFFF;
  --bg-soft: #F7F8FA;  /* 浅底块 */

  /* ---------- 状态色（成功/危险/警告） ----------
     与后台 admin/00-tokens.css 同名同值 —— 一套语义色，两端表现一致。
     危险色刻意不用纯红（#F00 太刺眼），改成带灰的深红，更耐看。 */
  --ok: #1B6B3A;
  --ok-bg: #E7F6EC;
  --err: #A32D2D;
  --err-bg: #FDECEC;
  --err-strong: #D64545;   /* 需要强调的实心红（如危险按钮底色） */
  --err-strong-hover: #B93A3A;
  --warn: #8A5A00;
  --warn-bg: #FDF3DD;
  --warn-border: #F0DDA8;   /* 浅底块的描边，比背景深一档 */

  /* ---------- 信息色（蓝） ----------
     用于「进行中 / 已发出」这类中性状态，跟成功绿、警告黄区分开。 */
  --info: #1E5A8A;
  --info-bg: #EAF3FB;
  --info-deep: #2C4A8A;      /* 更深一档，用于「已报价」 */
  --info-deep-bg: #E8EEFB;

  /* ---------- 第三方品牌色 ----------
     这些是外部平台的官方色，**不随站点主题走**，所以单独命名、
     不混进品牌色阶（否则后台一改主色，WhatsApp 按钮就变色了）。 */
  --wa: #25D366;                  /* WhatsApp 官方绿 */
  --wa-soft: #E7FAEF;             /* 官方绿的浅底：只用于悬停/图标按钮底 */
  --media-placeholder: #000;      /* 图片占位底（等待加载时的底色） */

  /* 遮罩层（图片放大灯箱、弹层背板）。
     单独出变量而不是就地写 rgba：写死的色值不随主题走，
     站点换深色主色时遮罩会显得发灰。 */
  --overlay: rgba(16, 24, 40, .88);

  /* ---------- 反色文字 ----------
     纯白在深底/彩色底上最清晰，给个语义名方便日后统一调。 */
  --on-accent: #fff;

  /* ---------- 圆角 / 阴影 ---------- */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, .08);

  /* ---------- 布局尺寸 ---------- */
  --container: 1200px;
  --container-narrow: 820px;
  --header-h: 60px;
  /* ★★ 页头**容器的最小高度**：固定常量，绝不用 --header-h。
     --header-h 由 front.js 量出真实页头高度后写回（供「让开页头」的定位消费）；
     而页头容器自己若用它当 min-height，就构成
     「量高度 → 写变量 → min-height 生效 → 元素变高 → 再量到更大的值」的**正反馈环**。
     2026-10-13 出过事：Safari 下量到脏值 1015px 并写回 → 页头被真的撑到 1015px，
     首屏内容全被推出可视区 = 「iPhone 打开全白」。
     消费方（sticky 让位等）用 --header-h；生产方（容器自身）用本令牌。 */
  --header-min-h: 60px;
  --mobile-bar-h: 60px;   /* 移动端底部条高度，body 用它留白 */
  --tap-min: 44px;        /* 触控目标下限（Apple HIG / Material） */

  /* ---------- 语义别名（历史遗留兼容层） ----------
     早期样式里用过 --brand / --text / --surface 这些名字，但一直没定义，
     浏览器回落初始值导致「某些字莫名发蓝/发黑」。这里补映射兜底。
     ⚠️ 新样式请直接用 --primary / --ink 系列。 */
  --brand: var(--primary);
  --brand-soft: var(--primary-soft);
  --text: var(--ink);
  --text-2: var(--ink-2);
  --text-3: var(--ink-3);
  --surface: #FFFFFF;
  --surface-2: var(--bg-soft);
  --chip-bg: var(--bg-soft);
}