/* ══════════════════════════════════════════════════════════════════════════
   tokens.css — 设计令牌（方向 B · 现代工具风）
   ──────────────────────────────────────────────────────────────────────────
   职责：只放令牌与全局基线。不含任何组件样式（组件在 components.css，
        页面专属在 app.css）。

   加载顺序必须是：bootstrap.min.css → tokens.css → components.css → app.css
   原因：Bootstrap 5.3 的 [data-bs-theme=dark] 块（特异性 0,1,1）会覆盖 :root
        （0,1,0）里的 --bs-* 变量。所以本文件里所有 --bs-* 映射都同时写在
        :root 和 html[data-bs-theme="dark"] 两个选择器上，且整份文件排在
        bootstrap.min.css 之后 —— 这样浅/深两套都能压住框架默认值。

   为什么映射 --bs-* 而不是重写每个组件：
        11 个页面全部在用 Bootstrap 的类名（card / table / badge bg-* / btn-*
        / form-control / alert / dropdown / nav-tabs / progress …）。把框架变量
        接管掉，页面不用改一行就能整体换皮；剩下的观感差异用 components.css
        覆盖，页面结构改动留到逐页改造阶段。
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 浅色令牌（默认）────────────────────────────────────────────────────── */
:root {
  color-scheme: light;

  /* 基底 */
  --fz-bg:          #FAF9F7;   /* 页面底：暖灰纸面，不用纯白 */
  --fz-surface:     #FFFFFF;   /* 卡片/浮层 */
  --fz-sunken:      #F3F2EF;   /* 凹陷：表头、代码、悬停 */
  --fz-line:        #E7E5E4;   /* 发丝线 */
  --fz-line-2:      #D6D3D1;   /* 控件描边（比发丝线重一档）*/
  --fz-fg:          #1C1917;
  --fz-fg-rgb:      28,25,23;
  /* 三档灰阶，分工明确：
       muted = 次级正文（说明、标签）        —— 对比度 ≥ 5.2:1
       dim   = 三级正文（脚注、助记、时间）  —— 对比度 ≥ 4.6:1，仍然过 AA
       faint = 非文字（占位符底、装饰点、禁用）—— 不承担信息，不参与对比度要求 */
  --fz-muted:       #6B6560;
  --fz-dim:         #7C756E;
  --fz-faint:       #A8A29E;

  /* 强调（暖赭）*/
  --fz-accent:      #C2410C;
  --fz-accent-fg:   #FFFFFF;
  --fz-accent-soft: #FDF0E8;
  --fz-accent-rgb:  194,65,12;

  /* 语义 */
  --fz-ok:          #15803D;  --fz-ok-soft:     #EAF6EE;  --fz-ok-rgb:     21,128,61;
  --fz-warn:        #B45309;  --fz-warn-soft:   #FDF3E4;  --fz-warn-rgb:   180,83,9;
  --fz-danger:      #B91C1C;  --fz-danger-soft: #FDECEC;  --fz-danger-rgb: 185,28,28;
  --fz-info:        #1D4ED8;  --fz-info-soft:   #EAF0FE;  --fz-info-rgb:   29,78,216;

  /* 形状：同心圆角（外 = 内 + padding）*/
  --fz-r:      10px;   /* 卡片 */
  --fz-r-sm:    6px;   /* 内层元素 / 标签 */
  --fz-r-lg:   14px;   /* 大浮层 / 登录卡 */
  --fz-r-pill: 100px;

  /* 阴影：三层叠加，模拟真实光照，单层硬阴影会显得假 */
  --fz-sh-1: 0 1px 2px rgba(28,25,23,.05), 0 1px 3px rgba(28,25,23,.04);
  --fz-sh-2: 0 1px 2px rgba(28,25,23,.04), 0 4px 12px rgba(28,25,23,.06);
  --fz-sh-pop: 0 12px 32px rgba(28,25,23,.14);
  --fz-ring: rgba(194,65,12,.28);

  /* 间距：4 / 8 栅格 */
  --fz-s1: 4px;  --fz-s2: 8px;  --fz-s3: 12px; --fz-s4: 16px;
  --fz-s5: 24px; --fz-s6: 32px; --fz-s7: 48px;

  /* 字号阶梯（不连续自创；12 以下只留给标签/角标，不进正文）*/
  --fz-fs-micro: 11.5px;   /* 角标、行内小字 */
  --fz-fs-sm:    12.5px;   /* 说明、表头 */
  --fz-fs-table: 13.5px;   /* 表格正文 */
  --fz-fs-base:  15px;     /* 页面正文 */
  --fz-fs-md:    16px;     /* 强调正文 */
  --fz-fs-lg:    18px;     /* 小标题 */
  --fz-fs-h:     24px;     /* 页面标题 */
  --fz-fs-stat:  30px;     /* 统计数字 */

  /* 动效：内置 ease/ease-in-out 太软，自定义曲线 */
  --fz-ease:      cubic-bezier(.23, 1, .32, 1);
  --fz-ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --fz-dur-1: 120ms;   /* 高频：hover / 按下 */
  --fz-dur-2: 180ms;   /* 常规：面板、浮层 */
  --fz-dur-3: 260ms;   /* 低频：入场 */

  /* 层级：不允许出现自创 z-index */
  --fz-z-sticky: 15;
  --fz-z-nav:    20;
  --fz-z-overlay:100;
  --fz-z-modal:  110;
  --fz-z-toast:  120;

  /* 尺寸 */
  --fz-nav-h: 60px;
  --fz-row-h: 40px;
  --fz-hit:   44px;    /* 最小点击区 */
  --fz-w-page: 1460px;

  /* 字体：零 CDN（内网可跑）。中文走系统 UI 字体栈；
     数字/ID/日志走等宽。要上自托管字体的路径见 docs/UI-DECISIONS.md */
  --fz-font: "Segoe UI Variable Text", "Segoe UI", "PingFang SC", "Hiragino Sans GB",
             "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  --fz-font-mono: "Cascadia Mono", "Consolas", "SFMono-Regular", ui-monospace, monospace;
}

