:root {
  /**
   * Color Schemes.
   * We should be able to DRASTICALLY reduce the size of this stylesheet once color-mix is supported in all browsers!
   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix
   */

  /* Alpha channel (transparency) */
  /* not sure that this is actually helpful... */
  /* should probably just be --alpha or --a and it can be changed on a per-instance basis? */
  --a: 1;
  --a-0: 0;
  --a-10: 0.1;
  --a-20: 0.2;
  --a-30: 0.3;
  --a-40: 0.4;
  --a-50: 0.5;
  --a-60: 0.6;
  --a-70: 0.7;
  --a-80: 0.8;
  --a-90: 0.9;
  --a-100: 1;

  /**
   * Colors: Generic
   * These colors are neutral tones or shades that can be used anywhere.
   */
  --msu-grayscale-base: 0 0%;

  --msu-white-hex: #ffffff;
  --msu-white-rgb: 255 255 255;
  --msu-white-hsl: var(--msu-grayscale-base) 100%;
  --msu-white: hsl(var(--msu-white-hsl) / var(--a));

  --msu-gray-light-hex: #e1e1e1;
  --msu-gray-light-rgb: 225 225 225;
  --msu-gray-light-hsl: var(--msu-grayscale-base) 88%;
  --msu-gray-light: hsl(var(--msu-gray-light-hsl) / var(--a));

  --msu-gray-hex: #555555;
  --msu-gray-rgb: 85 85 85;
  --msu-gray-hsl: var(--msu-grayscale-base) 33%;
  --msu-gray: hsl(var(--msu-gray-hsl) / var(--a));

  --msu-gray-dark-hex: #333333;
  --msu-gray-dark-rgb: 51 51 51;
  --msu-gray-dark-hsl: var(--msu-grayscale-base) 20%;
  --msu-gray-dark: hsl(var(--msu-gray-dark-hsl) / var(--a));

  --msu-gray-100-hex: #f9f9f9;
  --msu-gray-100-rgb: 249 249 249;
  --msu-gray-100-hsl: var(--msu-grayscale-base) 98%;
  --msu-gray-100: hsl(var(--msu-gray-100-hsl) / var(--a));

  --msu-gray-200-hex: #eeeeee;
  --msu-gray-200-rgb: 238 238 238;
  --msu-gray-200-hsl: var(--msu-grayscale-base) 93%;
  --msu-gray-200: hsl(var(--msu-gray-200-hsl) / var(--a));

  --msu-gray-300-hex: #e1e1e1;
  --msu-gray-300-rgb: 225 225 225;
  --msu-gray-300-hsl: var(--msu-grayscale-base) 88%;
  --msu-gray-300: hsl(var(--msu-gray-300-hsl) / var(--a));

  --msu-gray-400-hex: #cccccc;
  --msu-gray-400-rgb: 204 204 204;
  --msu-gray-400-hsl: var(--msu-grayscale-base) 80%;
  --msu-gray-400: hsl(var(--msu-gray-400-hsl) / var(--a));

  --msu-gray-500-hex: #aaaaaa;
  --msu-gray-500-rgb: 170 170 170;
  --msu-gray-500-hsl: var(--msu-grayscale-base) 67%;
  --msu-gray-500: hsl(var(--msu-gray-500-hsl) / var(--a));

  --msu-gray-600-hex: #777777;
  --msu-gray-600-rgb: 119 119 119;
  --msu-gray-600-hsl: var(--msu-grayscale-base) 47%;
  --msu-gray-600: hsl(var(--msu-gray-600-hsl) / var(--a));

  --msu-gray-700-hex: #555555;
  --msu-gray-700-rgb: 85 85 85;
  --msu-gray-700-hsl: var(--msu-grayscale-base) 33%;
  --msu-gray-700: hsl(var(--msu-gray-700-hsl) / var(--a));

  --msu-gray-800-hex: #333333;
  --msu-gray-800-rgb: 51 51 51;
  --msu-gray-800-hsl: var(--msu-grayscale-base) 20%;
  --msu-gray-800: hsl(var(--msu-gray-800-hsl) / var(--a));

  --msu-gray-900-hex: #222222;
  --msu-gray-900-rgb: 34 34 34;
  --msu-gray-900-hsl: var(--msu-grayscale-base) 13%;
  --msu-gray-900: hsl(var(--msu-gray-900-hsl) / var(--a));

  --msu-gray-950-hex: #111111;
  --msu-gray-950-rgb: 17 17 17;
  --msu-gray-950-hsl: var(--msu-grayscale-base) 7%;
  --msu-gray-950: hsl(var(--msu-gray-950-hsl) / var(--a));

  --msu-black-hex: #000000;
  --msu-black-rgb: 0 0 0;
  --msu-black-hsl: var(--msu-grayscale-base) 0%;
  --msu-black: hsl(var(--msu-black-hsl) / var(--a));

  --msu-focus-hex: #63aaff;
  --msu-focus-rgb: 99 170 255;
  --msu-focus-hsl: 213 100% 69%;
  --msu-focus: hsl(var(--msu-focus-hsl) / var(--a));

  /**
   * Colors: MSU Colors (current)
   * These are currently approved colors for use in promoting the university.
   */

  /* MSU Maroon */
  --msu-maroon-hex: #5d1725;
  --msu-maroon-rgb: 93 23 37;
  --msu-maroon-hsl: 348 60% 23%;
  --msu-maroon: hsl(var(--msu-maroon-hsl) / var(--a));

  --msu-maroon-disabled: hsl(var(--msu-maroon-hsl) / var(--a-50));

  --msu-maroon-primary: var(--msu-maroon);

  --msu-maroon-light-hex: #7a1e30;
  --msu-maroon-light-rgb: 122 30 48;
  --msu-maroon-light-hsl: 348 61% 30%;
  --msu-maroon-light: hsl(var(--msu-maroon-light-hsl) / var(--a));

  --msu-maroon-dark-hex: #40101a;
  --msu-maroon-dark-rgb: 64 16 26;
  --msu-maroon-dark-hsl: 348 60% 16%;
  --msu-maroon-dark: hsl(var(--msu-maroon-dark-hsl) / var(--a));

  --msu-maroon-100-hex: #96253c;
  --msu-maroon-100-rgb: 150 37 60;
  --msu-maroon-100-hsl: 348 60% 37%;
  --msu-maroon-100: hsl(var(--msu-maroon-100-hsl) / var(--a));

  --msu-maroon-200-hex: #882236;
  --msu-maroon-200-rgb: 136 34 54;
  --msu-maroon-200-hsl: 348 60% 33%;
  --msu-maroon-200: hsl(var(--msu-maroon-200-hsl) / var(--a));

  --msu-maroon-300-hex: #7a1e30;
  --msu-maroon-300-rgb: 122 30 48;
  --msu-maroon-300-hsl: 348 61% 30%;
  --msu-maroon-300: hsl(var(--msu-maroon-300-hsl) / var(--a));

  --msu-maroon-400-hex: #6b1b2b;
  --msu-maroon-400-rgb: 107 27 43;
  --msu-maroon-400-hsl: 348 60% 26%;
  --msu-maroon-400: hsl(var(--msu-maroon-400-hsl) / var(--a));

  --msu-maroon-500-hex: var(--msu-maroon-hex);
  --msu-maroon-500-rgb: var(--msu-maroon-rgb);
  --msu-maroon-500-hsl: var(--msu-maroon-hsl);
  --msu-maroon-500: hsl(var(--msu-maroon-500-hsl) / var(--a));

  --msu-maroon-600-hex: #4f131f;
  --msu-maroon-600-rgb: 79 19 31;
  --msu-maroon-600-hsl: 348 61% 19%;
  --msu-maroon-600: hsl(var(--msu-maroon-600-hsl) / var(--a));

  --msu-maroon-700-hex: #40101a;
  --msu-maroon-700-rgb: 64 16 26;
  --msu-maroon-700-hsl: 348 60% 16%;
  --msu-maroon-700: hsl(var(--msu-maroon-700-hsl) / var(--a));

  --msu-maroon-800-hex: #320c14;
  --msu-maroon-800-rgb: 50 12 20;
  --msu-maroon-800-hsl: 347 61% 12%;
  --msu-maroon-800: hsl(var(--msu-maroon-800-hsl) / var(--a));

  --msu-maroon-900-hex: #24090e;
  --msu-maroon-900-rgb: 36 9 14;
  --msu-maroon-900-hsl: 349 60% 9%;
  --msu-maroon-900: hsl(var(--msu-maroon-900-hsl) / var(--a));

  /* MSU Maroon (Bluescale?) */
  --msu-maroon-bs-100-hex: #dfd1d3;
  --msu-maroon-bs-100-rgb: 223 209 211;
  --msu-maroon-bs-100-hsl: 351 18% 85%;
  --msu-maroon-bs-100: hsl(var(--msu-maroon-bs-100-hsl) / var(--a));

  --msu-maroon-bs-200-hex: #bea2a8;
  --msu-maroon-bs-200-rgb: 190 162 168;
  --msu-maroon-bs-200-hsl: 347 18% 69%;
  --msu-maroon-bs-200: hsl(var(--msu-maroon-bs-200-hsl) / var(--a));

  --msu-maroon-bs-300-hex: #9e747c;
  --msu-maroon-bs-300-rgb: 158 116 124;
  --msu-maroon-bs-300-hsl: 349 18% 54%;
  --msu-maroon-bs-300: hsl(var(--msu-maroon-bs-300-hsl) / var(--a));

  --msu-maroon-bs-400-hex: #7d4551;
  --msu-maroon-bs-400-rgb: 125 69 81;
  --msu-maroon-bs-400-hsl: 347 29% 38%;
  --msu-maroon-bs-400: hsl(var(--msu-maroon-bs-400-hsl) / var(--a));

  --msu-maroon-bs-500-hex: var(--msu-maroon-hex);
  --msu-maroon-bs-500-rgb: var(--msu-maroon-rgb);
  --msu-maroon-bs-500-hsl: var(--msu-maroon-hsl);
  --msu-maroon-bs-500: hsl(var(--msu-maroon-bs-500-hsl) / var(--a));

  --msu-maroon-bs-600-hex: #4a121e;
  --msu-maroon-bs-600-rgb: 74 18 30;
  --msu-maroon-bs-600-hsl: 347 61% 18%;
  --msu-maroon-bs-600: hsl(var(--msu-maroon-bs-600-hsl) / var(--a));

  --msu-maroon-bs-700-hex: #380e16;
  --msu-maroon-bs-700-rgb: 56 14 22;
  --msu-maroon-bs-700-hsl: 349 60% 14%;
  --msu-maroon-bs-700: hsl(var(--msu-maroon-bs-700-hsl) / var(--a));

  --msu-maroon-bs-800-hex: #25090f;
  --msu-maroon-bs-800-rgb: 37 9 15;
  --msu-maroon-bs-800-hsl: 347 61% 9%;
  --msu-maroon-bs-800: hsl(var(--msu-maroon-bs-800-hsl) / var(--a));

  --msu-maroon-bs-900-hex: #130507;
  --msu-maroon-bs-900-rgb: 19 5 7;
  --msu-maroon-bs-900-hsl: 351 58% 5%;
  --msu-maroon-bs-900: hsl(var(--msu-maroon-bs-900-hsl) / var(--a));

  /* MSU Indigo */
  --msu-indigo-hex: #6610f2;
  --msu-indigo-rgb: 102 16 242;
  --msu-indigo-hsl: 263 90% 51%;
  --msu-indigo: hsl(var(--msu-indigo-hsl) / var(--a));

  --msu-indigo-100-hex: #e0cffc;
  --msu-indigo-100-rgb: 224 207 252;
  --msu-indigo-100-hsl: 263 88% 90%;
  --msu-indigo-100: hsl(var(--msu-indigo-100-hsl) / var(--a));

  --msu-indigo-200-hex: #c29ffa;
  --msu-indigo-200-rgb: 194 159 250;
  --msu-indigo-200-hsl: 263 90% 80%;
  --msu-indigo-200: hsl(var(--msu-indigo-200-hsl) / var(--a));

  --msu-indigo-300-hex: #a370f7;
  --msu-indigo-300-rgb: 163 112 247;
  --msu-indigo-300-hsl: 263 89% 70%;
  --msu-indigo-300: hsl(var(--msu-indigo-300-hsl) / var(--a));

  --msu-indigo-400-hex: #8540f5;
  --msu-indigo-400-rgb: 133 64 245;
  --msu-indigo-400-hsl: 263 90% 61%;
  --msu-indigo-400: hsl(var(--msu-indigo-400-hsl) / var(--a));

  --msu-indigo-500-hex: var(--msu-indigo-hex);
  --msu-indigo-500-rgb: var(--msu-indigo-rgb);
  --msu-indigo-500-hsl: var(--msu-indigo-hsl);
  --msu-indigo-500: hsl(var(--msu-indigo-500-hsl) / var(--a));

  --msu-indigo-600-hex: #520dc2;
  --msu-indigo-600-rgb: 82 13 194;
  --msu-indigo-600-hsl: 263 87% 41%;
  --msu-indigo-600: hsl(var(--msu-indigo-600-hsl) / var(--a));

  --msu-indigo-700-hex: #3d0a91;
  --msu-indigo-700-rgb: 61 10 145;
  --msu-indigo-700-hsl: 263 87% 30%;
  --msu-indigo-700: hsl(var(--msu-indigo-700-hsl) / var(--a));

  --msu-indigo-800-hex: #290661;
  --msu-indigo-800-rgb: 41 6 97;
  --msu-indigo-800-hsl: 263 88% 20%;
  --msu-indigo-800: hsl(var(--msu-indigo-800-hsl) / var(--a));

  --msu-indigo-900-hex: #140330;
  --msu-indigo-900-rgb: 20 3 48;
  --msu-indigo-900-hsl: 263 88% 10%;
  --msu-indigo-900: hsl(var(--msu-indigo-900-hsl) / var(--a));

  /* MSU Purple */
  --msu-purple-hex: #642f6c;
  --msu-purple-rgb: 100 47 108;
  --msu-purple-hsl: 292 39% 30%;
  --msu-purple: hsl(var(--msu-purple-hsl) / var(--a));

  --msu-purple-100-hex: #c1acc4;
  --msu-purple-100-rgb: 193 172 196;
  --msu-purple-100-hsl: 292 17% 72%;
  --msu-purple-100: hsl(var(--msu-purple-100-hsl) / var(--a));

  --msu-purple-200-hex: #e0d5e2;
  --msu-purple-200-rgb: 224 213 226;
  --msu-purple-200-hsl: 291 18% 86%;
  --msu-purple-200: hsl(var(--msu-purple-200-hsl) / var(--a));

  --msu-purple-300-hex: #a282a7;
  --msu-purple-300-rgb: 162 130 167;
  --msu-purple-300-hsl: 292 17% 58%;
  --msu-purple-300: hsl(var(--msu-purple-300-hsl) / var(--a));

  --msu-purple-400-hex: #835989;
  --msu-purple-400-rgb: 131 89 137;
  --msu-purple-400-hsl: 292 21% 44%;
  --msu-purple-400: hsl(var(--msu-purple-400-hsl) / var(--a));

  --msu-purple-500-hex: var(--msu-purple-hex);
  --msu-purple-500-rgb: var(--msu-purple-rgb);
  --msu-purple-500-hsl: var(--msu-purple-hsl);
  --msu-purple-500: hsl(var(--msu-purple-500-hsl) / var(--a));

  --msu-purple-600-hex: #502656;
  --msu-purple-600-rgb: 80 38 86;
  --msu-purple-600-hsl: 292 39% 24%;
  --msu-purple-600: hsl(var(--msu-purple-600-hsl) / var(--a));

  --msu-purple-700-hex: #3c1c41;
  --msu-purple-700-rgb: 60 28 65;
  --msu-purple-700-hsl: 292 40% 18%;
  --msu-purple-700: hsl(var(--msu-purple-700-hsl) / var(--a));

  --msu-purple-800-hex: #28132b;
  --msu-purple-800-rgb: 40 19 43;
  --msu-purple-800-hsl: 292 39% 12%;
  --msu-purple-800: hsl(var(--msu-purple-800-hsl) / var(--a));

  --msu-purple-900-hex: #140916;
  --msu-purple-900-rgb: 20 9 22;
  --msu-purple-900-hsl: 291 42% 6%;
  --msu-purple-900: hsl(var(--msu-purple-900-hsl) / var(--a));

  /* MSU Pink */
  --msu-pink-hex: #e83e8c;
  --msu-pink-rgb: 232 62 140;
  --msu-pink-hsl: 332 79% 58%;
  --msu-pink: hsl(var(--msu-pink-hsl) / var(--a));

  --msu-pink-100-hex: #fad8e8;
  --msu-pink-100-rgb: 250 216 232;
  --msu-pink-100-hsl: 332 77% 91%;
  --msu-pink-100: hsl(var(--msu-pink-100-hsl) / var(--a));

  --msu-pink-200-hex: #f6b2d1;
  --msu-pink-200-rgb: 246 178 209;
  --msu-pink-200-hsl: 333 79% 83%;
  --msu-pink-200: hsl(var(--msu-pink-200-hsl) / var(--a));

  --msu-pink-300-hex: #f18bba;
  --msu-pink-300-rgb: 241 139 186;
  --msu-pink-300-hsl: 332 78% 75%;
  --msu-pink-300: hsl(var(--msu-pink-300-hsl) / var(--a));

  --msu-pink-400-hex: #ed64a3;
  --msu-pink-400-rgb: 237 100 163;
  --msu-pink-400-hsl: 332 79% 66%;
  --msu-pink-400: hsl(var(--msu-pink-400-hsl) / var(--a));

  --msu-pink-500-hex: var(--msu-pink-hex);
  --msu-pink-500-rgb: var(--msu-pink-rgb);
  --msu-pink-500-hsl: var(--msu-pink-hsl);
  --msu-pink-500: hsl(var(--msu-pink-500-hsl) / var(--a));

  --msu-pink-600-hex: #ba3270;
  --msu-pink-600-rgb: 186 50 112;
  --msu-pink-600-hsl: 333 58% 46%;
  --msu-pink-600: hsl(var(--msu-pink-600-hsl) / var(--a));

  --msu-pink-700-hex: #8b2554;
  --msu-pink-700-rgb: 139 37 84;
  --msu-pink-700-hsl: 332 58% 35%;
  --msu-pink-700: hsl(var(--msu-pink-700-hsl) / var(--a));

  --msu-pink-800-hex: #5d1938;
  --msu-pink-800-rgb: 93 25 56;
  --msu-pink-800-hsl: 333 58% 23%;
  --msu-pink-800: hsl(var(--msu-pink-800-hsl) / var(--a));

  --msu-pink-900-hex: #2e0c1c;
  --msu-pink-900-rgb: 46 12 28;
  --msu-pink-900-hsl: 332 59% 11%;
  --msu-pink-900: hsl(var(--msu-pink-900-hsl) / var(--a));

  /* MSU Red */
  --msu-red-hex: #dc3545;
  --msu-red-rgb: 220 53 69;
  --msu-red-hsl: 354 70% 54%;
  --msu-red: hsl(var(--msu-red-hsl) / var(--a));

  --msu-red-100-hex: #f8d7da;
  --msu-red-100-rgb: 248 215 218;
  --msu-red-100-hsl: 355 70% 91%;
  --msu-red-100: hsl(var(--msu-red-100-hsl) / var(--a));

  --msu-red-200-hex: #f1aeb5;
  --msu-red-200-rgb: 241 174 181;
  --msu-red-200-hsl: 354 71% 81%;
  --msu-red-200: hsl(var(--msu-red-200-hsl) / var(--a));

  --msu-red-300-hex: #ea868f;
  --msu-red-300-rgb: 234 134 143;
  --msu-red-300-hsl: 355 70% 72%;
  --msu-red-300: hsl(var(--msu-red-300-hsl) / var(--a));

  --msu-red-400-hex: #e35d6a;
  --msu-red-400-rgb: 227 93 106;
  --msu-red-400-hsl: 354 71% 63%;
  --msu-red-400: hsl(var(--msu-red-400-hsl) / var(--a));

  --msu-red-500-hex: var(--msu-red-hex);
  --msu-red-500-rgb: var(--msu-red-rgb);
  --msu-red-500-hsl: var(--msu-red-hsl);
  --msu-red-500: hsl(var(--msu-red-500-hsl) / var(--a));

  --msu-red-600-hex: #b02a37;
  --msu-red-600-rgb: 176 42 55;
  --msu-red-600-hsl: 354 61% 43%;
  --msu-red-600: hsl(var(--msu-red-600-hsl) / var(--a));

  --msu-red-700-hex: #842029;
  --msu-red-700-rgb: 132 32 41;
  --msu-red-700-hsl: 355 61% 32%;
  --msu-red-700: hsl(var(--msu-red-700-hsl) / var(--a));

  --msu-red-800-hex: #58151c;
  --msu-red-800-rgb: 88 21 28;
  --msu-red-800-hsl: 354 61% 21%;
  --msu-red-800: hsl(var(--msu-red-800-hsl) / var(--a));

  --msu-red-900-hex: #2c0b0e;
  --msu-red-900-rgb: 44 11 14;
  --msu-red-900-hsl: 355 60% 11%;
  --msu-red-900: hsl(var(--msu-red-900-hsl) / var(--a));

  /* MSU Orange */
  --msu-orange-hex: #a9431e;
  --msu-orange-rgb: 169 67 30;
  --msu-orange-hsl: 16 70% 39%;
  --msu-orange: hsl(var(--msu-orange-hsl) / var(--a));

  --msu-orange-100-hex: #eed9d2;
  --msu-orange-100-rgb: 238 217 210;
  --msu-orange-100-hsl: 15 45% 88%;
  --msu-orange-100: hsl(var(--msu-orange-100-hsl) / var(--a));

  --msu-orange-200-hex: #ddb4a5;
  --msu-orange-200-rgb: 221 180 165;
  --msu-orange-200-hsl: 16 45% 76%;
  --msu-orange-200: hsl(var(--msu-orange-200-hsl) / var(--a));

  --msu-orange-300-hex: #cb8e78;
  --msu-orange-300-rgb: 203 142 120;
  --msu-orange-300-hsl: 16 44% 63%;
  --msu-orange-300: hsl(var(--msu-orange-300-hsl) / var(--a));

  --msu-orange-400-hex: #ba694b;
  --msu-orange-400-rgb: 186 105 75;
  --msu-orange-400-hsl: 16 45% 51%;
  --msu-orange-400: hsl(var(--msu-orange-400-hsl) / var(--a));

  --msu-orange-500-hex: var(--msu-orange-hex);
  --msu-orange-500-rgb: var(--msu-orange-rgb);
  --msu-orange-500-hsl: var(--msu-orange-hsl);
  --msu-orange-500: hsl(var(--msu-orange-500-hsl) / var(--a));

  --msu-orange-600-hex: #873618;
  --msu-orange-600-rgb: 135 54 24;
  --msu-orange-600-hsl: 16 70% 31%;
  --msu-orange-600: hsl(var(--msu-orange-600-hsl) / var(--a));

  --msu-orange-700-hex: #652812;
  --msu-orange-700-rgb: 101 40 18;
  --msu-orange-700-hsl: 16 70% 23%;
  --msu-orange-700: hsl(var(--msu-orange-700-hsl) / var(--a));

  --msu-orange-800-hex: #441b0c;
  --msu-orange-800-rgb: 68 27 12;
  --msu-orange-800-hsl: 16 70% 16%;
  --msu-orange-800: hsl(var(--msu-orange-800-hsl) / var(--a));

  --msu-orange-900-hex: #220d06;
  --msu-orange-900-rgb: 34 13 6;
  --msu-orange-900-hsl: 15 70% 8%;
  --msu-orange-900: hsl(var(--msu-orange-900-hsl) / var(--a));

  /* MSU Yellow */
  --msu-yellow-hex: #ffb81c;
  --msu-yellow-rgb: 255 184 28;
  --msu-yellow-hsl: 41 100% 50%;
  --msu-yellow: hsl(var(--msu-yellow-hsl) / var(--a));

  --msu-yellow-100-hex: #fff1d2;
  --msu-yellow-100-rgb: 255 241 210;
  --msu-yellow-100-hsl: 41 100% 91%;
  --msu-yellow-100: hsl(var(--msu-yellow-100-hsl) / var(--a));

  --msu-yellow-200-hex: #ffe3a4;
  --msu-yellow-200-rgb: 255 227 164;
  --msu-yellow-200-hsl: 42 100% 82%;
  --msu-yellow-200: hsl(var(--msu-yellow-200-hsl) / var(--a));

  --msu-yellow-300-hex: #ffd477;
  --msu-yellow-300-rgb: 255 212 119;
  --msu-yellow-300-hsl: 41 100% 73%;
  --msu-yellow-300: hsl(var(--msu-yellow-300-hsl) / var(--a));

  --msu-yellow-400-hex: #ffc649;
  --msu-yellow-400-rgb: 255 198 73;
  --msu-yellow-400-hsl: 41 100% 64%;
  --msu-yellow-400: hsl(var(--msu-yellow-400-hsl) / var(--a));

  --msu-yellow-500-hex: var(--msu-yellow-hex);
  --msu-yellow-500-rgb: var(--msu-yellow-rgb);
  --msu-yellow-500-hsl: var(--msu-yellow-hsl);
  --msu-yellow-500: hsl(var(--msu-yellow-500-hsl) / var(--a));

  --msu-yellow-600-hex: #cc9316;
  --msu-yellow-600-rgb: 204 147 22;
  --msu-yellow-600-hsl: 41 81% 44%;
  --msu-yellow-600: hsl(var(--msu-yellow-600-hsl) / var(--a));

  --msu-yellow-700-hex: #996e11;
  --msu-yellow-700-rgb: 153 110 17;
  --msu-yellow-700-hsl: 41 80% 33%;
  --msu-yellow-700: hsl(var(--msu-yellow-700-hsl) / var(--a));

  --msu-yellow-800-hex: #664a0b;
  --msu-yellow-800-rgb: 102 74 11;
  --msu-yellow-800-hsl: 42 81% 22%;
  --msu-yellow-800: hsl(var(--msu-yellow-800-hsl) / var(--a));

  --msu-yellow-900-hex: #332506;
  --msu-yellow-900-rgb: 51 37 6;
  --msu-yellow-900-hsl: 41 79% 11%;
  --msu-yellow-900: hsl(var(--msu-yellow-900-hsl) / var(--a));

  /* MSU Green */
  --msu-green-hex: #8f993e;
  --msu-green-rgb: 143 153 62;
  --msu-green-hsl: 67 31% 54%;
  --msu-green: hsl(var(--msu-green-hsl) / var(--a));

  --msu-green-100-hex: #e9ebd8;
  --msu-green-100-rgb: 233 235 216;
  --msu-green-100-hsl: 66 32% 88%;
  --msu-green-100: hsl(var(--msu-green-100-hsl) / var(--a));

  --msu-green-200-hex: #d2d6b2;
  --msu-green-200-rgb: 210 214 178;
  --msu-green-200-hsl: 67 31% 77%;
  --msu-green-200: hsl(var(--msu-green-200-hsl) / var(--a));

  --msu-green-300-hex: #bcc28b;
  --msu-green-300-rgb: 188 194 139;
  --msu-green-300-hsl: 67 31% 65%;
  --msu-green-300: hsl(var(--msu-green-300-hsl) / var(--a));

  --msu-green-400-hex: #a5ad65;
  --msu-green-400-rgb: 165 173 101;
  --msu-green-400-hsl: 67 31% 54%;
  --msu-green-400: hsl(var(--msu-green-400-hsl) / var(--a));

  --msu-green-500-hex: var(--msu-green-hex);
  --msu-green-500-rgb: var(--msu-green-rgb);
  --msu-green-500-hsl: var(--msu-green-hsl);
  --msu-green-500: hsl(var(--msu-green-500-hsl) / var(--a));

  --msu-green-600-hex: #727a32;
  --msu-green-600-rgb: 114 122 50;
  --msu-green-600-hsl: 67 42% 34%;
  --msu-green-600: hsl(var(--msu-green-600-hsl) / var(--a));

  --msu-green-700-hex: #565c25;
  --msu-green-700-rgb: 86 92 37;
  --msu-green-700-hsl: 67 43% 25%;
  --msu-green-700: hsl(var(--msu-green-700-hsl) / var(--a));

  --msu-green-800-hex: #393d19;
  --msu-green-800-rgb: 57 61 25;
  --msu-green-800-hsl: 67 42% 17%;
  --msu-green-800: hsl(var(--msu-green-800-hsl) / var(--a));

  --msu-green-900-hex: #1d1f0c;
  --msu-green-900-rgb: 29 31 12;
  --msu-green-900-hsl: 66 44% 8%;
  --msu-green-900: hsl(var(--msu-green-900-hsl) / var(--a));

  /* MSU Lime */
  --msu-lime-hex: #b7bf10;
  --msu-lime-rgb: 183 191 16;
  --msu-lime-hsl: 63 84% 40%;
  --msu-lime: hsl(var(--msu-lime-hsl) / var(--a));

  --msu-lime-100-hex: #f1f2cf;
  --msu-lime-100-rgb: 241 242 207;
  --msu-lime-100-hsl: 62 57% 88%;
  --msu-lime-100: hsl(var(--msu-lime-100-hsl) / var(--a));

  --msu-lime-200-hex: #e2e59f;
  --msu-lime-200-rgb: 226 229 159;
  --msu-lime-200-hsl: 63 57% 76%;
  --msu-lime-200: hsl(var(--msu-lime-200-hsl) / var(--a));

  --msu-lime-300-hex: #d4d970;
  --msu-lime-300-rgb: 212 217 112;
  --msu-lime-300-hsl: 63 58% 65%;
  --msu-lime-300: hsl(var(--msu-lime-300-hsl) / var(--a));

  --msu-lime-400-hex: #c5cc40;
  --msu-lime-400-rgb: 197 204 64;
  --msu-lime-400-hsl: 63 58% 53%;
  --msu-lime-400: hsl(var(--msu-lime-400-hsl) / var(--a));

  --msu-lime-500-hex: var(--msu-lime-hex);
  --msu-lime-500-rgb: var(--msu-lime-rgb);
  --msu-lime-500-hsl: var(--msu-lime-hsl);
  --msu-lime-500: hsl(var(--msu-lime-500-hsl) / var(--a));

  --msu-lime-600-hex: #92990d;
  --msu-lime-600-rgb: 146 153 13;
  --msu-lime-600-hsl: 63 84% 33%;
  --msu-lime-600: hsl(var(--msu-lime-600-hsl) / var(--a));

  --msu-lime-700-hex: #6e730a;
  --msu-lime-700-rgb: 110 115 10;
  --msu-lime-700-hsl: 63 84% 25%;
  --msu-lime-700: hsl(var(--msu-lime-700-hsl) / var(--a));

  --msu-lime-800-hex: #494c06;
  --msu-lime-800-rgb: 73 76 6;
  --msu-lime-800-hsl: 63 85% 16%;
  --msu-lime-800: hsl(var(--msu-lime-800-hsl) / var(--a));

  --msu-lime-900-hex: #252603;
  --msu-lime-900-rgb: 37 38 3;
  --msu-lime-900-hsl: 62 85% 8%;
  --msu-lime-900: hsl(var(--msu-lime-900-hsl) / var(--a));

  /* MSU Teal */
  --msu-teal-hex: #20c997;
  --msu-teal-rgb: 32 201 151;
  --msu-teal-hsl: 162 61% 50%;
  --msu-teal: hsl(var(--msu-teal-hsl) / var(--a));

  --msu-teal-100-hex: #d2f4ea;
  --msu-teal-100-rgb: 210 244 234;
  --msu-teal-100-hsl: 162 61% 89%;
  --msu-teal-100: hsl(var(--msu-teal-100-hsl) / var(--a));

  --msu-teal-200-hex: #a6e9d5;
  --msu-teal-200-rgb: 166 233 213;
  --msu-teal-200-hsl: 162 60% 78%;
  --msu-teal-200: hsl(var(--msu-teal-200-hsl) / var(--a));

  --msu-teal-300-hex: #79dfc1;
  --msu-teal-300-rgb: 121 223 193;
  --msu-teal-300-hsl: 162 61% 67%;
  --msu-teal-300: hsl(var(--msu-teal-300-hsl) / var(--a));

  --msu-teal-400-hex: #4dd4ac;
  --msu-teal-400-rgb: 77 212 172;
  --msu-teal-400-hsl: 162 61% 57%;
  --msu-teal-400: hsl(var(--msu-teal-400-hsl) / var(--a));

  --msu-teal-500-hex: var(--msu-teal-hex);
  --msu-teal-500-rgb: var(--msu-teal-rgb);
  --msu-teal-500-hsl: var(--msu-teal-hsl);
  --msu-teal-500: hsl(var(--msu-teal-500-hsl) / var(--a));

  --msu-teal-600-hex: #1aa179;
  --msu-teal-600-rgb: 26 161 121;
  --msu-teal-600-hsl: 162 72% 37%;
  --msu-teal-600: hsl(var(--msu-teal-600-hsl) / var(--a));

  --msu-teal-700-hex: #13795b;
  --msu-teal-700-rgb: 19 121 91;
  --msu-teal-700-hsl: 162 73% 27%;
  --msu-teal-700: hsl(var(--msu-teal-700-hsl) / var(--a));

  --msu-teal-800-hex: #0d503c;
  --msu-teal-800-rgb: 13 80 60;
  --msu-teal-800-hsl: 162 72% 18%;
  --msu-teal-800: hsl(var(--msu-teal-800-hsl) / var(--a));

  --msu-teal-900-hex: #06281e;
  --msu-teal-900-rgb: 6 40 30;
  --msu-teal-900-hsl: 162 74% 9%;
  --msu-teal-900: hsl(var(--msu-teal-900-hsl) / var(--a));

  /* MSU Cyan */
  --msu-cyan-hex: #00aead;
  --msu-cyan-rgb: 0 174 173;
  --msu-cyan-hsl: 180 100% 34%;
  --msu-cyan: hsl(var(--msu-cyan-hsl) / var(--a));

  --msu-cyan-100-hex: #ccefef;
  --msu-cyan-100-rgb: 204 239 239;
  --msu-cyan-100-hsl: 180 52% 87%;
  --msu-cyan-100: hsl(var(--msu-cyan-100-hsl) / var(--a));

  --msu-cyan-200-hex: #99dfde;
  --msu-cyan-200-rgb: 153 223 222;
  --msu-cyan-200-hsl: 179 52% 74%;
  --msu-cyan-200: hsl(var(--msu-cyan-200-hsl) / var(--a));

  --msu-cyan-300-hex: #66cece;
  --msu-cyan-300-rgb: 102 206 206;
  --msu-cyan-300-hsl: 180 51% 60%;
  --msu-cyan-300: hsl(var(--msu-cyan-300-hsl) / var(--a));

  --msu-cyan-400-hex: #33bebd;
  --msu-cyan-400-rgb: 51 190 189;
  --msu-cyan-400-hsl: 180 58% 47%;
  --msu-cyan-400: hsl(var(--msu-cyan-400-hsl) / var(--a));

  --msu-cyan-500-hex: var(--msu-cyan-hex);
  --msu-cyan-500-rgb: var(--msu-cyan-rgb);
  --msu-cyan-500-hsl: var(--msu-cyan-hsl);
  --msu-cyan-500: hsl(var(--msu-cyan-500-hsl) / var(--a));

  --msu-cyan-600-hex: #008b8a;
  --msu-cyan-600-rgb: 0 139 138;
  --msu-cyan-600-hsl: 180 100% 27%;
  --msu-cyan-600: hsl(var(--msu-cyan-600-hsl) / var(--a));

  --msu-cyan-700-hex: #006868;
  --msu-cyan-700-rgb: 0 104 104;
  --msu-cyan-700-hsl: 180 100% 20%;
  --msu-cyan-700: hsl(var(--msu-cyan-700-hsl) / var(--a));

  --msu-cyan-800-hex: #004645;
  --msu-cyan-800-rgb: 0 70 69;
  --msu-cyan-800-hsl: 179 100% 14%;
  --msu-cyan-800: hsl(var(--msu-cyan-800-hsl) / var(--a));

  --msu-cyan-900-hex: #002323;
  --msu-cyan-900-rgb: 0 35 35;
  --msu-cyan-900-hsl: 180 100% 7%;
  --msu-cyan-900: hsl(var(--msu-cyan-900-hsl) / var(--a));

  /* MSU Gold */
  --msu-gold-hex: #c99700;
  --msu-gold-rgb: 201 151 0;
  --msu-gold-hsl: 45 100% 39%;
  --msu-gold: hsl(var(--msu-gold-hsl) / var(--a));

  --msu-gold-100-hex: #f4eacc;
  --msu-gold-100-rgb: 244 234 204;
  --msu-gold-100-hsl: 45 65% 88%;
  --msu-gold-100: hsl(var(--msu-gold-100-hsl) / var(--a));

  --msu-gold-200-hex: #e9d599;
  --msu-gold-200-rgb: 233 213 153;
  --msu-gold-200-hsl: 45 65% 76%;
  --msu-gold-200: hsl(var(--msu-gold-200-hsl) / var(--a));

  --msu-gold-300-hex: #dfc166;
  --msu-gold-300-rgb: 223 193 102;
  --msu-gold-300-hsl: 45 65% 64%;
  --msu-gold-300: hsl(var(--msu-gold-300-hsl) / var(--a));

  --msu-gold-400-hex: #d4ac33;
  --msu-gold-400-rgb: 212 172 51;
  --msu-gold-400-hsl: 45 65% 52%;
  --msu-gold-400: hsl(var(--msu-gold-400-hsl) / var(--a));

  --msu-gold-500-hex: var(--msu-gold-hex);
  --msu-gold-500-rgb: var(--msu-gold-rgb);
  --msu-gold-500-hsl: var(--msu-gold-hsl);
  --msu-gold-500: hsl(var(--msu-gold-500-hsl) / var(--a));

  --msu-gold-600-hex: #a17900;
  --msu-gold-600-rgb: 161 121 0;
  --msu-gold-600-hsl: 45 100% 32%;
  --msu-gold-600: hsl(var(--msu-gold-600-hsl) / var(--a));

  --msu-gold-700-hex: #795b00;
  --msu-gold-700-rgb: 121 91 0;
  --msu-gold-700-hsl: 45 100% 24%;
  --msu-gold-700: hsl(var(--msu-gold-700-hsl) / var(--a));

  --msu-gold-800-hex: #503c00;
  --msu-gold-800-rgb: 80 60 0;
  --msu-gold-800-hsl: 45 100% 16%;
  --msu-gold-800: hsl(var(--msu-gold-800-hsl) / var(--a));

  --msu-gold-900-hex: #281e00;
  --msu-gold-900-rgb: 40 30 0;
  --msu-gold-900-hsl: 45 100% 8%;
  --msu-gold-900: hsl(var(--msu-gold-900-hsl) / var(--a));

  /* MSU Taupe */
  --msu-taupe-hex: #a69f88;
  --msu-taupe-rgb: 166 159 136;
  --msu-taupe-hsl: 46 14% 59%;
  --msu-taupe: hsl(var(--msu-taupe-hsl) / var(--a));

  --msu-taupe-100-hex: #edece7;
  --msu-taupe-100-rgb: 237 236 231;
  --msu-taupe-100-hsl: 50 14% 92%;
  --msu-taupe-100: hsl(var(--msu-taupe-100-hsl) / var(--a));

  --msu-taupe-200-hex: #dbd9cf;
  --msu-taupe-200-rgb: 219 217 207;
  --msu-taupe-200-hsl: 50 14% 84%;
  --msu-taupe-200: hsl(var(--msu-taupe-200-hsl) / var(--a));

  --msu-taupe-300-hex: #cac5b8;
  --msu-taupe-300-rgb: 202 197 184;
  --msu-taupe-300-hsl: 43 15% 76%;
  --msu-taupe-300: hsl(var(--msu-taupe-300-hsl) / var(--a));

  --msu-taupe-400-hex: #b8b2a0;
  --msu-taupe-400-rgb: 184 178 160;
  --msu-taupe-400-hsl: 45 14% 67%;
  --msu-taupe-400: hsl(var(--msu-taupe-400-hsl) / var(--a));

  --msu-taupe-500-hex: var(--msu-taupe-hex);
  --msu-taupe-500-rgb: var(--msu-taupe-rgb);
  --msu-taupe-500-hsl: var(--msu-taupe-hsl);
  --msu-taupe-500: hsl(var(--msu-taupe-500-hsl) / var(--a));

  --msu-taupe-600-hex: #857f6d;
  --msu-taupe-600-rgb: 133 127 109;
  --msu-taupe-600-hsl: 45 10% 47%;
  --msu-taupe-600: hsl(var(--msu-taupe-600-hsl) / var(--a));

  --msu-taupe-700-hex: #645f52;
  --msu-taupe-700-rgb: 100 95 82;
  --msu-taupe-700-hsl: 43 10% 36%;
  --msu-taupe-700: hsl(var(--msu-taupe-700-hsl) / var(--a));

  --msu-taupe-800-hex: #424036;
  --msu-taupe-800-rgb: 66 64 54;
  --msu-taupe-800-hsl: 50 10% 24%;
  --msu-taupe-800: hsl(var(--msu-taupe-800-hsl) / var(--a));

  --msu-taupe-900-hex: #21201b;
  --msu-taupe-900-rgb: 33 32 27;
  --msu-taupe-900-hsl: 50 10% 12%;
  --msu-taupe-900: hsl(var(--msu-taupe-900-hsl) / var(--a));

  /* MSU Sand */
  --msu-sand-hex: #dac79d;
  --msu-sand-rgb: 218 199 157;
  --msu-sand-hsl: 41 46% 70%;
  --msu-sand: hsl(var(--msu-sand-hsl) / var(--a));

  --msu-sand-100-hex: #f8f4eb;
  --msu-sand-100-rgb: 248 244 235;
  --msu-sand-100-hsl: 42 48% 95%;
  --msu-sand-100: hsl(var(--msu-sand-100-hsl) / var(--a));

  --msu-sand-200-hex: #f0e9d8;
  --msu-sand-200-rgb: 240 233 216;
  --msu-sand-200-hsl: 42 44% 89%;
  --msu-sand-200: hsl(var(--msu-sand-200-hsl) / var(--a));

  --msu-sand-300-hex: #e9ddc4;
  --msu-sand-300-rgb: 233 221 196;
  --msu-sand-300-hsl: 41 46% 84%;
  --msu-sand-300: hsl(var(--msu-sand-300-hsl) / var(--a));

  --msu-sand-400-hex: #e1d2b1;
  --msu-sand-400-rgb: 225 210 177;
  --msu-sand-400-hsl: 41 44% 79%;
  --msu-sand-400: hsl(var(--msu-sand-400-hsl) / var(--a));

  --msu-sand-500-hex: var(--msu-sand-hex);
  --msu-sand-500-rgb: var(--msu-sand-rgb);
  --msu-sand-500-hsl: var(--msu-sand-hsl);
  --msu-sand-500: hsl(var(--msu-sand-500-hsl) / var(--a));

  --msu-sand-600-hex: #ae9f7e;
  --msu-sand-600-rgb: 174 159 126;
  --msu-sand-600-hsl: 41 23% 59%;
  --msu-sand-600: hsl(var(--msu-sand-600-hsl) / var(--a));

  --msu-sand-700-hex: #83775e;
  --msu-sand-700-rgb: 131 119 94;
  --msu-sand-700-hsl: 41 16% 44%;
  --msu-sand-700: hsl(var(--msu-sand-700-hsl) / var(--a));

  --msu-sand-800-hex: #57503f;
  --msu-sand-800-rgb: 87 80 63;
  --msu-sand-800-hsl: 42 16% 29%;
  --msu-sand-800: hsl(var(--msu-sand-800-hsl) / var(--a));

  --msu-sand-900-hex: #2c281f;
  --msu-sand-900-rgb: 44 40 31;
  --msu-sand-900-hsl: 42 17% 15%;
  --msu-sand-900: hsl(var(--msu-sand-900-hsl) / var(--a));

  /* MSU Soil */
  --msu-soil-hex: #6e4c1e;
  --msu-soil-rgb: 110 76 30;
  --msu-soil-hsl: 35 57% 22%;
  --msu-soil: hsl(var(--msu-soil-hsl) / var(--a));

  --msu-soil-100-hex: #e2dbd2;
  --msu-soil-100-rgb: 226 219 210;
  --msu-soil-100-hsl: 34 22% 85%;
  --msu-soil-100: hsl(var(--msu-soil-100-hsl) / var(--a));

  --msu-soil-200-hex: #c5b7a5;
  --msu-soil-200-rgb: 197 183 165;
  --msu-soil-200-hsl: 34 22% 71%;
  --msu-soil-200: hsl(var(--msu-soil-200-hsl) / var(--a));

  --msu-soil-300-hex: #a89478;
  --msu-soil-300-rgb: 168 148 120;
  --msu-soil-300-hsl: 35 22% 56%;
  --msu-soil-300: hsl(var(--msu-soil-300-hsl) / var(--a));

  --msu-soil-400-hex: #8b704b;
  --msu-soil-400-rgb: 139 112 75;
  --msu-soil-400-hsl: 35 30% 42%;
  --msu-soil-400: hsl(var(--msu-soil-400-hsl) / var(--a));

  --msu-soil-500-hex: var(--msu-soil-hex);
  --msu-soil-500-rgb: var(--msu-soil-rgb);
  --msu-soil-500-hsl: var(--msu-soil-hsl);
  --msu-soil-500: hsl(var(--msu-soil-500-hsl) / var(--a));

  --msu-soil-600-hex: #583d18;
  --msu-soil-600-rgb: 88 61 24;
  --msu-soil-600-hsl: 35 57% 22%;
  --msu-soil-600: hsl(var(--msu-soil-600-hsl) / var(--a));

  --msu-soil-700-hex: #422e12;
  --msu-soil-700-rgb: 66 46 18;
  --msu-soil-700-hsl: 35 57% 16%;
  --msu-soil-700: hsl(var(--msu-soil-700-hsl) / var(--a));

  --msu-soil-800-hex: #2c1e0c;
  --msu-soil-800-rgb: 44 30 12;
  --msu-soil-800-hsl: 34 57% 11%;
  --msu-soil-800: hsl(var(--msu-soil-800-hsl) / var(--a));

  --msu-soil-900-hex: #160f06;
  --msu-soil-900-rgb: 22 15 6;
  --msu-soil-900-hsl: 34 57% 5%;
  --msu-soil-900: hsl(var(--msu-soil-900-hsl) / var(--a));

  /**
   * Colors: MSU Colors (retired)
   * These colors are legacy colors and should not be used in new designs but
   * should not be removed in case they are used somewhere.
   * Future deprecations can be added here as well.
   * @see https: //www.brand.msstate.edu/identity/index.php
   */
  /* MSU Blue */
  --msu-blue-hex: #007da4;
  --msu-blue-rgb: 0 125 164;
  --msu-blue-hsl: 197 100% 32%;
  --msu-blue: hsl(var(--msu-blue-hsl) / var(--a));

  --msu-blue-100-hex: #cce5ed;
  --msu-blue-100-rgb: 204 229 237;
  --msu-blue-100-hsl: 197 50% 90%;
  --msu-blue-100: hsl(var(--msu-blue-100-hsl) / var(--a));

  --msu-blue-200-hex: #99cbdb;
  --msu-blue-200-rgb: 153 203 219;
  --msu-blue-200-hsl: 197 50% 80%;
  --msu-blue-200: hsl(var(--msu-blue-200-hsl) / var(--a));

  --msu-blue-300-hex: #66b1c8;
  --msu-blue-300-rgb: 102 177 200;
  --msu-blue-300-hsl: 197 50% 70%;
  --msu-blue-300: hsl(var(--msu-blue-300-hsl) / var(--a));

  --msu-blue-400-hex: #3397b6;
  --msu-blue-400-rgb: 51 151 182;
  --msu-blue-400-hsl: 197 50% 60%;
  --msu-blue-400: hsl(var(--msu-blue-400-hsl) / var(--a));

  --msu-blue-500-hex: var(--msu-blue-hex);
  --msu-blue-500-rgb: var;
  --msu-blue-500-hsl: var(--msu-blue-hsl);
  --msu-blue-500: hsl(var(--msu-blue-500-hsl) / var(--a));

  --msu-blue-600-hex: #006483;
  --msu-blue-600-rgb: 0 100 131;
  --msu-blue-600-hsl: 197 100% 25%;
  --msu-blue-600: hsl(var(--msu-blue-600-hsl) / var(--a));

  --msu-blue-700-hex: #004b62;
  --msu-blue-700-rgb: 0 75 98;
  --msu-blue-700-hsl: 197 100% 20%;
  --msu-blue-700: hsl(var(--msu-blue-700-hsl) / var(--a));

  --msu-blue-800-hex: #003242;
  --msu-blue-800-rgb: 0 50 66;
  --msu-blue-800-hsl: 197 100% 15%;
  --msu-blue-800: hsl(var(--msu-blue-800-hsl) / var(--a));

  --msu-blue-900-hex: #001921;
  --msu-blue-900-rgb: 0 25 33;
  --msu-blue-900-hsl: 197 100% 10%;
  --msu-blue-900: hsl(var(--msu-blue-900-hsl) / var(--a));

  /* MSU Sky */
  --msu-sky-hex: #bdd6e6;
  --msu-sky-rgb: 189 214 230;
  --msu-sky-hsl: 210 50% 75%;
  --msu-sky: hsl(var(--msu-sky-hsl) / var(--a));

  --msu-sky-100-hex: #f2f7fa;
  --msu-sky-100-rgb: 242 247 250;
  --msu-sky-100-hsl: 210 50% 95%;
  --msu-sky-100: hsl(var(--msu-sky-100-hsl) / var(--a));

  --msu-sky-200-hex: #e5eff5;
  --msu-sky-200-rgb: 229 239 245;
  --msu-sky-200-hsl: 210 50% 85%;
  --msu-sky-200: hsl(var(--msu-sky-200-hsl) / var(--a));

  --msu-sky-300-hex: #d7e6f0;
  --msu-sky-300-rgb: 215 230 240;
  --msu-sky-300-hsl: 210 50% 75%;
  --msu-sky-300: hsl(var(--msu-sky-300-hsl) / var(--a));

  --msu-sky-400-hex: #cadeeb;
  --msu-sky-400-rgb: 202 222 235;
  --msu-sky-400-hsl: 210 50% 65%;
  --msu-sky-400: hsl(var(--msu-sky-400-hsl) / var(--a));

  --msu-sky-500-hex: var(--msu-sky-hex);
  --msu-sky-500-rgb: var(--msu-sky-rgb);
  --msu-sky-500-hsl: var(--msu-sky-hsl);
  --msu-sky-500: hsl(var(--msu-sky-500-hsl) / var(--a));

  --msu-sky-600-hex: #97abb8;
  --msu-sky-600-rgb: 151 171 184;
  --msu-sky-600-hsl: 210 30% 55%;
  --msu-sky-600: hsl(var(--msu-sky-600-hsl) / var(--a));

  --msu-sky-700-hex: #71808a;
  --msu-sky-700-rgb: 113 128 138;
  --msu-sky-700-hsl: 210 20% 45%;
  --msu-sky-700: hsl(var(--msu-sky-700-hsl) / var(--a));

  --msu-sky-800-hex: #4c565c;
  --msu-sky-800-rgb: 76 86 92;
  --msu-sky-800-hsl: 210 10% 30%;
  --msu-sky-800: hsl(var(--msu-sky-800-hsl) / var(--a));

  --msu-sky-900-hex: #262b2e;
  --msu-sky-900-rgb: 38 43 46;
  --msu-sky-900-hsl: 210 10% 15%;
  --msu-sky-900: hsl(var(--msu-sky-900-hsl) / var(--a));


  /**
   * Colors: 4-H Colors (current)
   * These are currently approved colors for use in promoting 4-H programs.
   */
  --fh-green-hex: #339966;
  --fh-green-rgb: 51 153 102;
  --fh-green-hsl: 150 50% 40%;
  --fh-green: hsl(var(--fh-green-hsl) / var(--a));

  --fh-white-hex: #ffffff;
  --fh-white-rgb: 255 255 255;
  --fh-white-hsl: 0 0% 100%;
  --fh-white: hsl(var(--fh-white-hsl) / var(--a));

  --fh-black-hex: #000000;
  --fh-black-rgb: 0 0 0;
  --fh-black-hsl: 0 0% 0%;
  --fh-black: hsl(var(--fh-black-hsl) / var(--a));

  --fh-sunflower-hex: #fdc82f;
  --fh-sunflower-rgb: 253 200 47;
  --fh-sunflower-hsl: 45 96% 57%;
  --fh-sunflower: hsl(var(--fh-sunflower-hsl) / var(--a));

  --fh-sky-hex: #c9e3dc;
  --fh-sky-rgb: 201 227 220;
  --fh-sky-hsl: 164 32% 84%;
  --fh-sky: hsl(var(--fh-sky-hsl) / var(--a));

  --fh-cherry-blossom-hex: #ebbda9;
  --fh-cherry-blossom-rgb: 235 189 169;
  --fh-cherry-blossom-hsl: 18 62% 79%;
  --fh-cherry-blossom: hsl(var(--fh-cherry-blossom-hsl) / var(--a));

  --fh-kale-hex: #004438;
  --fh-kale-rgb: 0 68 56;
  --fh-kale-hsl: 169 100% 13%;
  --fh-kale: hsl(var(--fh-kale-hsl) / var(--a));

  --fh-tomato-hex: #f54359;
  --fh-tomato-rgb: 245 67 89;
  --fh-tomato-hsl: 0 85% 60%;
  --fh-tomato: hsl(var(--fh-tomato-hsl) / var(--a));

  --fh-stone-hex: #e0ded8;
  --fh-stone-rgb: 224 222 216;
  --fh-stone-hsl: 30 10% 87%;
  --fh-stone: hsl(var(--fh-stone-hsl) / var(--a));

  /**
   * Background Colors.
   */
  /* MSU Colors */
  --msu-bg-primary: var(--msu-maroon);
  --msu-bg-secondary: var(--msu-white);
  --msu-bg-white: var(--msu-white);
  --msu-bg-gray-light: var(--msu-gray-light);
  --msu-bg-gray: var(--msu-gray);
  --msu-bg-gray-dark: var(--msu-gray-dark);
  --msu-bg-black: var(--msu-black);
  --msu-bg-maroon: var(--msu-maroon);
  --msu-bg-maroon-light: var(--msu-maroon-light);
  --msu-bg-blue: var(--msu-blue);
  --msu-bg-sky: var(--msu-sky);
  --msu-bg-indigo: var(--msu-indigo);
  --msu-bg-purple: var(--msu-purple);
  --msu-bg-pink: var(--msu-pink);
  --msu-bg-red: var(--msu-red);
  --msu-bg-orange: var(--msu-orange);
  --msu-bg-yellow: var(--msu-yellow);
  --msu-bg-green: var(--msu-green);
  --msu-bg-lime: var(--msu-lime);
  --msu-bg-teal: var(--msu-teal);
  --msu-bg-cyan: var(--msu-cyan);
  --msu-bg-gold: var(--msu-gold);
  --msu-bg-taupe: var(--msu-taupe);
  --msu-bg-sand: var(--msu-sand);
  --msu-bg-soil: var(--msu-soil);
  --msu-bg-brand: var(--msu-maroon);
  --msu-bg-neutral: var(--msu-gray-light);
  --msu-bg-success: var(--msu-green);
  --msu-bg-warning: var(--msu-yellow);
  --msu-bg-danger: var(--msu-red);
  --msu-bg-info: var(--msu-blue);
  --msu-bg-light: var(--msu-gray-light);
  --msu-bg-dark: var(--msu-gray-dark);

  /* 4-H Colors */
  --fh-bg-green: var(--fh-green);
  --fh-bg-white: var(--msu-white);
  --fh-bg-sunflower: var(--fh-sunflower);
  --fh-bg-sky: var(--fh-sky);
  --fh-bg-cherry-blossom: var(--fh-cherry-blossom);
  --fh-bg-kale: var(--fh-kale);
  --fh-bg-tomato: var(--fh-tomato);
  --fh-bg-stone: var(--fh-stone);

  /**
   * Text Colors.
   */
  /* MSU Colors */
  --msu-text-primary: var(--msu-maroon);
  --msu-text-secondary: var(--msu-white);
  --msu-text-white: var(--msu-white);
  --msu-text-gray-light: var(--msu-gray-light);
  --msu-text-gray: var(--msu-gray);
  --msu-text-gray-dark: var(--msu-gray-dark);
  --msu-text-black: var(--msu-black);
  --msu-text-maroon: var(--msu-maroon);
  --msu-text-maroon-light: var(--msu-maroon-light);
  --msu-text-blue: var(--msu-blue);
  --msu-text-sky: var(--msu-sky);
  --msu-text-indigo: var(--msu-indigo);
  --msu-text-purple: var(--msu-purple);
  --msu-text-pink: var(--msu-pink);
  --msu-text-red: var(--msu-red);
  --msu-text-orange: var(--msu-orange);
  --msu-text-yellow: var(--msu-yellow);
  --msu-text-green: var(--msu-green);
  --msu-text-lime: var(--msu-lime);
  --msu-text-teal: var(--msu-teal);
  --msu-text-cyan: var(--msu-cyan);
  --msu-text-gold: var(--msu-gold);
  --msu-text-taupe: var(--msu-taupe);
  --msu-text-sand: var(--msu-sand);
  --msu-text-soil: var(--msu-soil);
  --msu-text-brand: var(--msu-maroon);
  --msu-text-neutral: var(--msu-gray-light);
  --msu-text-success: var(--msu-green);
  --msu-text-warning: var(--msu-yellow);
  --msu-text-danger: var(--msu-red);
  --msu-text-info: var(--msu-blue);
  --msu-text-light: var(--msu-gray-light);
  --msu-text-dark: var(--msu-gray-dark);

  /* 4-H Colors */
  --fh-text-green: var(--fh-green);
  --fh-text-white: var(--msu-white);
  --fh-text-sunflower: var(--fh-sunflower);
  --fh-text-sky: var(--fh-sky);
  --fh-text-cherry-blossom: var(--fh-cherry-blossom);
  --fh-text-kale: var(--fh-kale);
  --fh-text-tomato: var(--fh-tomato);
  --fh-text-stone: var(--fh-stone);
}