@charset "UTF-8";
/* =============================================================================
   hebang-tokens.css —— 设计 token 唯一权威层

   组件与页面只消费这里，不得再写字面量：同一个颜色两处各写一遍，改一处必漏一处。
   ============================================================================= */

:root {
  /* --- 品牌色 --- */

  /* 客户指定主色：只作填充与图形，不作文字，也不承载白色文字 */
  --hebang-color-primary: #7dc641;
  /* 全站"绿色的字"只此一个来源 */
  --hebang-color-primary-text: #457a1d;
  /* 主色按钮的 hover 填充 */
  --hebang-color-primary-hover: #63a62f;
  /* 高亮块、图标底、进度条 */
  --hebang-color-primary-soft: #93d455;
  /* 深色区块、页脚，也是绿底白字的可用档 */
  --hebang-color-primary-dark: #2a4c11;
  /* 内容标题随主题调整，深色填充仍使用 primary-dark。 */
  --hebang-color-primary-heading: var(--hebang-color-primary-dark);
  /* 绿底白字的中间档 */
  --hebang-color-primary-deep: #3c6b19;
  /* 分区底色 */
  --hebang-color-primary-tint: #f3fbe9;
  --hebang-color-primary-tint-2: #e4f6ce;
  /* 主色块上的文字：置于主色上满足 AA 正文对比度 */
  --hebang-color-primary-ink: #111827;

  /* 客户只指定主色与白色；辅助色与强调色由主色派生 */
  --hebang-color-secondary: var(--hebang-color-primary-dark);
  --hebang-color-accent: var(--hebang-color-primary-soft);

  /* --- 中性色 --- */

  --hebang-color-ink: #1f1f1f;
  --hebang-color-ink-soft: #303030;
  --hebang-color-text: #616161;
  --hebang-color-text-soft: #7a7a7a;
  /* 仅用于不承载信息的装饰：分隔、底纹、纯装饰图形；不得用于文本 */
  --hebang-color-muted: #999999;
  /* 占位文字：白底与浅底都满足 AA 正文对比度 */
  --hebang-color-placeholder: #6e6e6e;
  --hebang-color-white: #ffffff;

  /* --- 面与边界 --- */

  --hebang-color-surface: #ffffff;
  --hebang-color-surface-alt: #f7f7f7;
  --hebang-color-surface-soft: #f1f1f1;
  --hebang-color-surface-mute: #eeeeee;
  --hebang-color-border: #e6e6e6;
  --hebang-color-border-soft: #f0f0f0;
  /* 仅可作纯装饰分隔线 */
  --hebang-color-border-strong: #cccccc;
  /* 表单控件边界必须用它：非文本对比度下限 3:1 */
  --hebang-color-border-input: #767676;
  --hebang-color-overlay: rgba(0, 0, 0, 0.6);
  /* 图片查看界面始终使用深底，不随页面亮暗主题切换。 */
  --hebang-color-lightbox-surface: #161616;
  --hebang-color-lightbox-control: #303030;
  /* 卡片底栏图标按钮的静息底色；只作填充，不承载文字 */
  --hebang-color-chip: #e8eced;
  /* 白底卡片内的装饰分隔线；不受非文本对比度约束，也不可作控件边界 */
  --hebang-color-border-veil: rgba(0, 0, 0, 0.12);

  /* --- 深色面上的文字与装饰 --- */

  /*
   * 页脚与顶栏铺在品牌深底上，这里的取值只用于深底。
   * 深色主题下不重定义：这些面本身就是深色。
   */
  --hebang-color-text-invert-soft: #cbcccd;
  /* 版权署名链接比同行的次要文字更淡，与正文拉开层级 */
  --hebang-color-text-invert-mute: rgba(255, 255, 255, 0.49);
  /* 深底上的装饰块与分隔线；不可承载文字 */
  --hebang-color-white-veil: rgba(255, 255, 255, 0.09);

  /* --- 品牌填充上的表单控件 --- */

  /*
   * 控件压在品牌填充上：底色压暗填充以区分边界，边界用半透明白。
   * 两者都不承载文字，控件里的文字另取 --hebang-color-primary-ink。
   */
  --hebang-color-field-veil: rgba(31, 31, 31, 0.08);
  --hebang-color-field-edge: rgba(255, 255, 255, 0.28);

  /*
   * 图标圆盘压在主色填充上：只作装饰底盘，不承载文字，也不参与对比度核算。
   */
  --hebang-color-fill-veil: rgba(0, 0, 0, 0.1);

  /* --- 语义色 --- */

  --hebang-color-success: #4caf50;
  --hebang-color-warning: #f7c600;
  --hebang-color-danger: #c3002f;
  --hebang-color-danger-border: var(--hebang-color-danger);
  --hebang-color-info: #1a73e9;
  --hebang-color-warning-border: #c78c15;
  --hebang-color-warning-border-soft: #e8cf8d;
  --hebang-color-warning-hover: #f8ebce;

  /* --- 语义色底 --- */

  /* 标签与提示块成对使用浅底和深色文字，避免仅靠颜色表达状态。 */
  --hebang-color-success-surface: #e8f5e9;
  --hebang-color-success-text: #1b5e20;
  --hebang-color-warning-surface: #fff8e1;
  --hebang-color-warning-text: #7a5b00;
  --hebang-color-danger-surface: #fdecef;
  --hebang-color-danger-text: #a30020;
  /* 无底色的字段提示随页面明暗变化；提示块继续使用成对的底色与文字色。 */
  --hebang-color-danger-inline: #dc2626;
  --hebang-color-info-surface: #e7f1fd;
  --hebang-color-info-text: #0b4a8f;

  /* --- 字体栈 --- */

  /* 正文使用无衬线兜底，避免字体未加载时出现突兀的字形变化。 */
  --hebang-font-sans: "Space Grotesk", sans-serif;
  /* 标题与正文分开登记，便于分别调整回退字体。 */
  --hebang-font-heading: "Space Grotesk", serif;
  --hebang-font-display: "Rozha One", serif;
  --hebang-font-mono: ui-monospace, sfmono-regular, menlo, monaco, consolas, monospace;

  /* --- 字重 --- */

  --hebang-weight-light: 300;
  --hebang-weight-regular: 400;
  --hebang-weight-medium: 500;
  --hebang-weight-semibold: 600;
  --hebang-weight-bold: 700;
  --hebang-weight-black: 900;

  /* --- 字号阶：数值阶供精细对齐，语义阶供组件使用 --- */

  --hebang-fs-11: 11px;
  --hebang-fs-12: 12px;
  --hebang-fs-13: 13px;
  --hebang-fs-14: 14px;
  --hebang-fs-15: 15px;
  --hebang-fs-16: 16px;
  --hebang-fs-17: 17px;
  --hebang-fs-18: 18px;
  --hebang-fs-20: 20px;
  --hebang-fs-22: 22px;
  --hebang-fs-24: 24px;
  --hebang-fs-26: 26px;
  --hebang-fs-28: 28px;
  --hebang-fs-30: 30px;
  --hebang-fs-36: 36px;
  --hebang-fs-40: 40px;
  --hebang-fs-50: 50px;
  --hebang-fs-60: 60px;
  --hebang-fs-80: 80px;

  --hebang-fs-body: var(--hebang-fs-16);
  --hebang-fs-body-sm: var(--hebang-fs-14);
  --hebang-fs-meta: var(--hebang-fs-13);
  --hebang-fs-h6: var(--hebang-fs-18);
  --hebang-fs-h5: var(--hebang-fs-20);
  --hebang-fs-h4: var(--hebang-fs-24);
  --hebang-fs-h3: var(--hebang-fs-28);
  --hebang-fs-h2: var(--hebang-fs-36);
  --hebang-fs-h1: var(--hebang-fs-50);
  --hebang-fs-display: var(--hebang-fs-60);

  /* --- 行高：正文行高与字号成对，故保留像素形态 --- */

  --hebang-lh-tight: 1.2;
  --hebang-lh-snug: 1.35;
  --hebang-lh-base: 1.6;
  --hebang-lh-relaxed: 1.8;
  --hebang-lh-body: 26px;
  --hebang-lh-body-sm: 22px;
  --hebang-lh-head: 40px;
  --hebang-lh-display: 70px;

  /* --- 间距阶 --- */

  --hebang-space-0: 0;
  --hebang-space-1: 5px;
  --hebang-space-2: 8px;
  --hebang-space-3: 10px;
  --hebang-space-4: 12px;
  /* 栅格侧槽 */
  --hebang-space-5: 15px;
  --hebang-space-6: 20px;
  --hebang-space-7: 25px;
  --hebang-space-8: 30px;
  --hebang-space-9: 40px;
  --hebang-space-10: 50px;
  --hebang-space-11: 60px;
  --hebang-space-12: 70px;
  --hebang-space-13: 80px;
  --hebang-space-14: 100px;

  --hebang-gutter: var(--hebang-space-5);

  /* --- 版心容器 --- */

  --hebang-container: 1250px;
  --hebang-container-wide: 1340px;
  --hebang-container-std: 1200px;
  --hebang-container-narrow: 800px;
  --hebang-container-text: 860px;
  --hebang-container-full: 100%;

  /* --- 断点 --- */

  /*
   * CSS 禁止在 @media 条件里用 var()，这里的常量供 JS 与手写 @media 对照，新增样式统一用这 6 个。
   * 同一处布局不要混用相邻断点，否则窄屏区间会漏样式。
   * max-width 含端点向下生效：480 xs、767 sm、991 md、1024 lg、1366 xl、1600 2xl。
   * min-width 不含端点向上生效：481 sm 以上、768 md 以上、992 lg 以上、1025 xl 以上、1367 2xl 以上、1601 超宽屏。
   * hebang-blog.css 中的 576/992/1199/1300px 沿用 Bootstrap 版心五档，不属于此系统。
   */
  --hebang-bp-xs: 480px;
  --hebang-bp-sm: 767px;
  --hebang-bp-md: 991px;
  --hebang-bp-lg: 1024px;
  --hebang-bp-xl: 1366px;
  --hebang-bp-2xl: 1600px;

  /* --- 圆角 --- */

  --hebang-radius-xs: 2px;
  --hebang-radius-sm: 3px;
  --hebang-radius: 5px;
  --hebang-radius-md: 10px;
  --hebang-radius-lg: 30px;
  --hebang-radius-xl: 50px;
  --hebang-radius-pill: 99em;
  --hebang-radius-circle: 50%;

  /* --- 边框 --- */

  --hebang-border-width: 1px;
  --hebang-border: var(--hebang-border-width) solid var(--hebang-color-border);
  --hebang-border-soft: var(--hebang-border-width) solid var(--hebang-color-border-soft);
  --hebang-border-input: var(--hebang-border-width) solid var(--hebang-color-border-input);

  /* --- 阴影 --- */

  --hebang-shadow-sm: 0 0 1px rgba(0, 0, 0, 0.1);
  --hebang-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
  --hebang-shadow-md: 0 10px 40px rgba(0, 0, 0, 0.1);
  --hebang-shadow-lg: 0 14px 30px rgba(0, 0, 0, 0.1);
  --hebang-shadow-glow: 0 70px 90px rgba(0, 0, 0, 0.1);
  --hebang-shadow-none: none;

  /* --- 动效 --- */

  --hebang-ease: ease;
  --hebang-ease-in-out: ease-in-out;
  --hebang-ease-out: cubic-bezier(0.25, 0.8, 0.25, 1);
  --hebang-dur-fast: 0.2s;
  --hebang-dur: 0.3s;
  --hebang-dur-slow: 0.4s;
  --hebang-dur-slower: 0.5s;
  --hebang-transition: all var(--hebang-dur) var(--hebang-ease) 0s;
  --hebang-transition-fast: all var(--hebang-dur-fast) var(--hebang-ease) 0s;

  /* --- 层级：收成固定阶梯，避免任意大数互相压盖 --- */

  --hebang-z-below: -1;
  --hebang-z-base: 1;
  --hebang-z-raised: 2;
  --hebang-z-dropdown: 10;
  --hebang-z-sticky: 99;
  --hebang-z-header: 100;
  /* 固定页头带：与 --hebang-z-header 取值相同但语义独立，它是整条页头堆叠上下文的根，
     跳过它聚焦的 .skip-link 用更高的值压过，页头内的子菜单与搜索框在带内自比，不参与外层阶梯。 */
  --hebang-z-header-band: 100;
  --hebang-z-search: 101;
  --hebang-z-offcanvas: 999;
  --hebang-z-floating: 9999;
  --hebang-z-modal: 10000;
  --hebang-z-preloader: 999999;

  /* --- 组件尺寸 --- */

  /* 触屏目标下界 44px，低于它的可点元素在移动端会互相误触 */
  --hebang-hit-min: 44px;
  --hebang-control-h: 44px;
  --hebang-control-h-sm: 36px;
  --hebang-control-h-lg: 52px;
  --hebang-header-h: 90px;
  --hebang-header-h-sticky: 70px;
  --hebang-focus-ring: 0 0 0 2px var(--hebang-color-surface), 0 0 0 4px var(--hebang-color-primary-text);
}

