:root {
  --color-bg: #f6f7f8;
  --color-surface: #ffffff;
  --color-surface-muted: #f1f3f4;
  --color-border: #d9dee3;
  --color-text: #202428;
  --color-text-muted: #66717c;
  --color-text-light: #8a949e;
  --color-primary: #2f7d6d;
  --color-primary-hover: #286f61;
  --color-negative: #c75050;
  --color-negative-hover: #b64545;
  --color-light: #ffffff;
  --shadow-sm: 0 1px 2px rgba(28, 35, 42, 0.06);
  --radius-sm: 4px;
  --radius-md: 8px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;
  --line-height-base: 1.5;
  --line-height-tight: 1.3;
  --content-width-sm: 460px;
  --content-width-lg: 1180px;
}

html,
body {
  min-height: 100%;
}

body {
  font-family: Arial, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: var(--font-size-md);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background: var(--color-bg);
}

pre,
code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

pre {
  overflow: auto;
}

.small-light {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}