:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;

  --leading-tight: 1.3;
  --leading-snug: 1.55;
  --leading-body: 1.8;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-strong: 600;

  --font-sans: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Noto Sans Mono CJK SC", monospace;

  --measure: 36em;

  --g50: #F8F8F7; --g100: #F0F0EE; --g200: #E2E2DF; --g300: #CCCCC8; --g400: #A3A39E;
  --g500: #6B6B66; --g600: #575753; --g700: #40403D; --g800: #2A2A28; --g900: #181817;
  --y50: #FFF6C7; --y100: #FBEDA8;
}

[data-mode="light"] {
  --bg: var(--g50);
  --surface: #FFFFFF;
  --sunk: var(--g100);
  --line: var(--g200);
  --line-strong: var(--g300);
  --text-1: var(--g900);
  --text-2: var(--g700);
  --text-3: var(--g500);
  --solid: var(--g900);
  --on-solid: var(--g50);
  --mark: var(--y50);
  --shadow-pop: 0 4px 16px rgb(24 24 23 / 0.08);
}

[data-mode="dark"] {
  --bg: #131313;
  --surface: #1C1C1B;
  --sunk: #1F1F1E;
  --line: #2B2B2A;
  --line-strong: #40403E;
  --text-1: #EDEDEA;
  --text-2: #B5B5B0;
  --text-3: #8C8C87;
  --solid: #EDEDEA;
  --on-solid: #131313;
  --mark: #3B3514;
  --shadow-pop: 0 4px 16px rgb(0 0 0 / 0.4);
}