:root {
  --white: #fff;
  --srjc-blue: #182952;
  --srjc-red: #801518;
  --light-gray: #e6e7e8;
  --light-blue: #c6d8eb;
  --light-red: #dab3b2;
  --gray: #919daa;
  --yellow: #eab21f;
  --teal-blue: #97d9f3;
}

.white-bg,
.srjc-blue-bg,
.srjc-red-bg,
.light-gray-bg,
.light-blue-bg,
.light-red-bg,
.gray-bg,
.yellow-bg,
.teal-blue-bg {
  background-color: var(--bg-color);
}

.white-text,
.srjc-blue-text,
.srjc-red-text,
.light-gray-text,
.light-blue-text,
.light-red-text,
.gray-text,
.yellow-text,
.teal-blue-text {
  color: var(--text-color);
}

.white-bg {
  --bg-color: var(--white);
}

.white-text {
  --text-color: var(--white);
}

.srjc-blue-bg {
  --bg-color: var(--srjc-blue);
}

.srjc-blue-text {
  --text-color: var(--srjc-blue);
}

.srjc-red-bg {
  --bg-color: var(--srjc-red);
}

.srjc-red-text {
  --text-color: var(--srjc-red);
}

.light-gray-bg {
  --bg-color: var(--light-gray);
}

.light-gray-text {
  --text-color: var(--light-gray);
}

.light-blue-bg {
  --bg-color: var(--light-blue);
}

.light-blue-text {
  --text-color: var(--light-blue);
}

.light-red-bg {
  --bg-color: var(--light-red);
}

.light-red-text {
  --text-color: var(--light-red);
}

.gray-bg {
  --bg-color: var(--gray);
}

.gray-text {
  --text-color: var(--gray);
}

.yellow-bg {
  --bg-color: var(--yellow);
}

.yellow-text {
  --text-color: var(--yellow);
}

.teal-blue-bg {
  --bg-color: var(--teal-blue);
}

.teal-blue-text {
  --text-color: var(--teal-blue);
}

.callout.primary {
  background-color: var(--light-red);
}

.callout.secondary {
  background-color: var(--light-blue);
}