:root {
  --color-primary: #833ca3;
  --color-primary-dark: #6a3085;
  /* The brand purple on a black ground is a 3.14 and fails AA. This is the
     same hue lightened until it clears it (6.5 on #000), for links that sit
     on the dark footer. Text, not decoration: it has to be readable. */
  --color-link-on-dark: #b07cc6;
  --color-bg-dark: #111111;
  --color-text-main: #333333;
  --color-text-muted: #666666;
  --color-bg-light: #f9f9f9;
  --color-white: #ffffff;
  
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Roboto', sans-serif;
  
  --container-width: 1200px;
}

body {
  font-family: var(--font-body);
  color: var(--color-text-main);
  line-height: 1.6;
  margin: 0;
  padding: 0;
  background-color: var(--color-white);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: #111;
  font-weight: 700;
  line-height: 1.2;
}