/* ── 深色令牌：不是"反色"，是去饱和提亮的一套独立取值 ──────────────────── */
html[data-bs-theme="dark"] {
  color-scheme: dark;

  --fz-bg:          #1C1917;   /* 不纯黑 */
  --fz-surface:     #232020;
  --fz-sunken:      #2A2726;
  --fz-line:        #383231;
  --fz-line-2:      #4A4240;
  --fz-fg:          #F5F5F4;   /* 不纯白 */
  --fz-fg-rgb:      245,245,244;
  --fz-muted:       #A8A29E;
  --fz-dim:         #8F8880;
  --fz-faint:       #6B6560;

  --fz-accent:      #F0864E;
  --fz-accent-fg:   #2A1305;
  --fz-accent-soft: rgba(240,134,78,.14);
  --fz-accent-rgb:  240,134,78;

  --fz-ok:          #4ADE80;  --fz-ok-soft:     rgba(74,222,128,.12);  --fz-ok-rgb:     74,222,128;
  --fz-warn:        #FBBF24;  --fz-warn-soft:   rgba(251,191,36,.12);  --fz-warn-rgb:   251,191,36;
  --fz-danger:      #F87171;  --fz-danger-soft: rgba(248,113,113,.12); --fz-danger-rgb: 248,113,113;
  --fz-info:        #60A5FA;  --fz-info-soft:   rgba(96,165,250,.12);  --fz-info-rgb:   96,165,250;

  --fz-sh-1: 0 1px 2px rgba(0,0,0,.30);
  --fz-sh-2: 0 4px 14px rgba(0,0,0,.28);
  --fz-sh-pop: 0 16px 40px rgba(0,0,0,.50);
  --fz-ring: rgba(240,134,78,.30);
}

/* ══════════════════════════════════════════════════════════════════════════
   Bootstrap 变量接管
   ══════════════════════════════════════════════════════════════════════════ */
