:root {
  --color-bg: #ffffff;
  --color-surface: #f6f7f8;
  --color-surface-strong: #eceef0;
  --color-line: #e4e6e9;
  --color-line-strong: #cfd3d8;

  --color-text: #1c1e21;
  --color-text-2: #6c727a;
  --color-text-3: #9aa0a7;

  --color-accent: #2f3237;
  --color-accent-hover: #191b1e;
  --color-accent-fg: #ffffff;

  --color-danger: #a8433c;
  --color-danger-hover: #8f3a34;
  --color-danger-fg: #ffffff;

  --color-overlay: rgba(22, 24, 27, 0.4);
  --color-shadow: rgba(24, 26, 30, 0.09);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 26px;
  --radius-full: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 44px;

  --shadow-sm: 0 1px 3px var(--color-shadow);
  --shadow-md: 0 10px 28px var(--color-shadow);
  --shadow-lg: 0 20px 56px var(--color-shadow);

  --rail-width: 96px;
  --topbar-height: 64px;
  /* 底部那一栏的实际高度，由脚本量出来写回，窄屏浮层靠它对齐 */
  --console-height: 0px;

  color-scheme: light;
}

[data-theme='dark'] {
  --color-bg: #17181a;
  --color-surface: #202124;
  --color-surface-strong: #292a2e;
  --color-line: #333438;
  --color-line-strong: #45474c;

  --color-text: #edeef0;
  --color-text-2: #a6abb2;
  --color-text-3: #787d84;

  --color-accent: #eceef0;
  --color-accent-hover: #ffffff;
  --color-accent-fg: #17181a;

  --color-danger: #d97870;
  --color-danger-hover: #e69089;
  --color-danger-fg: #1a1112;

  --color-overlay: rgba(0, 0, 0, 0.6);
  --color-shadow: rgba(0, 0, 0, 0.5);

  color-scheme: dark;
}