/* 手机角色值只在手机范围消费，桌面字号阶保持原有契约。 */
@media (width < 768px) {
  :root {
    --hebang-gutter: 20px;
    --hebang-mobile-page-title: clamp(28px, 8vw, 32px);
    --hebang-mobile-section-title: 28px;
    --hebang-mobile-reading-title: 22px;
    --hebang-mobile-card-title: 20px;
    --hebang-mobile-section-space: 48px;
    --hebang-mobile-content-gap: 20px;
    --hebang-mobile-banner-space: 40px;
    --hebang-mobile-control-h: 52px;
    --hebang-lh-body: 1.6;
  }
}

@media (width < 360px) {
  :root { --hebang-gutter: 16px; }
}

/* 深色模式由 html 上的 data-hebang-theme 驱动，组件只消费 token，不感知模式 */
[data-hebang-theme="dark"] {
  --hebang-color-ink: #f2f2f2;
  --hebang-color-ink-soft: #dcdcdc;
  --hebang-color-text: #b8b8b8;
  --hebang-color-text-soft: #9a9a9a;
  --hebang-color-muted: #8a8a8a;
  --hebang-color-placeholder: #9a9a9a;

  --hebang-color-surface: #161616;
  --hebang-color-surface-alt: #1d1d1d;
  --hebang-color-surface-soft: #242424;
  --hebang-color-surface-mute: #2b2b2b;

  /* 主色在深色底上满足 AA 正文对比度，因此这里不必再退到深一阶 */
  --hebang-color-primary-text: #7dc641;
  --hebang-color-primary-tint: #1f2a14;
  --hebang-color-primary-tint-2: #26331a;
  --hebang-color-primary-heading: var(--hebang-color-primary-text);

  --hebang-color-border: #2f2f2f;
  --hebang-color-border-soft: #262626;
  --hebang-color-border-strong: #4a4a4a;
  --hebang-color-border-input: #8a8a8a;
  --hebang-color-danger-border: #ff758b;
  --hebang-color-danger-inline: var(--hebang-color-danger-border);

  --hebang-color-chip: #242424;
  --hebang-color-border-veil: rgba(255, 255, 255, 0.12);

  --hebang-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.5);
  --hebang-shadow-md: 0 10px 40px rgba(0, 0, 0, 0.55);
  --hebang-shadow-lg: 0 14px 30px rgba(0, 0, 0, 0.6);
  --hebang-shadow-glow: 0 70px 90px rgba(0, 0, 0, 0.6);
}

