/*
 * tokens.css —— 全 App 一套设计 token（S14）
 *
 * 深色工作台 + 暖木色实体 + 单一品牌青。颜色、间距、字号、圆角、动效时长
 * **只在这个文件里定义**；别的文件一律 var(--x)。
 * 旧的 app.html 是暖纸色，与 S14 不符 —— 这套 token 就是重定的基调。
 *
 * 为什么只有一个品牌色：3D 视口永远是主角，UI 退后。多一个强调色，
 * 屏幕上就多一处跟柜子抢注意力的地方。
 */
:root {
  color-scheme: dark;

  /**
   * ㊿ 字号档（「我的」里「字号：标准 / 大」那一档）。
   * 五十岁的师傅在工地上看 13px 的说明是费劲的。
   * 只有一个倍数，所有字号都乘它 —— 改成一档一档手写的话，
   * 十七处里总会漏掉几处（规则 199 的字号版）。
   */
  --f-scale: 1;

  /* ── 底色：深色工作台 ── */
  --bg:        #141517;   /* 页面底 */
  --s1:        #191b1e;   /* 卡片 / 面板 */
  --s2:        #202327;   /* 卡片里再抬一层 / 输入框 */
  --s3:        #282c31;   /* 悬停 */
  --line:      #2c3036;   /* 1px 分隔线 */
  --line-soft: #23262b;

  /* ── 文字 ── */
  --fg:   #e9e7e4;
  --fg2:  #9aa1a9;        /* 次要说明 */
  --fg3:  #6a7178;        /* 占位 / 禁用 / 线条与图标 ——
                             ⚠️ 不许拿它写正文：12px 的 #6a7178 压在 --s1 上只有 3.49:1，
                             过不了 ◇B#18 的 4.5:1。正文第二档用 --fg2，层级靠字号拉开 */

  /* ── 单一品牌青 ── */
  --brand:      #6fbfae;
  --brand-dim:  #4e8d80;
  --brand-ink:  #08201b;  /* 品牌色底上的字 */
  --brand-wash: #6fbfae1f;

  /* ── 暖木色：只给实体（3D 板件 / 缩略图），不给 UI ── */
  --wood:      #c08d5a;
  --wood-dark: #8d6136;

  /* ── 状态 ── */
  --warn:   #e3b341;      /* ⚠️ 未确认 */
  --danger: #e2695a;      /* 阻断 / 破坏性操作 */
  --ok:     #6fbfae;      /* 通过（复用品牌色，不再引第四个颜色） */
  --warn-wash:   #e3b3411c;
  --danger-wash: #e2695a1c;

  /* ── 字号：标题少而大，层级靠留白 ── */
  --f-xs: calc(12px * var(--f-scale));
  --f-sm: calc(13px * var(--f-scale));
  --f-md: calc(15px * var(--f-scale));
  --f-lg: calc(19px * var(--f-scale));
  --f-xl: calc(26px * var(--f-scale));
  --f-2xl: calc(34px * var(--f-scale));

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  /* 数字等宽 —— 尺寸表里 18 和 1218 必须对得齐 */
  --font-num: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Noto Sans Mono", monospace;

  /* ── 间距 ── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  /* ── 圆角 8–10 + 1px 线 ── */
  --r-sm: 6px;  --r: 10px;  --r-lg: 14px;  --r-pill: 999px;

  /* ── 动效 180–240ms ── */
  --t-fast: 120ms;
  --t: 200ms;
  --t-slow: 240ms;
  --ease: cubic-bezier(.2, .7, .3, 1);

  /* ── 手指优先：所有可点的东西不小于这个 ── */
  --tap: 44px;

  /* ── 手机底部安全区（刘海屏 / 手势条）── */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  /**
   * ㊿ 以下这批以前是**写死在 app.css 里**的十字路口色。
   * 亮色版做不出来的根本原因就是它们：顶栏的 #141517e6、药丸的边框 #2c4b44、
   * 角标的底 #191b1ecc …… 散在三十多处，换主题时一处都跟不上。
   * 现在全部收进 token，app.css 里一个色值都不留。
   */
  --bar-bg:      #141517e6;   /* 顶栏（半透明 + 毛玻璃）*/
  --tabbar-bg:   #16181be6;   /* 底部页签 */
  --glass:       #191b1ecc;   /* 浮在三维视口上的角标 / 读数 */
  --glass-thin:  #191b1e99;   /* 更透的那一档：模型上那颗悬浮球（规则 342）—— 底下的模型要看得见 */
  --brand-line:  #2c4b44;     /* 青药丸的边 */
  --warn-line:   #4a3c1c;     /* 琥珀药丸 / 提醒框的边 */
  --danger-line: #3a2a28;     /* 红药丸 / 危险按钮的边 */
  --ink-warn:    #221a05;     /* 琥珀底上的字 */
  --ink-danger:  #2a0d09;     /* 红底上的字 */
  --floor:       #1b1e22;     /* 俯视图的地面 / 读数条的底 */
  --scrim:       #0009;       /* 图上的标签底、阴影 */
  --scrim-soft:  #0006;

  --shadow: 0 8px 28px #0009;
  --tabbar-h: calc(56px + var(--safe-b));
  --topbar-h: 52px;
}

