/* ==========================================================================
   tokens.css — 设计令牌 v3 "Paper"
   --------------------------------------------------------------------------
   设计原则（决定了这套 UI 长什么样，先读再改）：

   ① **浅色是主角**。底色不是纯白也不是灰蓝，而是一层极浅的暖灰纸感
      （--canvas），面板才是白。这样"卡片浮在纸上"，靠 1px 细线区分层级，
      而不是靠阴影堆叠 —— 阴影一多，页面立刻显廉价。
   ② **只有一个强调色**（--accent），且只出现在四处：当前菜单、主按钮、
      焦点环、选中态。它由用户自定义（见 theme.js），其余全是中性色。
   ③ **字重克制**。标题 600、正文 400、数据 500，不用 700/800 喊话；
      数字一律等宽（tabular-nums），扫一列金额不跳。
   ④ **圆角三档**：控件 8、卡片 12、浮层 16。全站不用第四种圆角。
   ⑤ 深浅色共用同一组语义变量名，主题只换取值，组件一行都不用改。

   旧变量名（--bg-page / --panel / --border / --ink-2 / --brand …）全部保留为
   别名：模块 CSS 里有几百处引用，逐个改名风险远大于收益。
   ========================================================================== */

:root {
  /* ---------- 中性色（浅色主题） ---------- */
  --canvas: #f7f7f8;          /* 页面底：极浅暖灰，不是纯白 */
  --surface: #ffffff;         /* 面板 / 卡片 */
  --surface-2: #f4f4f6;       /* 表头、次级填充 */
  --surface-3: #ececef;       /* hover 深一档 */
  --line: #e8e8ec;            /* 细线（1px，很低对比） */
  --line-strong: #d9d9e0;     /* 输入框 / 需要更清楚的边界 */
  --line-faint: #f0f0f3;      /* 表格行分隔 */

  --ink: #18181b;             /* 主文字 */
  --ink-2: #5d5d67;           /* 次级 */
  --ink-3: #9a9aa5;           /* 弱化 / 占位 */
  --ink-4: #b4b4be;           /* 说明 / 预设提示：只要"看得见有这行字"，不该抢注意力 */
  --ink-inv: #ffffff;

  /* ---------- 强调色（由 theme.js 覆盖） ---------- */
  --accent: #3b5bdb;
  --accent-ink: #2f49b8;      /* 压在白底上的文字版 */
  --accent-fg: #ffffff;       /* 压在强调色上的文字 */

  /* ---------- 语义色 ---------- */
  --ok: #0f7a54;
  --ok-weak: #e7f5ef;
  --warn: #a45b07;
  --warn-weak: #fdf2e3;
  --danger: #c0362c;
  --danger-weak: #fdecea;
  --info: #1a63c9;
  --info-weak: #eaf2ff;

  /* ---------- 域标识（不是主题色，只用于区分财务/售后） ---------- */
  --fi: #3b5bdb;
  --as: #0f8a7e;

  /* ---------- 尺寸 ---------- */
  --rail-w: 228px;
  --rail-w-collapsed: 64px;
  --topbar-h: 56px;
  --content-max: 1480px;

  --r-1: 6px;
  --r-2: 8px;
  --r-3: 12px;                /* 卡片 */
  --r-4: 16px;                /* 浮层 */
  --r-pill: 999px;

  /* ---------- 间距（4px 基线） ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;

  /* ---------- 字号 ---------- */
  --t-2xs: 10.5px;
  --t-xs: 11.5px;
  --t-sm: 12.5px;
  --t-md: 13.5px;
  --t-lg: 15px;
  --t-xl: 19px;
  --t-2xl: 24px;

  /* ---------- 阴影：只给"真的浮起来的东西" ---------- */
  --sh-1: 0 1px 2px rgba(24, 24, 27, 0.05);
  --sh-2: 0 4px 12px -4px rgba(24, 24, 27, 0.1), 0 1px 2px rgba(24, 24, 27, 0.05);
  --sh-3: 0 24px 56px -20px rgba(24, 24, 27, 0.28), 0 2px 6px rgba(24, 24, 27, 0.06);

  /* ---------- 动效 ---------- */
  --ease: cubic-bezier(0.32, 0.72, 0.28, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --d-1: 110ms;
  --d-2: 180ms;
  --d-3: 320ms;

  /* ---------- 字体 ---------- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
    "Noto Sans CJK SC", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Consolas,
    "Liberation Mono", monospace;

  --z-drawer: 40;
  --z-modal: 60;
  --z-toast: 80;
  --z-palette: 90;

  /* ================= 旧名别名（不要在新代码里用） ================= */
  --bg-page: var(--canvas);
  --bg-elev: var(--surface);
  --bg-card: var(--surface);
  --bg-subtle: var(--surface-2);
  --bg-hover: var(--surface-3);
  --bg-glass: color-mix(in srgb, var(--surface) 78%, transparent);

  --line-1: var(--line);
  --line-2: var(--line-faint);

  --text-1: var(--ink);
  --text-2: var(--ink-2);
  --text-3: var(--ink-3);
  --text-inv: var(--ink-inv);

  --ok-bg: var(--ok-weak);
  --warn-bg: var(--warn-weak);
  --danger-bg: var(--danger-weak);
  --info-bg: var(--info-weak);
  --neutral: var(--ink-2);
  --neutral-bg: var(--surface-2);

  --fi-weak: color-mix(in srgb, var(--fi) 10%, var(--surface));
  --fi-line: color-mix(in srgb, var(--fi) 22%, var(--surface));
  --as-weak: color-mix(in srgb, var(--as) 10%, var(--surface));
  --as-line: color-mix(in srgb, var(--as) 22%, var(--surface));

  --brand: var(--accent);
  --brand-2: var(--accent);
  --brand-weak: color-mix(in srgb, var(--accent) 9%, var(--surface));
  --brand-line: color-mix(in srgb, var(--accent) 24%, var(--surface));
  --grad-brand: var(--accent);   /* 旧名：以前是渐变，现在统一成纯色 */
  --brand-ink: var(--accent-ink);

  --r-sm: var(--r-1);
  --r-md: var(--r-2);
  --r-lg: var(--r-3);
  --r-xl: var(--r-4);

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  --fs-xs: var(--t-xs);
  --fs-sm: var(--t-sm);
  --fs-base: var(--t-md);
  --fs-md: 14px;
  --fs-lg: var(--t-lg);
  --fs-xl: var(--t-xl);
  --fs-2xl: var(--t-2xl);

  --shadow-xs: var(--sh-1);
  --shadow-sm: var(--sh-1);
  --shadow-md: var(--sh-2);
  --shadow-lg: var(--sh-3);

  --font-sans: var(--font);
  --font-mono: var(--mono);

  --sidebar-w: var(--rail-w);
  --sidebar-w-collapsed: var(--rail-w-collapsed);
}

/* ==========================================================================
   深色主题
   --------------------------------------------------------------------------
   不是把浅色反过来（纯黑底 + 纯白字最刺眼），而是"夜里的同一张纸"：
   底色 #0e0e11、面板 #16161a，层次仍靠 1px 细线，强调色亮度略降。
   ========================================================================== */
html[data-theme="dark"] {
  --canvas: #0c0c0f;
  --surface: #151519;
  --surface-2: #1c1c21;
  --surface-3: #24242b;
  --line: #26262d;
  --line-strong: #34343d;
  --line-faint: #1e1e24;

  --ink: #ededf0;
  --ink-2: #a2a2ad;
  --ink-3: #6e6e7a;
  --ink-4: #575761;
  --ink-inv: #0c0c0f;

  /* 深色下强调色压暗一档，否则大面积发光刺眼 */
  --accent-ink: color-mix(in srgb, var(--accent) 72%, #ffffff);
  --accent-fg: #0c0c0f;

  --ok: #3fbf8f;
  --ok-weak: color-mix(in srgb, #3fbf8f 14%, var(--surface));
  --warn: #e0a458;
  --warn-weak: color-mix(in srgb, #e0a458 14%, var(--surface));
  --danger: #f0776c;
  --danger-weak: color-mix(in srgb, #f0776c 14%, var(--surface));
  --info: #6ba6f5;
  --info-weak: color-mix(in srgb, #6ba6f5 14%, var(--surface));

  --fi: #7f95ff;
  --as: #3fc9b8;

  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --sh-2: 0 6px 18px -6px rgba(0, 0, 0, 0.7);
  --sh-3: 0 28px 64px -24px rgba(0, 0, 0, 0.85);
}

/* 主题切换时给一个短过渡：只有背景/文字/描边跟着渐变，布局不动 */
html.theme-anim,
html.theme-anim body,
html.theme-anim .yi-sidebar,
html.theme-anim .yi-topbar,
html.theme-anim .card,
html.theme-anim .btn {
  transition: background-color var(--d-2) var(--ease),
    border-color var(--d-2) var(--ease), color var(--d-2) var(--ease);
}

/* 系统「减少动效」：一律关掉动画与过渡 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}