/* ============================================================
   tokens.css — 设计令牌（黑白灰账簿主题）
   ============================================================ */
:root {
  /* ---- 灰阶：唯一装饰色系 ---- */
  --c-bg: #f4f4f5;
  --c-bg-deep: #ececee;
  --c-surface: #ffffff;
  --c-surface-2: #fafafa;
  --c-surface-3: #f1f1f3;
  --c-line: #e4e4e7;
  --c-line-2: #d4d4d8;
  --c-text: #0a0a0a;
  --c-text-2: #52525b;
  --c-text-3: #a1a1aa;
  --c-text-4: #c4c4c9;

  /* ---- 强调色 = 黑 ---- */
  --c-ink: #0a0a0a;
  --c-ink-hover: #27272a;
  --c-ink-active: #3f3f46;
  --c-ink-soft: rgba(24, 24, 27, 0.06);
  --c-ink-soft-2: rgba(24, 24, 27, 0.1);
  --c-on-ink: #ffffff;

  /* ---- 语义功能色：仅表达状态 ---- */
  --c-pos: #2e7d5b;
  --c-pos-soft: rgba(46, 125, 91, 0.1);
  --c-neg: #c0553f;
  --c-neg-soft: rgba(192, 85, 63, 0.1);
  --c-warn: #c58a2e;
  --c-warn-soft: rgba(197, 138, 46, 0.12);
  --c-info: #3e6b8a;
  --c-info-soft: rgba(62, 107, 138, 0.1);

  /* ---- 字体 ---- */
  --font: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", -apple-system,
    BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-num: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo,
    Consolas, monospace;

  --fs-display: 30px;
  --fs-h1: 22px;
  --fs-h2: 16px;
  --fs-body: 14px;
  --fs-sm: 13px;
  --fs-xs: 12px;
  --fs-2xs: 11px;

  --lh-tight: 1.2;
  --lh-body: 1.6;

  /* ---- 圆角 ---- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ---- 阴影 ---- */
  --sh-1: 0 1px 2px rgba(10, 10, 10, 0.04);
  --sh-2: 0 4px 16px rgba(10, 10, 10, 0.06), 0 1px 2px rgba(10, 10, 10, 0.04);
  --sh-3: 0 16px 48px rgba(10, 10, 10, 0.12), 0 2px 8px rgba(10, 10, 10, 0.06);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ---- 间距 ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* ---- 尺寸 ---- */
  --sidebar-w: 232px;
  --topbar-h: 68px;
  --tabbar-h: 60px;
  --content-max: 1180px;
  --touch: 44px;

  /* ---- 层级 ---- */
  --z-topbar: 30;
  --z-tabbar: 40;
  --z-drawer: 60;
  --z-modal: 70;
  --z-toast: 80;
  --z-login: 90;

  /* ---- 动效 ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 300ms;

  /* ---- 图表 ---- */
  --chart-main: #0a0a0a;
  --chart-mid: #52525b;
  --chart-soft: #d4d4d8;
  --chart-track: #eeeef0;
}

/* 图标统一基线 */
iconify-icon {
  display: inline-block;
  vertical-align: -0.15em;
  flex: none;
  color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
  }
}
