:root {
  --color-outer: #ececec;
  --color-bg: #ffffff;
  --color-surface: #f4f4f4;
  --color-surface-2: #e9e9e9;
  --color-line: #d4d4d4;
  --color-ink: #111111;
  --color-ink-2: #555555;
  --color-ink-3: #8a8a8a;
  --color-bar: #111111;
  --color-bar-text: #ffffff;
  --color-belt-a: #e6e6e6;
  --color-belt-b: #c4c4c4;
  --color-halo: #ffffff;
  --color-overlay: rgba(17, 17, 17, 0.45);
  --color-frame-dim: rgba(17, 17, 17, 0.4);

  --font-body: 'Noto Sans SC Variable', 'Noto Sans SC', 'Source Han Sans SC', 'Microsoft YaHei UI', 'PingFang SC', sans-serif;

  --stroke: 3px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;

  --tool-size: 56px;
  --tray-height: 176px;
  --belt-height: 72px;
  --tray-item-height: 124px;
  --topbar-height: 60px;
  --app-max: 520px;

  --z-tray: 2;
  --z-topbar: 2;
  --z-capture: 3;
  --z-menu: 5;
  --z-dialog: 10;
  --z-confirm: 20;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --topbar-total: calc(var(--topbar-height) + var(--safe-top));
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  color-scheme: light;
}

/* 矮屏（手机横放）：传送带整体缩小，少盖住舞台 */
@media (max-height: 560px) {
  :root {
    --tray-height: 132px;
    --belt-height: 52px;
    --tray-item-height: 84px;
  }
}

/* 触屏设备本身就是整块屏幕，宽度上限比鼠标设备大，但两侧仍留边 */
@media (pointer: coarse) {
  :root {
    --app-max: 860px;
  }
}