/* 设计令牌：纸白 + 墨色 + 发丝线。公开站点与管理后台共用（后台通过 /static/tokens.css 引用）。
 * 规则：
 *  1. 面板、标签、表格一律方角；只有按钮与输入框使用 4px 圆角。
 *  2. 信号橙只作小面积填充（标记、峰值、进度），不作文字色（对比度不足）。
 *  3. 层级靠字号与字体（Sans / Mono）表达，标题字重统一 400。 */

@font-face {
  font-family: "Geist";
  src: url("/static/fonts/geist-sans-1.3.1.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/static/fonts/geist-mono-1.3.1.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* 表面与文字 */
  --paper: #f7f5f4;        /* 页面底色 */
  --panel: #fafafa;        /* 面板底色 */
  --ink: #020202;          /* 主文字、实心按钮 */
  --ink-muted: #6b6864;    /* 次要文字，对纸白底约 5.1:1 */
  --ink-faint: #8f8b88;    /* 占位、禁用；不用于正文 */
  --on-ink: #fafafa;       /* 实心墨色上的文字 */

  /* 线条 */
  --hairline: #8f8b88;     /* 面板、按钮、输入框边框 */
  --rule: #d6d2cf;         /* 弱分隔：表格行、章节线 */

  /* 强调与语义 */
  --tint: #d9e4ee;         /* 高亮列、选中行、当前项 */
  --signal: #f26a2e;       /* 信号橙：仅填充 */
  --signal-line: #d9551a;
  --signal-tint: #f1e2c3;
  --signal-ink: #4a2e00;
  --positive: #2f6b4f;
  --positive-tint: #dcebe2;
  --danger: #b3261e;
  --danger-tint: #f6dedb;
  --warn-tint: #f1e2c3;

  /* 字体 */
  --font-sans: "Geist", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, "PingFang SC", "Microsoft YaHei", monospace;

  /* 字号 */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 24px;
  --fs-3xl: 30px;
  --fs-4xl: 40px;
  --fs-5xl: 48px;

  /* 字距：中文标题不宜过紧 */
  --track-display: -0.04em;
  --track-head: -0.025em;
  --track-body: -0.011em;
  --track-label: 0.02em;

  /* 间距（4px 基准） */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  --container: 1216px;
  --gutter: 24px;
  --header-h: 64px;
  --r-control: 4px;

  --shadow-pop: 0 8px 24px rgb(0 0 0 / 0.10);
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur: 140ms;
}

[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0d0c0b;
  --panel: #141312;
  --ink: #f4f2f0;
  --ink-muted: #a8a49f;
  --ink-faint: #6f6b67;
  --on-ink: #0d0c0b;
  --hairline: #4a4642;
  --rule: #2b2825;
  --tint: #1b2733;
  --signal: #f26a2e;
  --signal-line: #f26a2e;
  --signal-tint: #3a2410;
  --signal-ink: #f1e2c3;
  --positive: #6fbf95;
  --positive-tint: #15291f;
  --danger: #ff8a80;
  --danger-tint: #3a1714;
  --warn-tint: #3a2410;
  --shadow-pop: 0 8px 24px rgb(0 0 0 / 0.5);
}

@media (max-width: 640px) {
  :root { --gutter: 16px; --header-h: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 1ms; }
}