/* 字体块从 app.css 移到这里（阶段 9）——  install.blade.php 只加载 tokens.css，
   @font-face 留在 app.css 时它一个品牌字体都拿不到（实测 document.fonts.size 为 0，
   整页退回 system-ui）。字体是设计 token，本就该和其它 token 同层。
   不会给 admin / 3 个自定义工具平白增加下载：@font-face 是惰性的，没有元素用到
   该字族就不下载，而它们各自指定了自己的字体栈。 */
/* ==========================================================================
   自托管字体（blkswn 排版）—— 见 docs/主题替换计划-blkswn-v3落地.md 阶段 2
   只取 latin 子集：站点前台目前是纯英文（config/locales.php frontend_enabled = ['en']）。
   Zen Kaku 全量有 242 个 CJK 分片，切勿整包自托管。
   zh 上线时：字体栈里的 "Noto Sans SC" 兜底已就位，届时补 html[lang^="zh"] 覆盖即可
   —— Oswald 无中文字形，且 uppercase 对中文是空操作。
   重新下载：见该文档「阶段 2」的脚本。
   ========================================================================== */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300 500; /* 可变字体：一个文件覆盖 300–500，Google 三个权重实为同一 woff2 */
  font-display: swap;
  src: url('../landing-assets/fonts/oswald-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../landing-assets/fonts/zenkaku-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../landing-assets/fonts/zenkaku-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ☞（U+261E）—— blkswn 的核心母题（hero kicker / 搜索框 / 每张工具卡的箭头 /
   错误前缀 / 链接 hover）。上面两个拉丁分片里**没有**这个字形，此前它一直在回落到
   访客机器上碰巧装了的字体（本机实测是 Noto Sans SC，比 demo 窄 1px）；
   没有任何含 U+261E 字体的访客会看到豆腐块 □ —— 即字形来源不受控，不只是「和 demo 不像」。
   demo 用 Google Fonts，浏览器按 unicode-range 自动取来第 56 号分片，所以它的 ☞ 是
   Zen Kaku 渲染的。这里自托管同一个分片，unicode-range 照抄 Google 的原值，行为一致。
   242 个分片里只取这 1 个（4.2KB，且 @font-face 惰性加载）——「切勿全量自托管」的约束仍然成立。
   只需 400：☞ 的三个消费者实测都是 weight 400。 */
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../landing-assets/fonts/zenkaku-400-symbols.woff2') format('woff2');
  unicode-range: U+25E4-25E6, U+2601-2603, U+2609, U+260E-260F, U+2616-2617,
    U+261C-261F, U+262F, U+2641, U+2660, U+2662-2664, U+2666-2668, U+266D-266E,
    U+2672-267D, U+26BD-26BE, U+2702, U+271A, U+273D, U+2740, U+2756, U+2776-2793,
    U+27A1, U+2934-2935, U+29BF, U+29FA-29FB, U+2B05-2B07, U+2B1A, U+2B95,
    U+2E3A-2E3B, U+2E80-2E99, U+2E9B-2EF3, U+2F00-2F13;
}

/* OneImageTool — unified design tokens (blkswn: monochrome, fluorescent-yellow accent, square corners)
   2026-07-18 用户拍板**还原 demo v3 配色**：撤回第三轮的「中性 + 蓝」（批次1/2），
   回到纯黑 + 荧光黄单色体系。唯一例外是按钮：黑底白字 ⇄ hover 白底黑字（见 app.css .btn-primary）。
   设计规范见 docs/主题设计-blkswn风格.md；落地计划见 docs/主题替换计划-blkswn-v3落地.md。
   本文件被**所有**布局加载（app / admin shell / 3 个自定义工具 / install），
   但**消费**这些变量的只有 css/app.css 与 install.blade.php 的内联样式。
   admin.css 与 css/tools/* 各自定义了全部所用变量，不吃这里 —— 由 prod-walkthrough.mjs 断言守住。
   （旧注释写作「唯一消费者是 app.css」，指的是变量的消费方；加载方一直是全部。） */
