/* ==========================================================================
   装保镖 PC 端 · 设计 Token（唯一来源）
   v2026-06-21 统一色板 / 圆角 / 字重 / 阴影 / 焦点 / 断点

   使用方式：
     zb-home.css 与 zb-style.css 顶部 @import "./zb-tokens.css";
   ========================================================================== */

:root {
  /* === Brand（唯一来源：之前分散在 zb-home / zb-style / 多个 inline <style>） === */
  --brand: #15d39a;          /* 主品牌：薄荷绿 */
  --brand-2: #48f2c0;        /* 品牌浅：薄荷霜 */
  --gold: #f8c86a;           /* 暖金：行动/推荐 */
  --warn: #d9773f;           /* 提醒橙 */
  --danger: #d94f4f;         /* 风险红 */

  /* === 暗色基底（Hero / Footer / 提交页） === */
  --midnight: #07161f;
  --navy: #0b2431;
  --ink: #10212a;

  /* === 文字灰阶（浅底） === */
  --slate: #5d6d76;          /* 副文 */
  --muted: #8da0aa;          /* 弱化文字 */

  /* === 描边 === */
  --line: rgba(11, 36, 49, .12);          /* 浅底用：深色线 */
  --line-dark: #cbd3d8;                   /* 稍深描边（zb-home 大量使用） */
  --line-on-dark: rgba(255, 255, 255, .12); /* 深底用：白色线 */

  /* === 浅色基底 === */
  --paper: #fbfaf6;
  --cream: #f6efe2;
  --white: #fff;

  /* === 圆角（4 档，替代此前 14 档） === */
  --r-sm: 12px;   /* 小标签、输入框、chip */
  --r-md: 18px;   /* 普通卡片、按钮 */
  --r-lg: 24px;   /* 大卡片、模态 */
  --r-xl: 34px;   /* hero 卡片、特殊容器 */

  /* === 字重（4 档，替代此前 6 档含 850/950） === */
  --fw-regular: 400;
  --fw-medium:  600;
  --fw-bold:    700;
  --fw-black:   800;   /* 中文 HarmonyOS Sans 没有 900+，原 850/950 实际都回退到 800 */

  /* === 阴影 === */
  --shadow-sm: 0  8px 24px rgba(8, 30, 40, .06);
  --shadow-md: 0 14px 38px rgba(10, 32, 42, .08);
  --shadow-lg: 0 28px 80px rgba(7, 22, 31, .22);

  /* === 布局 === */
  --max: 1200px;
  --section-pad: 96px;

  /* === 断点（PC 端 4 档：mobile 之后补 1180 / 1024 / 768 / 640） === */
  --bp-lg: 1280px;
  --bp-md: 1180px;
  --bp-sm: 1024px;
  --bp-xs:  768px;
  --bp-xxs: 640px;
}

/* ==========================================================================
   全局 :focus-visible（键盘 a11y）

   之前全站几乎不可见 —— Tab 用户无法定位焦点。
   :where() 包裹，0 specificity，不会污染任何组件选择器。
   ========================================================================== */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-2);
  outline-offset: 3px;
  border-radius: inherit;
}
:where(a, button, input, select, textarea, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}

/* ==========================================================================
   1180px / 1024px 断点（之前缺失，导致 13 寸笔记本/24 寸缩放 125% 出现"将就着用"）

   用法：zb-home.css / zb-style.css 在加载此文件后，
         可在 @media(max-width:1180px) 块内覆盖布局。
   这里只放通用规则（container 收紧、section padding 压缩）。
   页面特定布局在各自 stylesheet 内补。
   ========================================================================== */
@media (max-width: 1180px) {
  :root {
    --section-pad: 80px;
  }
  .container { width: min(var(--max), calc(100% - 32px)); }
}

@media (max-width: 1024px) {
  :root {
    --section-pad: 64px;
  }
  .container { width: min(var(--max), calc(100% - 28px)); }
}