:root {
  --color-accent: rgb(43, 125, 202);
  --color-accent-inverted: rgb(230, 137, 30);

  --color-link: var(--color-accent);
  --color-link-inverted: var(--color-accent-inverted);

  --color-text: rgb(37, 37, 37);
  --color-text-inverted: rgb(255, 255, 255);

  --color-background-header: var(--color-accent);
  --color-background-page: rgb(230, 230, 230);
  --color-background-sidebar: rgb(255, 255, 255);
  --color-background-content: rgb(255, 255, 255);

  --font-family-body: "Open Sans", Arial, sans-serif;
  --font-family-display: "Merriweather", Georgia, serif;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;

  --grid-columns: 12;
  --grid-gap: var(--space-md);
  --sidebar-width: 250px;

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