:root {
  /* COLORS ----------------------------------------------- */

  --white: #fff;
  --darkWhite: #eff0f5;
  --lightGray: #cdd2df;
  --gray: #a1a8bc;
  --darkGray: #707480;
  --lightBlack: #3d3f45;
  --black: #000;

  --blue: #6574a6;
  --lightBlue: #95a6dc;
  --darkBlue: #415082;

  --green: #43d0ae;
  --darkGreen: #2aa588;
  --red: #b83a60;
  --darkRed: #7d1c39;
  --pink: #ca43cf;
  --darkPink: #a324a8;

  --primaryColor: var(--blue);
  --primaryColorLight: var(--lightBlue);
  --primaryColorDark: var(--darkBlue);
  --textColor: var(--lightBlack);
  --successTextColor: var(--darkGreen);
  --errorTextColor: var(--red);

  --ctaColor: var(--pink);
  --ctaColorDark: var(--darkPink);
  --errorColor: var(--red);
  --errorColorDark: var(--darkRed);
  --successColor: var(--green);

  --shadowColor: rgba(0, 0, 0, 0.2);

  /* OTHER VARIABLES -------------------------------------- */

  --smallGutter: 10px;
  --largeGutter: 24px;
  --mediumGutter: 16px;

  --transitionTiming: 0.2s;
  --borderRadius: 3px;

  --containerWidth: 800px;
  --largeContainerWidth: 1200px;

  --maxContainerWidth: 1400px;
  --maxContainerWidthRetina: 2000px;

  --headerHeight: 60px;

  --sansFontFamily: 'Source Sans Pro', sans-serif;
  --serifFontFamily: 'Source Serif Pro', serif;

  @custom-media --screenXxsMax (max-width: 479px);
  @custom-media --screenXsMin (min-width: 480px);
  @custom-media --screenXsMax (max-width: 767px);
  @custom-media --screenSmMin (min-width: 768px);
  @custom-media --screenSmMax (max-width: 991px);
  @custom-media --screenMdMin (min-width: 992px);
  @custom-media --screenMdMax (max-width: 1199px);
  @custom-media --screenLgMin (min-width: 1200px);
}
