: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;
  --primary-blue: #081f40;
  --primary-blue-light: #9da5b3;
  --primary-red: #aa1e2e;
  --primary-red-light: #dda5ab;
  --primary-gray: #959b9d;
  --primary-gray-light: #d5d7d8;
  --campus-gold: #e28d27;
  --campus-gold-light: #f3d1a9;
  --campus-orange: #b86125;
  --campus-orange-light: #eac4aa;
  --campus-blue: #395382;
  --campus-blue-light: #a9bbd1;
  --campus-green: #6d712e;
  --campus-green-light: #c5c7ac;
  --tertiary-purple: #732e4a;
  --tertiary-purple-light: #caa5b9;
  --tertiary-gray: #53565a;
  --tertiary-gray-light: #babdbf;
  --tertiary-teal: #00a49a;
  --tertiary-teal-light: #a4dbd7;
}

.white-bg,
.srjc-blue-bg,
.srjc-red-bg,
.light-gray-bg,
.light-blue-bg,
.light-red-bg,
.gray-bg,
.yellow-bg,
.teal-blue-bg,
.primary-blue-bg,
.primary-blue-light-bg,
.primary-red-bg,
.primary-red-light-bg,
.primary-gray-bg,
.primary-gray-light-bg,
.campus-gold-bg,
.campus-gold-light-bg,
.campus-orange-bg,
.campus-orange-light-bg,
.campus-blue-bg,
.campus-blue-light-bg,
.campus-green-bg,
.campus-green-light-bg,
.tertiary-purple-bg,
.tertiary-purple-light-bg,
.tertiary-gray-bg,
.tertiary-gray-light-bg,
.tertiary-teal-bg,
.tertiary-teal-light-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,
.primary-blue-text,
.primary-blue-light-text,
.primary-red-text,
.primary-red-light-text,
.primary-gray-text,
.primary-gray-light-text,
.campus-gold-text,
.campus-gold-light-text,
.campus-orange-text,
.campus-orange-light-text,
.campus-blue-text,
.campus-blue-light-text,
.campus-green-text,
.campus-green-light-text,
.tertiary-purple-text,
.tertiary-purple-light-text,
.tertiary-gray-text,
.tertiary-gray-light-text,
.tertiary-teal-text,
.tertiary-teal-light-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);
}

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

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


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

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


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

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


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

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


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

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


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

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


.campus-gold-bg {
  --bg-color: var(--campus-gold);
}

.campus-gold-text {
  --text-color: var(--campus-gold);
}

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

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


.campus-orange-bg {
  --bg-color: var(--campus-orange);
}

.campus-orange-text {
  --text-color: var(--campus-orange);
}


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

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


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

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


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

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


.campus-green-bg {
  --bg-color: var(--campus-green);
}

.campus-green-text {
  --text-color: var(--campus-green);
}

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

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


.tertiary-purple-bg {
  --bg-color: var(--tertiary-purple);
}

.tertiary-purple-text {
  --text-color: var(--tertiary-purple);
}


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


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


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

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


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

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


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

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


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

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

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

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