/*
 * 设计令牌
 *
 * 颜色用 light-dark() 一处定义两套，跟随 color-scheme。
 * 界面本身只有灰阶；蓝色只给"可以点的"和"正在进行的"，状态色只给状态。
 */

:root {
  color-scheme: light dark;

  /* 底色与表面 */
  --bg: light-dark(#f5f5f7, #000);
  --surface: light-dark(#fff, #1c1c1e);
  --surface-sunken: light-dark(#f5f5f7, #2c2c2e);
  --glass: light-dark(rgb(255 255 255 / 0.72), rgb(44 44 46 / 0.72));
  --glass-strong: light-dark(rgb(255 255 255 / 0.88), rgb(44 44 46 / 0.9));
  --glass-rim: light-dark(rgb(255 255 255 / 0.9), rgb(255 255 255 / 0.14));
  --scrim: light-dark(rgb(0 0 0 / 0.26), rgb(0 0 0 / 0.56));

  /* 文字 */
  --text: light-dark(#1d1d1f, #f5f5f7);
  --text-2: light-dark(#6e6e73, #a1a1a6);
  --text-3: light-dark(#86868b, #8e8e93);
  /* 占位符：比 --text-3 深一档，浅色底上也要够 4.5:1（灰字太浅是"看不清"的头号原因） */
  --placeholder: light-dark(#5f5f64, #a1a1a6);

  /* 线与填充 */
  --hairline: light-dark(rgb(0 0 0 / 0.08), rgb(255 255 255 / 0.1));
  --fill: light-dark(rgb(120 120 128 / 0.12), rgb(120 120 128 / 0.24));
  --fill-hover: light-dark(rgb(120 120 128 / 0.18), rgb(120 120 128 / 0.32));
  --fill-faint: light-dark(rgb(120 120 128 / 0.06), rgb(120 120 128 / 0.12));

  /* 强调色 */
  --accent: light-dark(#0071e3, #0a84ff);
  --accent-hover: light-dark(#0077ed, #3395ff);
  --accent-tint: light-dark(rgb(0 113 227 / 0.1), rgb(10 132 255 / 0.22));
  --accent-ring: light-dark(rgb(0 113 227 / 0.3), rgb(10 132 255 / 0.45));
  --on-accent: #fff;
  --progress-from: light-dark(#4aa8ff, #5eb0ff);
  --progress-to: light-dark(#0071e3, #0a84ff);

  /* 图表：序列用强调色，网格和轴线比表面深一档，始终是实线 */
  --chart-series: var(--accent);
  --chart-wash: light-dark(rgb(0 113 227 / 0.1), rgb(10 132 255 / 0.16));
  --chart-grid: light-dark(#ececf0, #2c2c2e);
  --chart-axis: light-dark(#d2d2d7, #48484a);

  /* 状态。文字用深一档的颜色保证对比度，底色是同色的淡染 */
  --ok: light-dark(#248a3d, #30d158);
  --ok-tint: light-dark(rgb(52 199 89 / 0.14), rgb(48 209 88 / 0.2));
  --ok-soft: light-dark(rgb(52 199 89 / 0.5), rgb(48 209 88 / 0.45)); /* 做完的进度条：看得出是完成了，但不抢眼 */
  --warn: light-dark(#b25000, #ff9f0a);
  --warn-tint: light-dark(rgb(255 159 10 / 0.16), rgb(255 159 10 / 0.2));
  --bad: light-dark(#d70015, #ff453a);
  --bad-tint: light-dark(rgb(255 59 48 / 0.12), rgb(255 69 58 / 0.2));
  /* 暂停：靛蓝。和排队中的橙色、进行中的蓝色都分得开 —— 暂停的任务不会自己动，
     得让人一眼认出来去点恢复 */
  --pause: light-dark(#5856d6, #7d7aff);
  --pause-tint: light-dark(rgb(88 86 214 / 0.12), rgb(125 122 255 / 0.22));
  --mute: light-dark(#6e6e73, #98989d);
  --mute-tint: var(--fill);
  /* 观察区 / 测试任务：青色。新号在观察区里只做测试任务，两处用同一个颜色连起来 */
  --observe: light-dark(#007a8c, #5ac8dc);
  --observe-tint: light-dark(rgb(48 176 199 / 0.14), rgb(64 200 224 / 0.2));

  /* 阴影：一圈极细的描边 + 贴近的短影 + 远处的散影 */
  --shadow-card:
    0 0 0 0.5px light-dark(rgb(0 0 0 / 0.06), rgb(255 255 255 / 0.08)),
    0 1px 1.5px light-dark(rgb(0 0 0 / 0.04), transparent),
    0 8px 24px -10px light-dark(rgb(0 0 0 / 0.1), transparent);
  --shadow-float:
    0 0 0 0.5px light-dark(rgb(0 0 0 / 0.08), rgb(255 255 255 / 0.12)),
    0 2px 6px light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.3)),
    0 14px 36px -10px light-dark(rgb(0 0 0 / 0.18), rgb(0 0 0 / 0.6));
  --shadow-sheet:
    0 0 0 0.5px light-dark(rgb(0 0 0 / 0.1), rgb(255 255 255 / 0.14)),
    0 30px 80px -20px light-dark(rgb(0 0 0 / 0.35), rgb(0 0 0 / 0.8));
  --shadow-thumb:
    0 0 0 0.5px light-dark(rgb(0 0 0 / 0.06), rgb(255 255 255 / 0.1)),
    0 1px 3px light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4)),
    0 3px 10px -2px light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4));

  /* 字体。全部用系统无衬线，大数字也一样；标识符和数据用等宽 */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
    "Helvetica Neue", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC",
    "Helvetica Neue", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* 圆角 */
  --r-control: 12px;
  --r-card: 22px;
  --r-sheet: 28px;
  --r-pill: 999px;

  /* 动效。两条弹簧曲线是欠阻尼弹簧的阶跃响应采样出来的 */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --spring: linear(
    0, 0.038, 0.13, 0.248, 0.373, 0.494, 0.603, 0.699, 0.778, 0.842, 0.893, 0.931,
    0.959, 0.98, 0.993, 1.002, 1.007, 1.01, 1.011, 1.011, 1.01, 1.009, 1.007, 1.006,
    1.005, 1.004, 1.003, 1.002, 1
  );
  --spring-soft: linear(
    0, 0.067, 0.223, 0.414, 0.603, 0.767, 0.896, 0.988, 1.045, 1.075, 1.084, 1.079,
    1.066, 1.05, 1.034, 1.02, 1.009, 1.001, 0.996, 0.994, 0.993, 0.993, 0.994, 0.996,
    0.997, 0.998, 0.999, 1, 1
  );
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-spring: 500ms;
  --dur-spring-soft: 700ms;

  /* 版心 */
  --gutter: clamp(16px, 4vw, 40px);
  /* 内容区最宽多少。宽屏上铺满整个窗口太散，收在 1200：表格页一行十来列（代理、Worker）
     在这个宽度下靠各列按比例分（见 table.css） */
  --measure: 1200px;

  /* 顶栏是一条：品牌在左、导航居中、连接状态和账号在右。
     --topbar-h 是总高（连底下那条发丝线），表格吸顶（table.css 的 .th）
     用的就是它 —— 少算这 1px 表头就会被压在栏底下。 */
  --topbar-row-h: 64px;
  --topbar-line: 1px;
  --topbar-h: calc(var(--topbar-row-h) + var(--topbar-line));
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

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