:root,
html[data-bs-theme="dark"] {
  /* 基础语义 */
  --bs-body-bg: var(--fz-bg);
  --bs-body-color: var(--fz-fg);
  --bs-emphasis-color: var(--fz-fg);
  --bs-secondary-color: var(--fz-muted);      /* .text-muted 取这个 */
  --bs-tertiary-color: var(--fz-dim);
  --bs-secondary-bg: var(--fz-sunken);
  --bs-tertiary-bg: var(--fz-sunken);
  --bs-body-font-family: var(--fz-font);
  --bs-body-font-size: var(--fz-fs-base);
  --bs-body-line-height: 1.6;
  --bs-heading-color: var(--fz-fg);

  /* 边框与圆角 */
  --bs-border-color: var(--fz-line);
  --bs-border-color-translucent: var(--fz-line);
  --bs-border-radius: var(--fz-r);
  --bs-border-radius-sm: var(--fz-r-sm);
  --bs-border-radius-lg: var(--fz-r-lg);
  --bs-border-radius-xl: var(--fz-r-lg);
  --bs-border-radius-xxl: var(--fz-r-lg);

  /* 语义色（rgb 三元组是 Bootstrap 的约定：rgba(var(--bs-x-rgb), opacity)）*/
  --bs-primary: var(--fz-accent);
  --bs-primary-rgb: var(--fz-accent-rgb);
  --bs-success: var(--fz-ok);       --bs-success-rgb: var(--fz-ok-rgb);
  --bs-warning: var(--fz-warn);     --bs-warning-rgb: var(--fz-warn-rgb);
  --bs-danger: var(--fz-danger);    --bs-danger-rgb: var(--fz-danger-rgb);
  --bs-info: var(--fz-info);        --bs-info-rgb: var(--fz-info-rgb);
  --bs-secondary: var(--fz-muted);  --bs-secondary-rgb: 120,113,108;
  --bs-light: var(--fz-sunken);     --bs-light-rgb: 243,242,239;
  --bs-dark: var(--fz-fg);          --bs-dark-rgb: var(--fz-fg-rgb);
  --bs-primary-text-emphasis: var(--fz-accent);
  --bs-success-text-emphasis: var(--fz-ok);
  --bs-warning-text-emphasis: var(--fz-warn);
  --bs-danger-text-emphasis: var(--fz-danger);
  --bs-info-text-emphasis: var(--fz-info);
  --bs-primary-bg-subtle: var(--fz-accent-soft);
  --bs-success-bg-subtle: var(--fz-ok-soft);
  --bs-warning-bg-subtle: var(--fz-warn-soft);
  --bs-danger-bg-subtle: var(--fz-danger-soft);
  --bs-info-bg-subtle: var(--fz-info-soft);
  --bs-primary-border-subtle: color-mix(in srgb, var(--fz-accent) 30%, transparent);
  --bs-success-border-subtle: color-mix(in srgb, var(--fz-ok) 30%, transparent);
  --bs-warning-border-subtle: color-mix(in srgb, var(--fz-warn) 30%, transparent);
  --bs-danger-border-subtle: color-mix(in srgb, var(--fz-danger) 30%, transparent);
  --bs-info-border-subtle: color-mix(in srgb, var(--fz-info) 30%, transparent);

  /* 链接 */
  --bs-link-color: var(--fz-accent);
  --bs-link-color-rgb: var(--fz-accent-rgb);
  --bs-link-hover-color: color-mix(in srgb, var(--fz-accent) 82%, var(--fz-fg));

  /* 焦点环：键盘可见，鼠标点击不显示（靠 :focus-visible）*/
  --bs-focus-ring-color: var(--fz-ring);
  --bs-focus-ring-width: 3px;

  /* 卡片 */
  --bs-card-bg: var(--fz-surface);
  --bs-card-border-color: var(--fz-line);
  --bs-card-border-radius: var(--fz-r);
  --bs-card-inner-border-radius: var(--fz-r-sm);
  --bs-card-cap-bg: var(--fz-surface);
  --bs-card-cap-padding-y: 14px;
  --bs-card-cap-padding-x: 18px;
  --bs-card-spacer-y: 18px;
  --bs-card-spacer-x: 18px;

  /* 表格 */
  --bs-table-color: var(--fz-fg);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--fz-line);
  --bs-table-hover-bg: var(--fz-sunken);
  --bs-table-hover-color: var(--fz-fg);
  --bs-table-striped-bg: var(--fz-sunken);

  /* 下拉菜单 */
  --bs-dropdown-bg: var(--fz-surface);
  --bs-dropdown-border-color: var(--fz-line);
  --bs-dropdown-border-radius: var(--fz-r);
  --bs-dropdown-link-hover-bg: var(--fz-sunken);
  --bs-dropdown-link-active-bg: var(--fz-accent-soft);
  --bs-dropdown-link-active-color: var(--fz-accent);
  --bs-dropdown-box-shadow: var(--fz-sh-pop);

  /* 其他浮层/进度 */
  --bs-modal-bg: var(--fz-surface);
  --bs-modal-border-radius: var(--fz-r-lg);
  --bs-offcanvas-bg: var(--fz-surface);
  --bs-progress-bg: var(--fz-sunken);
  --bs-progress-bar-bg: var(--fz-accent);
  --bs-progress-border-radius: var(--fz-r-pill);
  --bs-code-color: var(--fz-accent);
  --bs-highlight-bg: var(--fz-warn-soft);
  --bs-pagination-active-bg: var(--fz-accent);
  --bs-pagination-active-border-color: var(--fz-accent);
  --bs-pagination-color: var(--fz-muted);
  --bs-pagination-hover-bg: var(--fz-sunken);
  --bs-pagination-border-color: var(--fz-line);
  --bs-list-group-border-color: var(--fz-line);
  --bs-list-group-bg: transparent;
  --bs-breadcrumb-divider-color: var(--fz-dim);
  --bs-nav-tabs-border-color: var(--fz-line);
}

