/*
==============================
Variables
==============================
*/

:root {
  --blue: #333857;
  --gold: #FFC942;
  --darkGrey: #00000014;
  --lightGrey: #f7f7f7;
  --black: #2b2b2b;
  --white: #fff;
  --lightGold: #FFC942A8;
  --lightBlue: #33385792;
}

/*
==============================
Colors
==============================
*/

.color-white {
  color: #fff;
}
.color-black {
  color: #171717;
}
.color-black-50 {
  color: rgba(23,23,23,0.5);
}
.color-black-25 {
  color: rgba(23,23,23,0.25);
}
.color-black-10 {
  color: rgba(23,23,23,0.1);
}
.color-blue {
  color: var(--blue);
}
.color-gold {
  color: var(--gold);
}
.color-error-red {
  color: #EB5D55;
}
.color-red {
  color: #EB5D55;
}


/*
==============================
Background Colors
==============================
*/

.bg-white {
  background-color: #fff;
}
.bg-black {
  background-color: #171717;
}
.bg-red {
  background-color: #EB5D55;
}
.bg-blue {
  background-color: var(--blue);
}
.bg-gold {
  background-color: var(--gold);
}
.bg-light-gold {
  background-color: var(--lightGold);
}
.bg-grey {
  background-color:var(--grey);
}
.bg-light-grey {
  background-color:var(--lightGrey);
}


/*
==============================
Border Colors
==============================
*/

.border-white {
  border-color: #fff;
}
.border-black {
  border-color: #171717;
}
.border-red {
  border-color: #EB5D55;
}
.border-blue {
  border-color: var(--blue);
}
.border-light-gold {
  border-color: var(--lightGold);
}
.border-gold {
  border-color: var(--gold);
}
.border-grey {
  border-color:var(--darkGrey);
}