/* 全部颜色、间距、字号、尺寸只写在这里，部件和 app.css 只引用变量。
   风格：白底，白 / 浅灰 / 深灰，浅色线条图标；只用浅色（不跟系统深色模式变）。 */
:root {
  color-scheme: only light;
  --u: 3.9px;

  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f0f0ee;
  --surface-3: #e4e4e2;
  --field: #ffffff;
  --bar: #2e2f33;
  --disc: #f0f0ee;
  --ink: #2e2f33;
  --ink-2: #55575c;
  --ink-3: #8a8c91;
  --line: #c9cacc;
  --line-soft: #e4e4e2;
  --accent: #8a8c91;
  --danger: #a8484c;
  --on-dark: #ffffff;
  --selected: #eceef1;

  /* 桌面：浅灰底 + 跟着缩放平移的点阵；画板周围一圈细线 */
  --desk: #f3f3f1;
  --desk-dot: #d7d7d4;
  --board-edge: #d2d2cf;
  --check-a: #ffffff;
  --check-b: #e2e2e0;

  --font: 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-weight: 700;
  --title-weight: 900;

  --radius: 12px;
  --radius-lg: 14px;
  --radius-sm: 8px;
  --border-w: 1.5px;
  --touch: 36px;
  --control: 30px;
  --row-h: 30px;
  --chip: 28px;
  --text: 14px;
  --text-small: 12px;
  --text-title: 16px;
  --gap-1: 4px;
  --gap-2: 8px;
  --gap-3: 12px;
  --gap-4: 16px;
  --icon: 20px;
  --icon-sm: 16px;

  /* 舞台上的悬浮件 */
  --tools-w: 128px;
  --dock-w: 252px;
  --fwin-w: 248px;
  --set-w: 140px;
  --num-w: 40px;
  --label-w: 52px;
  --thumb: 32px;
  --top-h: 46px;
  --dot: 28px;

  --top-safe: env(safe-area-inset-top, 0px);
  --bottom-safe: env(safe-area-inset-bottom, 0px);
  --left-safe: env(safe-area-inset-left, 0px);
  --right-safe: env(safe-area-inset-right, 0px);

  --z-content: 1;
  --z-rail: 10;
  --z-float: 20;
  --z-popover: 30;
  --z-toast: 40;
  --z-modal: 50;
}

/* 极窄屏（不到 360 宽）：整套界面一起收小一点，布局不变。 */
@media (max-width: 359px) {
  :root {
    --text: 14px;
    --text-small: 12px;
    --gap-2: 6px;
    --gap-3: 10px;
    --label-w: 48px;
    --num-w: 38px;
  }
}