:root {
  --gotham-book: "Gotham-Book","Helvetica Neue",Helvetica,"Segoe UI",Tahoma,Arial,sans-serif;
  --gotham-medium: "Gotham-Medium","Helvetica Neue",Helvetica,"Segoe UI",Tahoma,Arial,sans-serif;
  --gotham-light: "Gotham-Light","Helvetica Neue",Helvetica,"Segoe UI",Tahoma,Arial,sans-serif;
  --gotham-bold: "Gotham","Helvetica Neue",Helvetica,"Segoe UI",Tahoma,Arial,sans-serif;
  --white: #FFFFFF;
  --alto: #CFCFCF;
  --bluemine: #185A7D;
  --catskill-white: #E9EFF4;
  --grey: #8F8F8F;
  --santa-grey: #9E9EA0;
  --eastern-blue: #207DAC;
  --red: #D55553;
  --chambray: #2C597A;
  --tropical-blue: #BEE6F6;
  --curious-blue: #248DC1;
  --spun-pearl: #A8A8AA;
  --mine-shaft: #333333;
  --bluewood: #253746;
  --blue: #288DC1;
  --light-blue: #40B4E3;
  --mirage: #131E29;
}

svg,
svg * {
  transition: all 0.5s ease;
}

/* typography
============================================================================= */
.gotham-book {
  font-family: var(--gotham-book);
}
.gotham-medium {
  font-family: var(--gotham-medium);
}
.gotham-light {
  font-family: var(--gotham-light);
}

/* colors
* using @each to iterate over colors defined in root and creating classes
============================================================================= */
.color--white {
  color: var(--white);
}
.color--grey {
  color: var(--grey);
}
.color--santaGrey {
  color: var(--santa-grey);
}
.color--red {
  color: var(--red);
}
.color--chambray {
  color: var(--chambray);
}
.color--spun-pearl {
  color: var(--spun-pearl);
}
.color--mine-shaft {
  color: var(--mine-shaft);
}
.color--eastern-blue {
  color: var(--eastern-blue);
}
.color--bluemine {
  color: var(--bluemine);
}

/* backgrounds
* using @each to iterate over colors defined in root and creating classes
============================================================================= */
.background--white {
  background-color: var(--white);
}
.background--catskillWhite {
  background-color: var(--catskill-white);
}