:root {
  /* for helpers */
  --sp1: 0.5rem;
  --sp2: 1rem;
  --sp3: 2rem;
  --sp4: 4rem;

  /* for styles, typography */
  --color-gray: #3A3A3A;
  --color-steel-blue: #7097B3;
  --color-ice-blue: #ABDDFB;
  --color-purple-gray: #555871;
  --color-dark-purple-gray: #4F5475;
  --color-medium-gray: #666666;
  --color-off-white: #F6F1EE;
  --color-white: #FFFFFF;

  --textDark: var(--color-medium-gray);
  --textLight: var(--color-white);
  --body-copy: var(--textDark);
  --header-color: var(--color-purple-gray);
  --links: var(--color-steel-blue);

  /* for styles */
  --pageFrame: 1320px;
  --maxWidth: 2000px;
  --padLess: 2rem;
  --padNorm: 5rem;
  --padMore: 8rem;
}