/* ==========================================================================
   tokens.css — 全站设计令牌（Design Tokens）
   视觉语言：登记簿式秩序感（ledger order）
   - 克制的中性灰底 + 纯白纸面 + 1px 细线
   - 强调色仅用于「当前位置 / 主操作 / 输入焦点」三处
   - 圆角、间距、控件高度全部走变量，改一处即改全站
   加载顺序：tokens.css → 页面 <style> → mobile.css → desktop.css
   ========================================================================== */

:root {
  /* ---------- 表面 ---------- */
  --canvas: #f7f8fa;          /* 页面底 */
  --paper: #ffffff;           /* 卡片 / 表格 / 输入框 */
  --sunken: #f9fafb;          /* 表头 / 沉底块 */
  --wash: #f3f4f6;            /* 统计块 / 次要块 */

  /* ---------- 线条 ---------- */
  --line: #e5e7eb;            /* 默认 1px 分隔 */
  --line-soft: #eef1f4;       /* 行内分隔（更淡） */
  --line-strong: #d1d5db;     /* 输入框/按钮描边 */

  /* ---------- 文字 ---------- */
  --ink: #111827;             /* 主文 */
  --ink-2: #374151;           /* 次文 */
  --muted: #6b7280;           /* 标签 / 说明 */
  --faint: #9ca3af;           /* 占位 / 空态 */
  --ink-invert: #ffffff;

  /* ---------- 侧栏（深色，去蓝） ---------- */
  --rail: #141b24;
  --rail-ink: #c9d1dc;
  --rail-ink-dim: #8b96a5;
  --rail-hover: rgba(255, 255, 255, 0.06);
  --rail-group: rgba(255, 255, 255, 0.62);   /* 分组标题：0.42 在 rail 上只有 4.05:1，0.62 约 6.6:1 */
  --rail-line: rgba(255, 255, 255, 0.10);   /* 深色面上的 1px 分隔 */
  --rail-edge: rgba(255, 255, 255, 0.12);   /* 深色墙与纸面的交界高光 */

  /* ---------- 深色面（登录页侧栏 / 品牌块）----------
     取公司官网 warpool.hk 的深海军蓝，与侧栏的墨黑拉开层次：
     侧栏是「工作区」，深色面是「品牌区」，两者不该是同一种黑。 */
  --deep: #102d4b;
  --deep-2: #0a1f34;           /* 更深一档，做渐变收口 */
  --deep-3: #1c4166;           /* 深面上的浮起块 */
  --deep-ink: #e8eef6;         /* 深面主文 */
  --deep-ink-2: #9fb4cc;       /* 深面次文 */
  --deep-ink-3: #8ba2bb;       /* 深面弱文：在 --deep 上 5.3:1（原来的 #63788f 只有 3.08:1，注释写错了） */
  --deep-line: rgba(255, 255, 255, 0.14);
  --deep-accent: #7fb2e5;      /* 深面上的亮蓝，做点缀 */
  --deep-glow: rgba(127, 178, 229, 0.16);

  /* ---------- 强调色（钢笔墨青，实色无渐变） ---------- */
  --brand: #0e6b73;
  --brand-hover: #0c5c63;
  --brand-soft: #e6f1f2;      /* 淡底 */
  --brand-line: #bfd9db;      /* 淡描边 */
  --brand-on-rail: #4fd1c5;   /* 深色底上的强调（仅登录页侧栏用） */
  --brand-on-deep: #5ec8c0;   /* 深海军蓝面上的强调，比 rail 版略收 */

  /* ---------- 蓝调浅面（借官网的 --grey2 #f2f7fb）----------
     纯灰(neutral gray)与墨青放一起会显脏；带一点蓝的浅面能压住墨青的绿味。 */
  --tint: #f2f7fb;            /* 蓝调浅底：统计块 / 强调段 */
  --tint-line: #dce7f2;       /* 蓝调浅底的描边 */
  --tint-hover: #eaf2f9;

  /* ---------- 品牌渐变 ----------
     只用于「品牌识别物」（登录页标识、空态插画），不进任何控件：
     控件上加渐变会让重量感失真，按钮看上去比实际更重。 */
  --grad-deep: linear-gradient(158deg, var(--deep) 0%, var(--deep-2) 100%);
  --grad-brand: linear-gradient(135deg, var(--brand) 0%, #12908f 100%);

  /* ---------- 状态 ---------- */
  --ok-bg: #ecfdf5;    --ok-fg: #047857;    --ok-line: #a7f3d0;
  --warn-bg: #fffbeb;  --warn-fg: #b45309;  --warn-line: #fde68a;
  --danger-bg: #fef2f2;--danger-fg: #b91c1c;--danger-line: #fecaca;
  --info-bg: #eef2ff;  --info-fg: #4338ca;  --info-line: #c7d2fe;
  --idle-bg: #f3f4f6;  --idle-fg: #4b5563;  --idle-line: #e5e7eb;
  --pill-bg: #eef1f5;  --pill-fg: #4b5563;  --pill-line: #e2e6eb;

  /* ---------- 圆角 ---------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

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

  /* ---------- 控件高度 ---------- */
  --ctl-h: 40px;
  --ctl-h-sm: 32px;
  --ctl-h-xs: 26px;
  /* 顶栏（语言 / 用户 / 退出）占位高度，与 .app-chrome 一致，避免 JS 注入后内容上跳 */
  --app-chrome-h: calc(var(--ctl-h-sm) + 12px);

  /* ---------- 字体 ---------- */
  /* Inter 只覆盖拉丁与数字（见 fonts.css 的 unicode-range），汉字自动回落苹方 */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
  --font-num: "Inter", ui-monospace, "SF Mono", "SFMono-Regular", Menlo, "PingFang SC", monospace;

  /* ---------- 阴影（极轻，只做层级不做氛围） ---------- */
  --shadow-1: 0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow-2: 0 1px 2px rgba(17, 24, 39, 0.04), 0 6px 16px rgba(17, 24, 39, 0.05);
  --shadow-3: 0 20px 48px rgba(17, 24, 39, 0.16);
  --shadow-none: none;

  /* ---------- 动效（全站统一节奏，禁止在页面里另写时长） ---------- */
  --dur: 0.14s;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- 科技感（克制，只用于主按钮 / 聚焦 / 品牌） ---------- */
  --brand-glow: rgba(14, 107, 115, 0.22);
  --focus-ring: rgba(14, 107, 115, 0.22);

  /* ---------- 交互层 ---------- */
  --row-hover: #f6f7f9;              /* 行/项悬停，比 --sunken 再实一点 */
  --scrim: rgba(17, 24, 39, 0.45);   /* 遮罩 */
  --scroll-thumb: #d5dae1;
  --scroll-thumb-hover: #bcc4ce;

  /* ---------- 散件色（原来直接写死的两处，收进令牌） ---------- */
  --ink-3: #334155;                  /* 介于 --ink-2 与 --muted 之间：表头 / 强标签 */
  --faint-2: #94a3b8;                /* 空态图形 / 次要图标的描边色 */
  --placeholder: #8b95a3;            /* 输入框占位文字：3.4:1，比 --faint 的 2.5:1 看得清 */
  --faint-read: #737f8f;             /* 「弱但仍是正文」的下限，约 4.6:1 */

  /* ---------- 字号刻度 ----------
     全站只用这 9 档。汉字比拉丁字需要更大字号，所以下限是 12px，没有 10/11px。
     不再出现 11.5 / 12.5 / 13.5 / 19 / 13.3333 这类"看起来差不多"的档位——
     它们一处一处看都没错，放在一起就会让人说不出哪里不对。 */
  --fs-micro: 12px;    /* 角标、时间、脚注、表头 */
  --fs-sm: 13px;       /* 次要正文、表格单元格、说明 */
  --fs-base: 14px;     /* 正文 */
  --fs-md: 15px;       /* 卡片标题 */
  --fs-lg: 16px;       /* 面板标题 */
  --fs-xl: 20px;       /* 页面标题 */
  --fs-2xl: 24px;      /* 统计大数字 */
  --fs-3xl: 30px;      /* 展示级（登录页标语） */

  /* 行高：正文 1.6，标题 1.35。行高不跟字号走会读起来发闷 */
  --lh-tight: 1.35;
  --lh-base: 1.6;

  /* ---------- 数据可视化（工作台进度 / 迷你柱 / 角标） ---------- */
  --track: #e9edf2;               /* 底槽：比 wash 再冷一点，避免和填充色混 */
  --bar-h: 6px;                   /* 横向进度条厚度 */
  --bar-h-lg: 10px;               /* 强调条厚度 */

  /* ---------- 布局 ---------- */
  --rail-w: 216px;
  --page-pad-x: 32px;

  /* ---------- 版面尺度（表单/正文的阅读宽度上限） ---------- */
  --measure-form: 720px;   /* 表单最长行，超过就读不动 */
  --measure-text: 68ch;    /* 说明文字 */
}

/* --------------------------------------------------------------------------
   Shell critical — 与 module-nav 顶栏配合，首屏即隐藏页头重复控件，避免闪一下
   （页内 .toolbar 仍保留给 JS 委托 #logoutBtn / 语言按钮，不可删 HTML）
   -------------------------------------------------------------------------- */
html.app-shell .header .toolbar {
  display: none !important;
}