/* ==========================================================================
   tokens.css — 设计变量（唯一的视觉真源）
   风格：黑白漫画线稿 / 工业图纸 / 油印小报
   - 纸 = 底；墨 = 结构与文字；只有三种颜色被允许出现
   - 所有圆角为 0；所有阴影都是硬投影（offset，不模糊）
   ========================================================================== */

:root {
  /* 纸与墨 */
  --paper: #f4f1e9;
  --paper-2: #eae6da;
  --paper-3: #ded9ca;
  --ink: #14130f;
  --ink-2: #2c2a24;
  --ink-3: #55524a;
  --ink-4: #8b877c;
  /* 墨色阶的第五档：深底上的浅色填充（进度条槽、反白文字）。
     之前各处的 rgba(255,255,255,.18) 就是在替代它 —— 补进令牌表，
     免得每个新组件再发明一次魔法色。 */
  --ink-5: #d8d4c8;

  /* 三色纪律：只有这三种颜色允许出现在画面里 */
  --warn: #e8503c;      /* 危险 / 警示 */
  --gold: #e8b33a;      /* 金 / 宝 */
  --cyan: #35e8c8;      /* 水 / 晶 */

  /* 语义 */
  --ok: #3fb37a;
  --danger: var(--warn);

  /* 排版 */
  --font-display: "Impact", "Haettenschweiler", "Arial Black", "Noto Sans SC", system-ui, sans-serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  --fs-1: clamp(28px, 4.2vw, 56px);
  --fs-2: clamp(20px, 2.6vw, 30px);
  --fs-3: 17px;
  --fs-4: 14px;
  --fs-5: 12px;
  --fs-6: 10px;

  --tracking: 0.06em;
  --tracking-wide: 0.18em;

  /* 结构 */
  --line: 2px;
  --line-thick: 3px;
  --shadow: 4px 4px 0 var(--ink);
  --shadow-sm: 2px 2px 0 var(--ink);
  --shadow-lg: 8px 8px 0 var(--ink);
  --radius: 0px;

  /* 间距 */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 18px;
  --s5: 26px;
  --s6: 38px;
  --s7: 56px;

  /* 动效 */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fast: 120ms;
  --mid: 220ms;

  --z-canvas: 0;
  --z-hud: 10;
  --z-overlay: 40;
  --z-modal: 60;
  --z-toast: 80;
  --z-boot: 100;
}

/* 网点纸纹：用 CSS 渐变做半调，成本为零 */
.halftone {
  background-image: radial-gradient(var(--ink-4) 0.9px, transparent 1px);
  background-size: 5px 5px;
  background-position: 0 0;
}

.halftone-dense {
  background-image: radial-gradient(var(--ink-3) 1px, transparent 1.2px);
  background-size: 4px 4px;
}

.hatch {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--ink-4) 0,
    var(--ink-4) 1px,
    transparent 1px,
    transparent 6px
  );
}