:root {
  --blue: rgb(0, 132, 255);

  --dark-grey1: #182026;
  --dark-grey2: #202b33;
  --dark-grey3: #293742;
  --dark-grey4: #30404d;
  --dark-grey5: #394b59;
  --grey1: #5c7080;
  --grey2: #738694;
  --grey3: #8a9ba8;
  --grey4: #a7b6c2;
  --grey5: #bfccd6;
  --grey6: #616b93;
  --light-grey1: #ced9e0;
  --light-grey2: #d8e1e8;
  --light-grey3: #e1e8ed;
  --light-grey4: #ebf1f5;
  --light-grey5: #f5f8fa;

  --yellow: #ffb700;
  --green: #69e181;
  --red: #ff4136;
  --bg-color: #f5f7ff;
  --purple: #6067f1;
  --silver: #4b5473;
  --cyan: #97e1f9;

  --box-shadow: rgba(21, 69, 103, 0.2) 2px 2px 30px 0px;
  --box-shadow-light: rgba(21, 69, 103, 0.2) 2px 2px 10px 0px;

  --spacing: 16px;
  --spacing-xxsmall: calc(var(--spacing) / 8);
  --spacing-xsmall: calc(var(--spacing) / 4);
  --spacing-small: calc(var(--spacing) / 2);
  --spacing-base: calc(1 * var(--spacing));
  --spacing-large: calc(2 * var(--spacing));
  --spacing-xlarge: calc(3 * var(--spacing));
  --spacing-xxlarge: calc(4 * var(--spacing));

  --font-size-base: 12px;
  --font-size-small: 0.8em;

  --transition: all 0.08s linear;

  --monospace: "Roboto Mono";
  --accent-font: "sofia-pro", sans-serif;
  --primary-font: var(--accent-font);

  /* Grid */

  --gutter: 16px;

  --xs-container-max-width: none;
  --sm-container-max-width: 560px;
  --md-container-max-width: 752px;
  --lg-container-max-width: 976px;
  /* --xl-container-max-width: 1184px;*/
  --xl-container-max-width: 1300px;
}

/* Breakpoints */

@custom-media --xs-viewport only screen and (min-width: 0px);
@custom-media --sm-viewport only screen and (min-width: 576px);
@custom-media --md-viewport only screen and (min-width: 768px);
@custom-media --lg-viewport only screen and (min-width: 992px);
@custom-media --xl-viewport only screen and (min-width: 1200px);

@custom-media --sm-viewport-below only screen and (max-width: 575px);
@custom-media --md-viewport-below only screen and (max-width: 767px);
@custom-media --lg-viewport-below only screen and (max-width: 991px);
@custom-media --xl-viewport-below only screen and (max-width: 1199px);