:root {
  /* 亮/暗两套值写在同一行（原生 light-dark()），由 :root 的 color-scheme 选中哪个。
     表单控件、滚动条、默认焦点环也跟着 color-scheme 走，不会是亮色方块。
     暗色不用纯黑纯白：#000 底 + #fff 字在 OLED 上晕光、长时间读着累。 */
  color-scheme: light dark;

  /* Monochrome neutrals：灰阶只有三档 —— #666 次要文字、#ededed 次级底、#ccc 发丝线 */
  --bg: light-dark(#ffffff, #0d0d0d);
  --bg-warm: light-dark(#ededed, #1a1a1a);
  --surface: light-dark(#ffffff, #141414);
  --surface-2: light-dark(#ededed, #1f1f1f);
  --border: light-dark(#cccccc, #333333);
  --border-strong: light-dark(#999999, #555555);
  --text: light-dark(#000000, #f0f0f0);
  --muted: light-dark(#666666, #a3a3a3);
  --label: light-dark(#444444, #c8c8c8);

  /* Accent：黑作 CTA 底色，#fdf497 荧光黄只作标记/选中信号（同 demo v3 的
     --bs-invert-bg / --bs-accent 两个角色）。 */
  --accent: light-dark(#000000, #f0f0f0);
  /* 荧光黄两个模式同值：它在黑底上本来就是设计里的记号笔颜色。 */
  --accent-light: #fdf497;
  --accent-hover: light-dark(#333333, #ffffff);
  --accent-soft: #fdf497;

  /* Category chips：分类色统一收进单色体系（原为蓝/绿/橙/紫四色） */
  --c-convert: light-dark(#000000, #f0f0f0);
  --c-convert-soft: light-dark(#ededed, #1f1f1f);
  --c-edit: light-dark(#000000, #f0f0f0);
  --c-edit-soft: light-dark(#ededed, #1f1f1f);
  --c-optimize: light-dark(#000000, #f0f0f0);
  --c-optimize-soft: light-dark(#ededed, #1f1f1f);
  --c-creative: light-dark(#000000, #f0f0f0);
  --c-creative-soft: light-dark(#ededed, #1f1f1f);

  /* 语义状态色 —— 单色体系的既定例外（已拍板）。
     纯黑的「错误」提示读不出是错误，认证/支付表单上这是可用性问题：
     单色是品牌语言，不应盖过功能性信号。
     --success 此前被引用却从未定义，两处 fallback 还互相打架
     （#1f8a4c 与 #16a34a，白底对比度 4.38 / 3.30，双双不达 WCAG AA）。
     现取 #166534 —— 达 7.13，且与 account/billing 里既有的成功色一致。 */
  /* 亮色版的 #DC2626 / #166534 是按白底选的对比度，黑底上一个刺眼一个发闷。
     暗色那两个在 #0d0d0d 上分别是 6.0 / 8.9，都过 WCAG AA。 */
  --danger: light-dark(#DC2626, #f87171);
  --success: light-dark(#166534, #4ade80);

  /* Misc */
  /* 形状：blkswn 的词汇只有三个 —— 直角(默认)、胶囊(可点控件)、5px(输入框)。
     demo 全站 border-radius 仅 24 处：17 胶囊 + 3 个 5px + 3 个圆形 + 1 例外，
     其余元素根本不设 radius。故 --radius 保持 0，面板/卡片/画布一律直角。 */
  --radius: 0;
  --radius-sm: 5px; /* 输入框/文本域（对应 demo 的 --bs-radius-sm） */
  --radius-pill: 60px; /* 按钮/chip/badge/搜索框（对应 demo 的 --bs-radius-pill） */
  /* blkswn 是平的：靠发丝线分层，不靠高度。整个设计稿里没有一处投影
     （唯一的 box-shadow 是模态遮罩，不是投影）。这两个 token 置 none，
     29 处高度投影一次性消失；焦点环用的是 `0 0 0 3px`，不走 token，不受影响；
     设备预览区(app.css 471–909)的投影是 OS 仿真，也不走 token，保留。 */
  --shadow: none;
  --shadow-lg: none;
  /* 字体（自托管 @font-face 见本文件顶部；仅 latin 子集）。
     --display 原名 --serif —— 它一直是「标题/展示字体」这一角色的 token，
     现在装的是无衬线压缩体，旧名会误导，故更名。
     两个栈都以 "Noto Sans SC" 收尾，为 zh 上线留位。 */
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --sans: 'Zen Kaku Gothic New', 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', system-ui, sans-serif;
  --display: 'Oswald', 'Archivo Narrow', 'Arial Narrow', 'Zen Kaku Gothic New',
    'Noto Sans SC', sans-serif;

  /* ── demo v3 结构层的 token 映射（批次6 · 计划 A · P0）──
     采用 demo 的 .bs-* chrome CSS 时，让它的 --bs-* 变量全部落到生产 token 上，
     从而复用 demo 的布局/字体/间距。
     2026-07-18 还原 v3 配色后，这一层与 demo **逐个同值**（不再有 ink/蓝 的分叉）：
     --bs-accent 是荧光黄（demo 的记号笔/选中信号，住在 --accent-light），
     --bs-invert-bg 是纯黑（demo 的反转底，住在 --accent）—— 两者在 demo 里是
     两个不同的角色，别再让它们指向同一个 token。 */
  --bs-bg: var(--bg);
  --bs-bg-sub: var(--surface-2);
  --bs-surface: var(--surface);
  --bs-text: var(--text);
  --bs-text-sub: var(--muted);
  --bs-border: var(--border);
  --bs-accent: var(--accent-light);
  --bs-invert-bg: var(--accent);
  /* 原为写死的 #ffffff。改走 --accent-text 之后自动跟随暗色 —— 两者是同一个角色：
     「压在 --accent 上的文字」。 */
  --bs-invert-text: var(--accent-text);
  --bs-radius-pill: var(--radius-pill);
  --bs-radius-sm: var(--radius-sm);
  --bs-ease: cubic-bezier(0.19, 1, 0.22, 1);
  --bs-font-body: var(--sans);
  --bs-font-condensed: var(--display);
}

/* ── 暗色模式 ────────────────────────────────────────────────────────────
   两套值由上面的 light-dark() 一并写在 token 里；这里只决定**选哪套**：
     · 无 data-theme  → color-scheme: light dark → 跟随系统（无 JS 时也是这条）；
     · data-theme=dark/light → 用户在页头开关里点过，压过系统偏好，存 localStorage。
   开关的解析脚本在 AppLayout 的 head 里（首帧前跑，否则会闪一下亮色）。

   只翻 token，不动任何组件规则：app.css 里 1011 处走 var()，翻这一层就够。
   翻不到的是 127 处硬编码色，其中三类**故意保留亮色**：
     · 设备预览区（.chrome-* / .ios-* / .android-*，app.css 471–1090）——
       那是在仿真真实设备的浏览器界面，跟着站点变暗就不像设备了；
     · `.svg-viewer-stage[data-bg='white']` —— 用户自己选的画布底色；
     · 图片操作手柄（.crop-handle 之类）—— 压在用户图片上，与站点主题无关。

   ⚠ 单色体系里 --accent 是**CTA 底色**（亮色下是纯黑），暗色下必须翻成亮色，
   于是压在它上面的文字不能再写死 #fff。--accent-text 承担这个角色，
   app.css 里那几处 `color:#fff` 是 var(--accent-text)。 */
:root[data-theme='dark'] { color-scheme: dark; }

/* `data-theme="light"` 有两个来源：页头开关，以及 AppLayout 的 lockLight ——
   image-splitter / image-to-ascii 的 blkswn-v3-theme.css 自带写死亮色的 `--bs-*`
   :root，不锁就是站头黑、正文白的半成品。lockLight 另发 data-theme-lock，
   页头开关据此不渲染（app.css .theme-toggle）。 */
:root[data-theme='light'] { color-scheme: light; }

:root {
  /* 压在 --accent 上的三个角色。--accent 是 CTA/站尾的底色（亮色下纯黑、暗色下近白），
     所以压在它上面的东西必须跟着翻 —— 站尾此前把这三个写死成给黑底配的
     #999 / #333，暗色下底翻成近白，灰标和发丝线就糊在一起了（闸门 18 抓到 72 处）。
     暗色的 #555 / #ccc 是按 #f0f0f0 底选的：分别 6.9:1 与发丝线可见但不抢眼。 */
  --accent-text: light-dark(#ffffff, #0d0d0d);
  --accent-muted: light-dark(#999999, #555555);
  --accent-border: light-dark(#333333, #cccccc);

  /* 荧光黄 --accent-light **两个模式同值**，所以压在它上面的字恒为深色。
     留这个名字是为了别再有人在黄底上写 var(--text) —— 那在暗色下是 1.01:1。 */
  --accent-light-text: #0d0d0d;

  /* --bs-* 那一层不用重列：它们本就写成 var(--…)，跟着上面一起翻。 */
}

/* ── 泰语（th）上线覆盖 ──────────────────────────────────────────────────
   本文件顶部为 zh 预留的那条「届时补 html[lang^=...] 覆盖即可」，第一次真正兑现。
   1) 字体：自托管的 Oswald / Zen Kaku 只有 latin 子集，**没有任何泰文字形**
      （U+0E00–U+0E7F）。不覆盖则整页泰文回落到浏览器默认字体，标题尤其明显 ——
      --display 是 Oswald，泰文一个字都取不到。故把两个字体栈整体换成系统泰文字体：
      Noto Sans Thai（Android/Chrome OS/多数 Linux）→ Sarabun（泰国官方文档常用）
      → Leelawadee UI（Windows 8+ 自带）→ Thonburi（macOS/iOS 自带）→ system-ui。
      全是系统字体，不新增任何下载。
   2) 断行：泰文**不用词间空格**，浏览器靠内置词典断行。必须让 word-break 保持
      normal —— 一旦用上 break-all / anywhere，就会在音节甚至基字与元音之间切开，
      读起来是断字错误而不是换行。line-break: strict 交给浏览器的泰文词典。
   3) 行高：泰文有上下叠加的元音与声调符号（กิ๊ / ญ 的下伸笔画），默认行高会让
      上下两行的符号相撞，故整体放宽到 1.75。组件里显式设了 line-height 的地方
      仍按自己的值走，这里只抬默认值。
   ⚠ 尚未做的是真机 QA（Windows / macOS / Android 各看一遍首页与工具页版式）。 */
html[lang="th"] {
  --sans: 'Noto Sans Thai', 'Sarabun', 'Leelawadee UI', 'Thonburi', system-ui, sans-serif;
  --display: 'Noto Sans Thai', 'Sarabun', 'Leelawadee UI', 'Thonburi', system-ui, sans-serif;
  line-height: 1.75;
  word-break: normal;
  overflow-wrap: break-word;
}