/* 内联脚本未执行时的兜底；正常路径下属性已由 wp_head 的内联脚本写好 */
@media (prefers-color-scheme: dark) {
  :root:not([data-hebang-theme="light"]) {
    --hebang-color-ink: #f2f2f2;
    --hebang-color-ink-soft: #dcdcdc;
    --hebang-color-text: #b8b8b8;
    --hebang-color-text-soft: #9a9a9a;
    --hebang-color-muted: #8a8a8a;
    --hebang-color-placeholder: #9a9a9a;
    --hebang-color-surface: #161616;
    --hebang-color-surface-alt: #1d1d1d;
    --hebang-color-surface-soft: #242424;
    --hebang-color-surface-mute: #2b2b2b;
    --hebang-color-primary-text: #7dc641;
    --hebang-color-primary-tint: #1f2a14;
    --hebang-color-primary-tint-2: #26331a;
    --hebang-color-primary-heading: var(--hebang-color-primary-text);
    --hebang-color-border: #2f2f2f;
    --hebang-color-border-soft: #262626;
    --hebang-color-border-strong: #4a4a4a;
    --hebang-color-border-input: #8a8a8a;
    --hebang-color-danger-border: #ff758b;
    --hebang-color-danger-inline: var(--hebang-color-danger-border);
    --hebang-color-chip: #242424;
    --hebang-color-border-veil: rgba(255, 255, 255, 0.12);
  }
}