/*
 * 设计 token —— 全站唯一的一份颜色/字号/间距/时长定义。
 * 前台 style.css 与后台 admin.css 都加载本文件：同一套视觉语言是刻意的，
 * 后台和网站长得不一样，运营就会怀疑自己进错了系统。
 * 这里只放"值"；区块颜色上下文（--fg/--rule 的按场景覆盖）在 style.css §1。
*/
/* ==========================================================================
   1. TOKENS — the only place a raw colour or size may be written.

   Colour works by CONTEXT, not by name. Every block that paints a background
   also publishes --fg / --fg-muted / --rule; components read those and never
   name a colour themselves. There is therefore no "--text is near-white" and
   no "--bg is dark" for a template to pick wrongly, which is what produced
   the three white-on-white incidents recorded in the handover doc §9.4.
   ========================================================================== */

/* ==========================================================================
   0. 品牌字体 —— 商标里只有 TEENPAI 这 7 个字母用定制字，其余全是系统字体

   口径（老板 2026-09-21 定的两条）：
   1. **中文一律默认黑体**。VI 指定的「吉利银河美好体」不再嵌进网页——
      它是方正出的授权字体，"免费商用"覆盖企业官网展示，但方正通用条款又把
      "电子文件格式转换后嵌入网站"划给单独的嵌入式授权，两页合读不出唯一答案。
      授权没书面确认之前不嵌。要恢复：把吉利那份裁成子集加回 --font-brand 第一档。
   2. **只有品牌信息用品牌字**，也就是商标中的拉丁部分。标题、正文、导航、按钮、
      参数表、表单全部走系统黑体栈。

   商标本身按语言换文本（见 functions.php 的 dt_brand_lines）：
   中国站「挺派 / TEENPAI」，英/越/印尼站「TEENPAI / 当地语言的品类句」——
   海外访客对着中文是念不出来、也不知道该怎么称呼我们的。

   授权：Krona One 是 SIL OFL 1.1，允许嵌入网页与再分发子集，条件是**许可证必须随字体一起发布**，
   所以 fonts/OFL-KronaOne.txt 与那个 woff2 必须在同一个目录里，不要只拷字体文件。
   它只有一个字重，用的地方必须 font-weight:400，写粗体浏览器会合成假粗。

   实测记录，免得有人再往界面文字上套品牌字：Krona One 共 411 个字形，
   拉丁扩展区基本齐全但**没有越南语变音符**（vi 页面用到的字缺 65 个）。
   商标不受影响（TEENPAI 全是基础拉丁），品类句那行已明确回系统字体栈。
   判断"这个字体支不支持某语言"必须对 cmap，不能看渲染截图——浏览器会悄悄换字。
   ========================================================================== */