/* ══════════════════════════════════════════════════════════════════════════
   全局基线
   ══════════════════════════════════════════════════════════════════════════ */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

body {
  background: var(--fz-bg);
  color: var(--fz-fg);
  font-family: var(--fz-font);
  font-size: var(--fz-fs-base);
  line-height: 1.6;
  /* 数字等宽：表格列、倒计时、统计数字不会因为位数变化而抖动 */
  font-variant-numeric: tabular-nums;
}

/* 标题两端平衡；正文避免孤行 */
h1, h2, h3, h4, h5, h6 { text-wrap: balance; letter-spacing: -.01em; }
p, li, dd, blockquote, .form-text { text-wrap: pretty; }

h1 { font-size: var(--fz-fs-h); font-weight: 680; }
h2 { font-size: var(--fz-fs-lg); font-weight: 660; }
h3 { font-size: var(--fz-fs-md); font-weight: 650; }
h4 { font-size: var(--fz-fs-lg); font-weight: 660; }
h5, h6 { font-size: var(--fz-fs-base); font-weight: 650; }

/* 焦点：只在键盘导航时显示环，且永不 outline:none 而不给替代 */
:focus-visible {
  outline: 2px solid var(--fz-accent);
  outline-offset: 2px;
  border-radius: var(--fz-r-sm);
}
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible { outline-offset: 1px; }

::selection { background: var(--fz-accent-soft); color: var(--fz-accent); }

/* 滚动条（WebKit）：默认那根在暖色底上很脏 */
* { scrollbar-width: thin; scrollbar-color: var(--fz-line-2) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--fz-line-2); border-radius: 100px; border: 3px solid var(--fz-bg); }
*::-webkit-scrollbar-thumb:hover { background: var(--fz-dim); }

hr { border-color: var(--fz-line); opacity: 1; }
code, kbd, pre, .font-monospace { font-family: var(--fz-font-mono); }
code { color: var(--fz-accent); background: var(--fz-sunken); padding: 1px 5px; border-radius: 5px; font-size: .9em; }
kbd {
  font-family: var(--fz-font-mono); font-size: var(--fz-fs-micro); color: var(--fz-muted);
  background: var(--fz-surface); border: 1px solid var(--fz-line); border-bottom-width: 2px;
  border-radius: 5px; padding: 1px 5px;
}

/* 无障碍：跳到主内容（第一个可聚焦元素，平时不可见）*/
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: var(--fz-z-toast);
  background: var(--fz-accent); color: var(--fz-accent-fg);
  padding: 10px 16px; border-radius: 0 0 var(--fz-r-sm) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* 只为读屏器存在 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* 工具类 */
.tnum { font-variant-numeric: tabular-nums; }
.icon { width: 1em; height: 1em; flex: none; vertical-align: -.125em; }
.icon-14 { width: 14px; height: 14px; }
.icon-16 { width: 16px; height: 16px; }
.icon-18 { width: 18px; height: 18px; }
.t-xs { font-size: var(--fz-fs-sm); }
.t-micro { font-size: var(--fz-fs-micro); }
.truncate { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
.mono { font-family: var(--fz-font-mono); font-size: .92em; }

/* 页面容器：比原来 px-4 更宽，但左右留白随视口收敛 */
.app-main { max-width: var(--fz-w-page); margin: 0 auto; padding: var(--fz-s5) var(--fz-s5) 0; }
@media (max-width: 767.98px) { .app-main { padding: var(--fz-s4) var(--fz-s3) 0; } }

/* 触摸设备不做 hover 位移（否则会卡在悬停态） */
@media (hover: none) { .fz-hoverable:hover { transform: none !important; box-shadow: var(--fz-sh-1) !important; } }

/* 降级动效：减少而不是消灭颜色/透明度的反馈 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 打印：日志/审计导出前预览 */
@media print {
  .navbar, .alert-banner, .fz-toasts, .bulkbar, .no-print, .fz-palette-scrim { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; border-color: #ccc; break-inside: avoid; }
  a[href]::after { content: ""; }
}