/* ============================================================================
 * 设计令牌
 * ----------------------------------------------------------------------------
 * 极简黑白。这里定下的规则，其余样式表只引用、不再硬编码数值。
 *
 * 两条设计原则：
 *   1. 层次由「字号 + 留白」建立，不靠粗细对比 —— 因此全站只有 Thin 100
 *      与 Light 300 两档字重，且二者相差 3 级而非 1 级。
 *   2. 灰阶只用于分层（分隔线 / 次级文字 / 三级文字），不作为装饰色。
 *
 * v1.5 变更（详见 500_白皮书/AKO_web_官网调性与版式重构方案_v1.5.0.md）：
 *   设计主张收紧为「安静的文字 + 活的图形 + 可见的结构」。
 *   首屏体量不由「大」承担，由「动」（点阵）与「图」（标识）承担，
 *   因此文字层级全部收小，而**序号与证据数字放大到全站最大**——
 *   那两个是两位数，放大不受容器宽度限制，也不违反「文字克制」。
 *   同时引入全站唯一的强调色（朱砂），只上白底、只落在「点」上。
 * ==========================================================================*/

:root {
  /* ---------------------------------------------------------------- 色 */
  --c-ink:          #000;                /* 正文与图形：纯黑 */
  --c-paper:        #fff;                /* 底色：纯白 */

  --c-rule:         rgba(0, 0, 0, .14);  /* 常规分隔线 */
  --c-rule-strong:  rgba(0, 0, 0, .32);  /* 强调分隔线、卡片边界 */
  --c-muted:        rgba(0, 0, 0, .52);  /* 次级文字 */
  --c-faint:        rgba(0, 0, 0, .34);  /* 三级文字：序号、注释 */
  --c-wash:         rgba(0, 0, 0, .028); /* 悬停底色 */

  /* --------------------------------------------------- AKO 朱砂（唯一强调色）
     来源：《官网调性与版式重构方案 v1.5.0》4.3。这是 AKOagent 的第一份
     成文色定义——AKObuild 的《品牌视觉宪法》是「暖金（材质色、面的颜色）」，
     本公司在同一个传统矿物色系里取「朱砂（文书色、点的颜色）」，
     一个主面、一个主点，家族有血缘、一眼可区分。

     语义链：审图、造价审核、出图盖章——中国建筑行业的这几个动作，
     最后都落在一支红笔和一枚印章上。朱砂就是那个动作的颜色。

     实测对比度：白底 #FFF 上 5.9:1（正文级通过）；
                 纯黑底上 3.6:1（只够大字级）。

     使用铁律（五处、且只在白底上）：
       允许 —— 首屏公司名 / 版块超大序号 / 证据数字 /
               点阵成熟度满格标记 / 可点击链接下划线与悬停态
       禁止 —— 大面积底色、渐变、按钮填充块、图标着色、任何「面」上的应用
       黑底 —— **不出现**。黑底反白段本身即全站最大视觉事件，不需要再加色。

     色盲安全：颜色只能是增强，不能是唯一编码。去掉颜色信息一个字都不能丢。

     印刷值须另定并按专色打样，不得用 RGB 直接换算。 */
  --c-accent:       #B23B2E;

  /* ------------------------------------------------------ 黑底反白版块（关于我们）
     全站唯一的「面」级对比。黑白系统里最强的资产是黑，一点不用是浪费。
     朱砂不上这一层（见上）。 */
  --c-inv-bg:       #000;
  --c-inv-fg:       #fff;
  --c-inv-muted:    rgba(255, 255, 255, .62);
  --c-inv-faint:    rgba(255, 255, 255, .38);
  --c-inv-rule:     rgba(255, 255, 255, .20);

  /* -------------------------------------------------------------- 字体 */
  /* 主字体由 css/fonts.css 以内嵌子集提供；
     后面的兜底栈保证子集未加载时仍可读、不跳版。 */
  --f-sans: "HarmonyOS Sans SC", "HarmonyOS Sans", "PingFang SC",
            "Microsoft YaHei Light", "Microsoft YaHei", system-ui,
            -apple-system, "Segoe UI", sans-serif;
  /* 等宽仅用于编号等需要对齐数字的地方 */
  --f-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;

  --fw-thin:  100;
  --fw-light: 300;

  --lh-tight: 1.15;   /* 大标题 */
  --lh-snug:  1.45;   /* 小标题、卡片描述 */
  --lh-body:  1.85;   /* 正文 —— 偏松，是「极简」观感的主要来源 */

  /* 字距：字号越大，字距收得越紧，中文标题才不会显得松散 */
  --ls-display: .01em;
  --ls-title:   .02em;
  --ls-body:    .01em;
  --ls-label:   .14em;   /* 小写拉丁/全大写标签用，中文慎用 */

  /* -------------------------------------------------------------- 字号 */
  /* 用 clamp 做流体排版，避免为每个断点单独调字号 */
  /* 首屏公司名固定 13 个汉字，且要求单行不折行 —— 这是需求方确认的硬指标。
     字号与容器宽度的关系是 13 × 字号 ≤ 容器宽，因此：
       375px 视口：容器 337px → 上限 25.9px
       1440px 视口：容器 1084px → 上限 83px
     桌面端本可以做到 80px，但需求方裁定「不放大，反缩小，低调克制」，
     故上限收到 24px。系数取 6.8（原 6.4）以保证 320px 窄屏仍不折行：
       320px 下 6.8vw = 21.76px，13 字 283px，容器 288px，成立。
       375px 下 6.8vw = 25.5px，被 1.5rem 上限截到 24px，13 字 312px，成立。 */
  --fs-display: min(1.5rem, 6.8vw);
  /* 版块标题必须小于首屏公司名，否则层级倒置（v1.4 曾是 36px > 30px）。
     现在是 22px < 24px。 */
  --fs-title:   1.375rem;
  --fs-lead:    clamp(1.0625rem, 1.5vw, 1.125rem);/* 导语 18px 上限 */
  --fs-h3:      clamp(1rem, 1.1vw, 1.125rem);
  --fs-body:    1rem;
  --fs-sm:      .875rem;
  --fs-xs:      .8125rem;
  --fs-micro:   .75rem;

  /* ------------------------------------------------ 承载体量的两个新层级
     全站最大的元素不是文字，是序号。这是「安静的文字」得以成立的前提：
     体量从文字转移到数字上，两位数放大不受容器宽度限制。
     字号跨度因此由 v1.4 的 3 倍（12→36）变为 8 倍（12→96）。 */
  --fs-index:   clamp(3.5rem, 7vw, 6rem);      /* 版块序号 56–96px */
  --fs-metric:  clamp(2.5rem, 4.5vw, 4.5rem);  /* 证据数字 40–72px */

  /* -------------------------------------------------------------- 间距 */
  /* 8px 基准的等比阶梯。大尺度留白全靠这几档拉开。 */
  --sp-1:  .25rem;   /*  4 */
  --sp-2:  .5rem;    /*  8 */
  --sp-3:  .75rem;   /* 12 */
  --sp-4:  1rem;     /* 16 */
  --sp-5:  1.5rem;   /* 24 */
  --sp-6:  2rem;     /* 32 */
  --sp-7:  3rem;     /* 48 */
  --sp-8:  4rem;     /* 64 */
  --sp-9:  6rem;     /* 96 */
  --sp-10: 9rem;     /* 144 */

  /* 版块竖向节奏 —— 留白是本设计「简约而不简单」的主要手段 */
  --section-y: clamp(5rem, 12vh, 9.5rem);

  /* -------------------------------------------------------------- 布局 */
  --wrap-max: 1180px;
  --wrap-pad: clamp(1.25rem, 5vw, 3rem);
  --header-h: 68px;

  /* 卡片直角化（原 14px 圆角）。圆角是通用 Web 卡片的语言，
     既不属于「点阵（交互与生命）」，也不属于「实线（结构与静态）」，
     它是页面上第三种语言 —— 这正是「看起来像模板」的来源。 */
  --radius-card: 0;

  /* 全页贯穿轴线：建筑图纸的轴号系统。1px 竖线 + 序号悬挂在线旁，
     让「秩序」被看见。这一条是「设计感」变「专业感」的关键。 */
  --axis-w: 1px;

  /* -------------------------------------------------------------- 动效 */
  --dur-fast: .18s;
  --dur-base: .32s;
  --dur-slow: .72s;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.45, .05, .55, .95);

  /* 滚动渐显的位移量。用变量而非固定值，便于统一调手感。 */
  --reveal-shift: 18px;

  /* 标识心跳的周期。
     ---------------------------------------------------------------------
     v1.5-r4：由 1.3s 改为 2.0s（需求方：跳动频率有点快，要接近正常心率）。

     怎么算的（关键帧里一个周期有两次起伏 = 真实心音的「蹦-哒」）：
       1.3s → 看得见的起伏 92 次/分 —— 运动后心率的量级，偏快
       2.0s → 看得见的起伏 60 次/分 —— 静息心率下沿，正常
       2.6s → 看得见的起伏 46 次/分 —— 偏慢
     取 2.0s。

     顺带一个好处：周期变长之后，「蹦」与「哒」的间隔由 0.23s 变为 0.36s，
     更接近真实心音的时距，听起来也更像心跳而不是抖动。

     一条已知代价：原 1.3s 是点阵呼吸周期 2600ms 的**整半数**，
     两者永远同拍。2.0s 与 2.6s 不成整数倍，会缓慢错相 ——
     但每 26s 重合一次（最小公倍数），肉眼不会看出「打架」。
     若日后觉得不够整齐，可改回 2.6s（一次呼吸一次心跳），代价是降到 46 次/分。

     仍然存在的耦合：CSS 读不到 JS 的 opts.period，改一处要想着另一处。 */
  --dur-beat: 2s;

  /* ------------------------------------------------------- 点阵交互层 */
  /* 涟漪的网格点距。本意是「与首屏标识同节奏」：标识 20 格宽、格阵盒
     显示 200px，格距 10px（logo-dots.js 的 cols × pitch × 画布缩放比
     0.202626 = 10.000），交互层和品牌图形说同一种语言。
     该值曾是 9px，对应更早那版 22 格 × 9px 的标识；标识换成实心轮廓重新
     提取、格数变成 20 之后没有跟着重算，涟漪的点一直比标识的点密 11%。
     已按 10px 校正。消费方是 js/ripple.js 与版块卡片的点阵底纹
     （css/sections.css），两处都写成相对本变量的形式（后者取 pitch / -2
     做半格相位），因此改值不会破坏它们自身对卡片左上角的对齐。
     方向仍然要说清楚：这个值是「对齐标识」的结果，不是反过来驱动标识 ——
     标识的点距来自 logo-dots.js 的数据 × 缩放比，不读这个变量。 */
  --dot-pitch: 10px;

  /* 导航下划线用的点阵。比 --dot-pitch 密得多：下划线只有 2px 高，
     按 10px 铺点会稀到看不出是一条线。 */
  --dot-rule-size: 2px;
  --dot-rule-pitch: 6px;

  /* 按下态：底色比悬停（--c-wash）再深一档 */
  --c-press: rgba(0, 0, 0, .07);

  /* 点阵显影（**目前只有版块标题**用）的端点。
     两个端点都是「点阵」，只是疏密不同：起手是稀而小的网点，字只是一团
     隐约的灰；收尾时点已胀满格子，密到读不出颗粒，与实心字逐像素等价 ——
     所以动画结束时直接撤掉遮罩即可，不会有一次跳变。
     点距从粗收到细、墨量从薄收到满，两条同时走，合起来才是「聚成字」。
     首屏标语曾共用这一套，现改为逐字渐显 —— 它是 22px（上限，1440px 视口下
     实为 21.6px）的细笔画，点阵要贴着
     笔画走才认得出是字，与其近旁的点阵标识也重复，故摘除（见 sections.css）。 */
  --dot-resolve-from: 8px;    /* 起手点距：一个字只剩两三个点 */
  --dot-resolve-to: 2.5px;    /* 收尾点距：网格细到看不出颗粒 */
  --dur-resolve: .86s;

  /* 版块标题紧跟在 .reveal 的渐显之后，让「先浮起、再聚成」有先后；
     首屏标语则等标识长到七成时才轮到它 —— 标语不再聚成字，但这条先后
     保留：标识先起来，文字随后逐字浮出，两者仍是错开的。 */
  --delay-title-resolve: .12s;
  --delay-hero-resolve: 1.1s;

  /* 首屏标语逐字渐显的节奏。--stagger-char 是相邻两字的起点间隔，
     --dur-char 是单字自己淡入的时长 —— 它**比间隔长**，所以任何一刻都有
     五六个字同时在淡，读起来是一道从左到右的浪，而不是打字机一下一下地跳。
     --beat-clause 是逗号之后的那一拍：句子分两口气说完 ——
     「我不完美，」停一下，再说「但是真实。」。把它设成 0 就退化为均匀逐字。
     十个字的时间表（相对标语延迟）：0 70 140 210 280 ｜ 550 620 690 760 830，
     末字在 830 + 340 = 1170ms 落定 —— 即页面打开后约 2.27s 整句说完。 */
  --dur-char: .34s;
  --stagger-char: 70ms;
  --beat-clause: 200ms;

  /* 卡片点击确认态的停留时长。js/cards.js 会读这个值来决定何时摘掉
     状态类 —— 两处共用一个数字，改这里就够，不必去 JS 里再找一个。 */
  --dur-ack: 1.15s;
}

/* 尊重系统的「减少动态效果」设置：全站动效降为瞬时。 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: .01ms;
    --dur-base: .01ms;
    --dur-slow: .01ms;
    --reveal-shift: 0px;
  }
}