:root {
  --color-bg-body: #f4f6f8;
  --color-bg-editor: #ffffff;
  --color-bg-textarea: #fafbfc;
  --color-bg-page: #ffffff;
  --color-text-primary: #333;
  --color-text-secondary: #586069;
  --color-text-heading: #24292e;
  --color-border: #e1e4e8;
  --color-border-focus: #0366d6;
  --color-button-bg: #2ea44f;
  --color-button-hover: #2c974b;

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 40px;

  --font-family-system: Arial, Helvetica, sans-serif;
  --font-family-mono: 'Fira Code', 'Courier New', Courier, monospace;
  --font-size-small: 13px;
  --font-size-body: 14px;
  --font-size-page: 16px;
}

*, *::before, *::after {
  box-sizing: border-box;
}