/* 设计令牌：所有颜色、字体、间距、圆角、高度只在这里定义。
   其他 CSS 只能引用 var(--xxx)，不允许出现裸色值和魔法数字。 */

:root {
  color-scheme: light dark;

  /* 色彩：灯箱底 + 墨蓝字 + 标记胶带黄。黄色只用于“你下一步要做的事”（主按钮、选中项） */
  --paper: #e8ebef;        /* 页面底色 */
  --surface: #ffffff;      /* 面板、输入框 */
  --surface-2: #f3f5f7;    /* 下沉区域、进度条轨道、悬停底 */
  --ink: #1c2740;          /* 正文与强调（墨蓝） */
  --ink-2: #48536b;        /* 次要文字 */
  --ink-3: #667085;        /* 提示、占位、禁用说明 */
  --line: #d5dae1;         /* 分隔线 */
  --line-strong: #a9b2c0;  /* 控件边框 */

  --tape: #ffd23f;         /* 主操作 */
  --tape-hover: #ffc400;
  --tape-press: #f0b400;
  --on-tape: #1c2740;      /* 黄底上的文字/描边 */

  --run: #2563c9;          --run-soft: #e1ebfb;   /* 进行中 */
  --ok: #1b7f55;           --ok-soft: #dcf2e7;    /* 完成 */
  --err: #c0392b;          --err-soft: #fbe4e1;   /* 失败 */
  --wait: #5b6578;         --wait-soft: #e9ecf1;  /* 排队/已取消 */

  --focus: #1c2740;
  --overlay: rgba(28, 39, 64, 0.55);

  /* 字体：只用一套无衬线，中文走系统字体，保证离线也好看 */
  --font: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei",
          "Noto Sans CJK SC", "Source Han Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: 26px;
  --fs-2xl: 36px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --lh-body: 1.6;
  --lh-tight: 1.3;

  /* 间距：4px 网格 */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* 圆角：按层级区分，不是一刀切 */
  --r-s: 4px;    /* 缩略图、标签、复选框 */
  --r-m: 8px;    /* 按钮、输入框 */
  --r-l: 12px;   /* 面板 */
  --r-xl: 16px;  /* 对话框 */

  /* 控件高度 */
  --h-sm: 32px;
  --h-ctl: 40px;
  --h-hero: 56px;

  --bw: 1.5px;        /* 控件描边 */
  --bw-strong: 2px;   /* 主按钮、粘贴栏描边 */

  --content-w: 1040px;
  --topbar-h: 56px;

  --t-fast: 120ms;
  --shadow-pop: 0 8px 24px rgba(28, 39, 64, 0.18); /* 只给对话框和提示条用 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f1520;
    --surface: #172033;
    --surface-2: #1e2940;
    --ink: #e8ecf3;
    --ink-2: #aab3c5;
    --ink-3: #8b95a9;
    --line: #2b3650;
    --line-strong: #4a5775;

    --run: #7fa8ff;   --run-soft: #1a2c52;
    --ok: #5fd0a0;    --ok-soft: #14352a;
    --err: #ff8a7a;   --err-soft: #3d1f1c;
    --wait: #a3adc0;  --wait-soft: #252f45;

    --focus: #ffd23f;
    --overlay: rgba(0, 0, 0, 0.6);
    --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.5);
  }
}