/* ============================================================================
   CrossBite 设计令牌 · 同步副本 —— 勿单独修改
   同步自：kassa/assets/tokens.css（canonical）
   修改流程：先改 canonical，再复制到本文件与另一副本，保持逐字节一致。
   —— 三份内容必须逐字节一致；只在此文件修改，然后同步复制到两个副本。
   pos.html 因单文件+离线要求，将本文件内容内联在其 <style> 顶部（同样注明来源）。
   版本：2026-07-15-1
   ----------------------------------------------------------------------------
   邮件模板无法引用 CSS 变量，内联样式请使用下表对应的字面值：
     accent #5e6ad2 · accent-soft #eceefb · ink #1d1d1f · ink-2 #3a4048
     mut #6d7380 · bg #f2f3f5 · surface #ffffff · line #e2e5ea
     success #1f9d63 · success-soft #e7f6ee · success-ink #176b3a
     danger #d9363c · danger-soft #fdecec · danger-ink #a4262c
     warn #c98a2a · warn-soft #faf1dd · warn-ink #96660f
     header 黑 #0c0d0e · 圆角卡 14px · 按钮 10px
   ============================================================================ */
:root{
  /* ---- 品牌 ---- */
  --cb-accent:#5e6ad2;
  --cb-accent-hover:#4f5ac2;
  --cb-accent-soft:#eceefb;
  --cb-accent-ink:#4550b8;

  /* ---- 墨色与表面（亮色） ---- */
  --cb-ink:#1d1d1f;
  --cb-ink-2:#3a4048;
  --cb-mut:#6d7380;
  --cb-mut-2:#989ea8;
  --cb-bg:#f2f3f5;
  --cb-surface:#ffffff;
  --cb-surface-2:#f5f6f8;
  --cb-line:#e2e5ea;
  --cb-line-2:#edeff2;

  /* ---- 深色铬（侧栏/页头，两主题恒定） ---- */
  --cb-chrome:#0c0d0e;
  --cb-chrome-2:#191a1d;
  --cb-chrome-line:#26282d;
  --cb-chrome-ink:#f7f8f8;
  --cb-chrome-mut:#8a8f98;

  /* ---- 语义状态色（全平台唯一） ---- */
  --cb-success:#1f9d63;  --cb-success-soft:#e7f6ee;  --cb-success-ink:#176b3a;
  --cb-danger:#d9363c;   --cb-danger-soft:#fdecec;   --cb-danger-ink:#a4262c;
  --cb-warn:#c98a2a;     --cb-warn-soft:#faf1dd;     --cb-warn-ink:#96660f;
  --cb-info:#3068d6;     --cb-info-soft:#eaf1ff;     --cb-info-ink:#2b62d6;
  --cb-neutral-soft:#eef0f3;

  /* ---- 控件高度（唯一允许的交互高度阶梯；触控最小 44px） ---- */
  --cb-ctl-sm:36px;   /* 仅桌面紧凑控件 */
  --cb-ctl:44px;      /* 默认控件 / 触控下限 */
  --cb-ctl-lg:52px;   /* 显著动作 */
  --cb-ctl-xl:60px;   /* 结账级关键动作 */

  /* ---- 圆角（四档，禁用其他值） ---- */
  --cb-r-sm:8px;
  --cb-r:10px;
  --cb-r-lg:14px;
  --cb-r-xl:18px;

  /* ---- 阴影（三档） ---- */
  --cb-shadow-sm:0 1px 2px rgba(20,30,45,.05);
  --cb-shadow:0 1px 2px rgba(20,30,45,.05),0 2px 8px rgba(20,30,45,.05);
  --cb-shadow-lg:0 8px 30px rgba(20,30,45,.16);

  /* ---- 焦点环（focus-visible 统一使用） ---- */
  --cb-focus-ring:0 0 0 2px var(--cb-bg),0 0 0 4px var(--cb-accent);

  /* ---- 字体 ---- */
  --cb-font:-apple-system,"SF Pro Text",Inter,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  --cb-fs-xs:12px; --cb-fs-sm:13px; --cb-fs:14px; --cb-fs-md:16px;
  --cb-fs-lg:18px; --cb-fs-xl:21px; --cb-fs-2xl:25px; --cb-fs-3xl:32px;

  /* ---- 间距（4 基数） ---- */
  --cb-sp-1:4px; --cb-sp-2:8px; --cb-sp-3:12px; --cb-sp-4:16px;
  --cb-sp-5:20px; --cb-sp-6:24px; --cb-sp-8:32px; --cb-sp-11:44px;

  /* ---- 遮罩 / toast ---- */
  --cb-mask:rgba(15,18,24,.45);
  --cb-toast-bg:#1d1d1f; --cb-toast-ink:#ffffff;
}

/* 深色主题（POS 使用 body.dark 切换；语义名不变，值重映射） */
body.dark{
  --cb-ink:#f7f8f8; --cb-ink-2:#d0d6e0; --cb-mut:#8a8f98; --cb-mut-2:#62666d;
  --cb-bg:#08090a; --cb-surface:#101113; --cb-surface-2:#17181b;
  --cb-line:#26282d; --cb-line-2:#1c1d20;
  --cb-accent-hover:#828fff; --cb-accent-soft:rgba(94,106,210,.18); --cb-accent-ink:#aab3ff;
  --cb-success:#2fbf71; --cb-success-soft:rgba(47,191,113,.14); --cb-success-ink:#7fe0b0;
  --cb-danger:#e5484d;  --cb-danger-soft:rgba(229,72,77,.14);  --cb-danger-ink:#ff9ea1;
  --cb-warn:#e2a33c;    --cb-warn-soft:rgba(226,163,60,.14);   --cb-warn-ink:#eec272;
  --cb-info:#4c8dff;    --cb-info-soft:rgba(76,141,255,.14);   --cb-info-ink:#8ab4ff;
  --cb-neutral-soft:rgba(255,255,255,.09);
  --cb-shadow-sm:none; --cb-shadow:none; --cb-shadow-lg:0 8px 30px rgba(0,0,0,.5);
  --cb-mask:rgba(0,0,0,.62);
  --cb-toast-bg:#f7f8f8; --cb-toast-ink:#0c0d0e;
}

/* ---- 全局基础（引用方可选，不强制） ---- */
.cb-focus, :where(button,a,input,select,textarea,[tabindex]):focus-visible{
  outline:none; box-shadow:var(--cb-focus-ring);
}
