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

:root {
  --blue: #1c355e;
  --darkBlue: #1D3557;
  --yellow: #debb61;
  --darkGrey: #6C757D;
  --lightGrey: #f7f7f7;
  --lightBlue: #3a5a78;
  --lightBlueBg: #1c365d17; 
  --black: #2b2b2b;
  --white: #fff;
  --cream: #cfa74033;
  --creamBg: #fdfbf7;
  --transpBrown: rgba(136,95,89,0.48);
}

/*
==============================
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-dark-blue {
  color: var(--darkBlue);
}
.color-light-blue {
  color: var(--lightBlue);
}
.color-yellow {
  color: var(--yellow);
}
.color-cream {
  color:var(--cream);
}
.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-light-blue {
  background-color: var(--lightBlueBg);
}
.bg-cream {
  background-color: var(--creamBg);
}
.bg-light-yellow {
  background-color: var(--cream);
}
.bg-grey {
  background-color:var(--grey);
}
.bg-light-grey {
  background-color:var(--lightGrey);
}
.bg-yellow {
  background-color:var(--yellow);
}
.bg-light-blue-btn {
  background-color: var(--lightBlue);
}


/*
==============================
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-blue {
  border-color: var(--lightBlue);
}
.border-yellow {
  border-color: var(--yellow);
}
.border-dark-blue {
  border-color:var(--darkBlue);
}
.border-grey {
  border-color:var(--grey);
}