@font-face{
  font-family:"Teenpai Latin";          /* Krona One：商标里的 TEENPAI（SIL OFL，许可证见 fonts/） */
  src:url(fonts/teenpai-brand-latin.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  /* surface */
  --bg-page:#ffffff;
  --bg-soft:#f4f4f6;
  --bg-ink:#0b0c0e;
  --bg-photo:#141518;

  /* text */
  --ink:#0b0c0e;
  --muted:#6b6e75;
  --on-ink:#f4f5f7;
  --on-ink-muted:#a6a9b0;

  /* line */
  --rule-light:#e2e3e7;
  --rule-dark:rgba(255,255,255,.18);

  /* single accent, used only for focus rings, eyebrow rules and step numbers.
     It is context-dependent like everything else: the light value fails at
     3.9:1 on the ink background, so dark contexts swap it. */
  /* 只用于门型/开向示意图的玻璃面。裸值仍然只出现在这个文件里。 */
  --glass:#e4edf4; --glass-line:#c6d8e6;
  --accent:#8a6a45;
  --accent-on-dark:#c9a97e;

  /* form feedback states — all three pairs measured ≥10:1 */
  --ok-fg:#22401f;  --ok-bg:#eef4ee;  --ok-line:#cfe0cf;
  --bad-fg:#5c2020; --bad-bg:#f8eeee; --bad-line:#e6cfcf;
  /* 第三种状态：不是成功也不是失败，而是"还差一点"。
     之前这组黄只在 studio.css 里以裸值出现四次（状态条、过期胶囊、草稿角标、
     待办圆点），改一次要找四处；后台的"待处理"色调整就是从这里走的。 */
  --warn-fg:#6b4a12; --warn-bg:#fdf6e7; --warn-line:#eddfbd;
  --warn-dot:#c8781b; --bad-dot:#b32d2e;
  /* 中性提示（"这一项是干什么用的"），比 warn 安静一档 */
  --info-fg:#24425f; --info-bg:#eaf0f6; --info-line:#cfdcea;

  /* 半透明叠色与投影。alpha 值只在这里出现，组件读名字。 */
  --veil:rgba(255,255,255,.08);        /* 深色条上的悬浮底 */
  --on-ink-rule:rgba(255,255,255,.2);  /* 深色条上的分隔线 */
  --on-ink-rule-soft:rgba(255,255,255,.14);
  --ink-veil:rgba(11,12,14,.06);       /* 浅色底上的中性小胶囊 */
  --scrim:rgba(11,12,14,.5);           /* 抽屉与弹层背后的那层压暗 */
  --hit:rgba(138,106,69,.07);          /* 预览里点中的那一块在右边高亮 */
  --ring:0 0 0 3px rgba(138,106,69,.16);
  --ring-focus:0 0 0 3px rgba(138,106,69,.25);
  --lift-frame:0 18px 50px -28px rgba(11,12,14,.45);
  --lift-phone:0 26px 60px -30px rgba(11,12,14,.55);
  --lift-card:0 10px 30px -20px rgba(11,12,14,.5);

  /* type ---------------------------------------------------------------
     品牌字（吉利银河美好体 + Krona One）只用在「品牌信息」上，也就是商标那几个字。
     标题、正文、导航一律还是原来的系统黑体栈——老板明确要的就是这个口径。
     定义与选型理由在文件开头。 */

  /* 系统字体栈：除了商标，全站都用它。 */
  --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font:var(--font-ui);
  /* 商标：拉丁走 Krona，汉字自然落到后面的系统黑体（Krona 没有汉字字形）。 */
  --font-brand:"Teenpai Latin",var(--font-ui);
  --t-h1:clamp(30px,3.6vw,46px);
  --t-h2:clamp(26px,2.6vw,40px);
  --t-h3:19px;
  --t-body:15px;
  --t-small:14px;
  --t-label:12px;
  --lh-head:1.22;
  --lh-body:1.7;
  --track-head:-.018em;
  --track-caps:.14em;

  /* space — 4px base */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --pad:clamp(20px,4vw,56px);
  --section-y:clamp(72px,9vw,128px);
  --gap:clamp(12px,1.4vw,20px);

  /* shape */
  --max:1240px;
  --max-narrow:760px;
  --r-sm:3px;
  --r-md:6px;
  --header-h:64px;
  --shadow-1:0 1px 2px rgba(11,12,14,.05);
  --shadow-2:0 24px 64px rgba(11,12,14,.16);
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-soft:cubic-bezier(.32,.72,0,1); /* 大面积/长距离运动的减速曲线 */
  /* 浮层入场用：Material 的 decelerate。快速起步、干净收住，没有长尾。
     --ease-soft 是给"手指拖着走"的抽屉用的，拿去做固定距离的自动位移，
     最后几十像素会爬 300ms——看着就是停不下来地在抖。 */
  --ease-enter:cubic-bezier(0,0,.2,1);

  /* duration — every transition reads these, so reduced-motion only has to
     zero the tokens instead of overriding each rule with !important */
  --dur-fast:.2s;
  --dur:.3s;
  --dur-slow:.6s;

  /* Default colour context. Components below never name a colour directly,
     they read these four. A block that paints a dark background overrides
     them once; anything that forgets to is still legible on white. */
  --bg:var(--bg-page);
  --fg:var(--ink);
  --fg-muted:var(--muted);
  --rule:var(--rule-light);
}