/**
 * ══ 亮色版（设计稿 1b · 8a–8d）══════════════════════════════
 *
 * 为什么要这一套：**工地在太阳底下**。深色界面在直射光下几乎看不见，
 * 而师傅量尺寸就是在那种地方。深色那一套留给车间和晚上。
 *
 * 三种状态都要管（不是两种）：
 *   人选了「浅」            → :root[data-theme="light"]
 *   人选了「深」            → :root[data-theme="dark"]（压住系统的浅）
 *   人没选（默认「跟系统」）→ 只有 prefers-color-scheme 说了算
 * 所以下面既有媒体查询、又有 [data-theme]，媒体查询那一份还要
 * `:not([data-theme="dark"])` 把「人明确选了深色」排除掉，
 * 否则一台设置成浅色的手机上，人选「深」会选不动。
 *
 * ⚠️ 品牌青在亮色下也压暗一档（#3f8e7f → #2a6e60）：51 之后 design.e2e 那把对比度尺子量到
 *    青字压在白 / 淡青药丸底上只有 3.1–3.9:1，青底白字（主按钮）3.9:1 —— 全过不了 4.5:1。
 *    压到 #2a6e60 之后 白底 5.8 / 卡片底 5.2 / 药丸底 4.9 / 青底白字 5.8。工地太阳底下反而更看得清。
 * ⚠️ 琥珀和红在亮色下**要压暗**。设计稿上那两块色板（#e3b341 / #e2695a）
 * 是给深色底用的；同样的色号当文字压在白底上只有 2:1 出头，
 * 过不了自家定的 4.5:1（◇B#18）。色相不变，亮度降一档。
 */
:root[data-theme="light"],
:root:not([data-theme="dark"]) { color-scheme: light; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #ffffff;  --s1: #f3f2ef;  --s2: #eceae5;  --s3: #e3e0d9;
    --line: #d9d6cf;  --line-soft: #e6e3dc;
    --fg: #1b1d20;  --fg2: #5c636a;  --fg3: #8a9099;
    --brand: #2a6e60;  --brand-dim: #74ada1;  --brand-ink: #ffffff;  --brand-wash: #2a6e601a;
    --warn: #8a6206;  --danger: #b4342a;  --ok: #3f8e7f;
    --warn-wash: #e3b34126;  --danger-wash: #b4342a14;
    --bar-bg: #ffffffe6;  --tabbar-bg: #fbfaf8e6;  --glass: #fffffff2;  --glass-thin: #ffffff99;
    --brand-line: #a9cfc5;  --warn-line: #ddc78c;  --danger-line: #e4b8b3;
    --floor: #eceae5;
    --scrim: #00000073;  --scrim-soft: #00000026;
    --shadow: 0 8px 28px #00000024;
  }
}
:root[data-theme="light"] {
  --bg: #ffffff;  --s1: #f3f2ef;  --s2: #eceae5;  --s3: #e3e0d9;
  --line: #d9d6cf;  --line-soft: #e6e3dc;
  --fg: #1b1d20;  --fg2: #5c636a;  --fg3: #8a9099;
  --brand: #2a6e60;  --brand-dim: #74ada1;  --brand-ink: #ffffff;  --brand-wash: #2a6e601a;
  --warn: #8a6206;  --danger: #b4342a;  --ok: #3f8e7f;
  --warn-wash: #e3b34126;  --danger-wash: #b4342a14;
  --bar-bg: #ffffffe6;  --tabbar-bg: #fbfaf8e6;  --glass: #fffffff2;  --glass-thin: #ffffff99;
  --brand-line: #a9cfc5;  --warn-line: #ddc78c;  --danger-line: #e4b8b3;
  --floor: #eceae5;
  --scrim: #00000073;  --scrim-soft: #00000026;
  --shadow: 0 8px 28px #00000024;
}

/** 字号「大」档 —— 所有字一起放大一档，布局不用改（都是 rem/var 算出来的）*/
:root[data-font="big"] { --f-scale: 1.15; }

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t: 0ms; --t-slow: 0ms; }
}