:root {
  --font-body: "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  --font-heading: "Roboto Slab", "Helvetica Neue", "Helvetica", "Arial", sans-serif;

  --font-size-base: 16px;
  --line-height-base: 1.8;
  --line-height-heading: 1.8;

  --color-text: #333;
  --color-muted: #999;
  --color-border: #ddd;
  --color-white: #fff;
  --color-action: #2980b9;
  --color-action-hover: #20638f;
  --color-action-button-hover: #1b557a;
  --color-highlight: #70aad0;
  --color-code-bg: #eee;
  --color-panel-bg: #f7f7f7;

  --border-radius: 3px;
  --content-width: 48em;
  --spacing-base: 28.8px;
  --spacing-small: 14.4px;

  --breakpoint-mobile: 480px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 960px;
}