:root {
  /* Colours */
  --color-white: #ffffff;
  --color-black: #000000;

  /* Text greys */
  --color-text: #282828;
  --color-text-alt: #595959;

  /* Grey backgrounds */
  --color-grey-mid-light: #d8d8d8;
  --color-grey-mid: #c4c4c4;
  --color-grey-dark: #6e6e6e;

  /* Neutral backgrounds */
  --color-grey-neutral-light: #f3f3f3;
  --color-grey-light: var(--color-grey-neutral-light);
  --color-grey-neutral-warm: #f5f5f0;
  --color-grey-neutral-cool: #dde9ed;
  --color-grey-neutral-cool-light: #f2f4f7;

  /* Links */
  --color-link: #00729a;
  --color-link-hover: #00394e;
  --color-link-focus: #8d44d8;
  --color-link-active: #002c3d;
  --color-link-visited: var(--color-link-active);
  /* Phasing out the '--' for modifiers as it causes issues with design token processing (EG lodash) */
  --color-link--hover: var(--color-link-hover);
  --color-link--focus: var(--color-link-focus);
  --color-link--active: var(--color-link-active);
  --color-link--visited: var(--color-link-active);

  /* Buttons */
  /* Primary green */
  --color-button-green-primary: #0f8482;
  --color-button-green-primary-hover: #1c6b6a;
  --color-button-green-primary-active: #124948;
  --color-button-primary: var(--color-button-green-primary);
  --color-button-primary--hover: var(--color-button-green-primary-hover);
  --color-button-primary--active: var(--color-button-green-primary-active);

  /* Blue button */
  --color-button-blue: #005878;
  --color-button-blue-hover: #003e55;
  --color-button-blue-active: #001f2b;
  --color-button-dark: var(--color-button-blue);
  --color-button-dark--hover: var(--color-button-blue-hover);
  --color-button-dark--active: var(--color-button-blue-active);

  /* Grey button */
  --color-button-grey: #efefef;
  --color-button-grey-hover: var(--color-grey-mid-light);
  --color-button-grey-active: var(--color-grey-mid);

  /* White button */
  --color-button-white: var(--color-white);
  --color-button-white-hover: var(--color-button-grey);
  --color-button-white-active: var(--color-grey-mid-light);

  /* default button */
  --color-button: var(--color-button-blue);
  --color-button--hover: var(--color-button-blue-hover);
  --color-button--active: var(--color-button-blue-active);

  /* Notifications */
  --color-red-error: #d12430;
  --color-red-error-light: #fcf1f1;
  --color-orange-alert: #f8d156;
  --color-orange-alert-light: #f8eec7;
  --color-green-success: #50811b;
  --color-green-success-light: #d7e3c6;
  --color-blue-inform: #0761c2;
  --color-blue-inform-light: #eef3fc;
  --color-blue-notification: var(--color-blue-inform);
  --color-blue-notification-light: var(--color-blue-inform-light);

  /* The numeric value at the end tallies to the lightness value of the colours in HSL to give some granularity to the system */
  /* Reds */
  --color-red-dark-4: #ba2327;
  --color-red-mid-5: #e20f14;
  --color-red-light-7: #ff6a6d;
  --color-red-light-8: #ffc1c3;
  --color-red-light-9: #ffdbdb;
  --color-red-light-10: #fcf1f1;
  --color-red-dark: var(--color-red-dark-4);
  --color-red-mid: var(--color-red-mid-5);

  /* Oranges */
  --color-orange-dark-4: #be4015;
  --color-orange-mid-5: #fc5724;
  --color-orange-mid-6: #fd7b3b;
  --color-orange-mid-7: #fd9c59;
  --color-orange-light-8: #fdb979;
  --color-orange-light-9: #fee7c1;
  --color-orange-light-10: #fff8e7;
  --color-orange-mid: var(--color-orange-mid-5);

  /* Yellows */
  --color-yellow-dark-4: #cfb214;
  --color-yellow-mid-5: #ffd309;
  --color-yellow-mid-6: #ffe53b;
  --color-yellow-mid-7: #fff372;
  --color-yellow-light-8: #fffca9;
  --color-yellow-light-9: #fffbcd;
  --color-yellow-light-10: #fcf9ee;
  --color-yellow-mid: var(--color-yellow-mid-5);
  --color-yellow-light: var(--color-yellow-mid-7);
  --color-yellow-bright: var(--color-yellow-mid-6);

  /* Greens */
  --color-green-dark-2: #3a6002;
  --color-green-mid-3: #4f820d;
  --color-green-mid-4: #72aa24;
  --color-green-mid-5: #96cb48;
  --color-green-light-6: #b9e277;
  --color-green-light-8: #e7f7cb;
  --color-green-light-10: #f6fce9;
  --color-green-dark: var(--color-green-dark-2);
  --color-green-mid: var(--color-green-mid-3);
  --color-green-light: var(--color-green-mid-5);
  --color-green-bright: var(--color-green-light-6);

  /* Teals */
  --color-teal-dark-2: #046062;
  --color-teal-mid-3: #0f8482;
  --color-teal-mid-4: #27aaab;
  --color-teal-mid-6: #4bc7cc;
  --color-teal-light-7: #79dce3;
  --color-teal-light-9: #ccf2f7;
  --color-teal-light-10: #e9fafc;
  --color-turquoise-dark: var(--color-teal-dark-2);
  --color-turquoise-mid: var(--color-teal-mid-3);
  --color-turquoise-light: var(--color-teal-light-7);
  --color-turquoise-bright: var(--color-teal-light-7);

  /* Blues */
  --color-blue-dark-3: #114d94;
  --color-blue-mid-4: #0761c2;
  --color-blue-mid-6: #519af5;
  --color-blue-light-8: #80b7ff;
  --color-blue-light-9: #cfe3ff;
  --color-blue-light-10: #eef3fc;
  --color-blue-dark: var(--color-blue-dark-3);
  --color-blue-bright: var(--color-blue-mid-6);
  --color-blue-light: var(--color-blue-light-9);
  --color-blue-mid: var(--color-blue-mid-4);

  /* Indigos */
  --color-indigo-dark-4: #3b427f;
  --color-indigo-mid-5: #4f52a8;
  --color-indigo-mid-7: #8d9ae4;
  --color-indigo-light-8: #afbdf5;
  --color-indigo-light-9: #cfdbfe;
  --color-indigo-light-10: #eff3fa;

  /* Purples */
  --color-purple-dark-3: #51178c;
  --color-purple-mid-4: #6727b9;
  --color-purple-mid-6: #8d44d8;
  --color-purple-light-8: #d395fe;
  --color-purple-light-9: #edc3ff;
  --color-purple-light-10: #f9edfc;
  --color-purple-dark: var(--color-purple-dark-3);

  /* Magentas */
  --color-magenta-dark-3: #812373;
  --color-magenta-mid-4: #ab278d;
  --color-magenta-mid-7: #f690f1;
  --color-magenta-light-8: #feb8ff;
  --color-magenta-light-9: #fad1fe;
  --color-magenta-light-10: #faeafc;
  --color-purple-mid: var(--color-magenta-mid-4);
  --color-pink-light: var(--color-magenta-mid-7);
  --color-pink-bright: var(--color-magenta-light-9);
}

        .coop-u-text {
  color: var(--color-text);
}
.coop-u-text-bg {
  background: var(--color-text);
}
.coop-u-text-fill {
  fill: var(--color-text);
}
.coop-u-text-alt {
  color: var(--color-text-alt);
}
.coop-u-text-alt-bg {
  background: var(--color-text-alt);
}
.coop-u-text-alt-fill {
  fill: var(--color-text-alt);
}

.coop-u-white {
  color: var(--color-white);
}
.coop-u-white-bg {
  background: var(--color-white);
}
.coop-u-white-fill {
  fill: var(--color-white);
}
.coop-u-white-stroke {
  stroke: var(--color-white);
  border-color: var(--color-white);
}
.coop-u-black {
  color: var(--color-black);
}
.coop-u-black-bg {
  background: var(--color-black);
}
.coop-u-black-fill {
  fill: var(--color-black);
}
.coop-u-black-stroke {
  stroke: var(--color-black);
  border-color: var(--color-black);
}

.coop-u-grey-light {
  color: var(--color-grey-light);
}
.coop-u-grey-light-bg {
  background: var(--color-grey-light);
}
.coop-u-grey-light-fill {
  fill: var(--color-grey-light);
}
.coop-u-grey-mid {
  color: var(--color-grey-mid);
}
.coop-u-grey-mid-bg {
  background: var(--color-grey-mid);
}
.coop-u-grey-mid-fill {
  fill: var(--color-grey-mid);
}
.coop-u-grey-mid-light-bg {
  background: var(--color-grey-mid-light);
}
.coop-u-grey-mid-light-fill {
  fill: var(--color-grey-mid-light);
}
.coop-u-grey-dark {
  color: var(--color-grey-dark);
}
.coop-u-grey-dark-bg {
  background: var(--color-grey-dark);
}
.coop-u-grey-dark-fill {
  fill: var(--color-grey-dark);
}
.coop-u-grey-neutral-light-bg {
  background: var(--color-grey-neutral-light);
}
.coop-u-grey-neutral-light-fill {
  fill: var(--color-grey-neutral-light);
}
.coop-u-grey-neutral-warm-bg {
  background: var(--color-grey-neutral-warm);
}
.coop-u-grey-neutral-warm-fill {
  fill: var(--color-grey-neutral-warm);
}
.coop-u-grey-neutral-cool-bg {
  background: var(--color-grey-neutral-cool);
}
.coop-u-grey-neutral-cool-fill {
  fill: var(--color-grey-neutral-cool);
}
.coop-u-grey-neutral-cool-light-bg {
  background: var(--color-grey-neutral-cool-light);
}
.coop-u-grey-neutral-cool-light-fill {
  fill: var(--color-grey-neutral-cool-light);
}

.coop-u-link-blue {
  color: var(--color-link);
}
.coop-u-link-blue-bg {
  background: var(--color-link);
}
.coop-u-link-blue-fill {
  fill: var(--color-link);
}
.coop-u-link-hover-blue {
  color: var(--color-link-hover);
}
.coop-u-link-hover-blue-bg {
  background: var(--color-link-hover);
}
.coop-u-link-hover-blue-fill {
  fill: var(--color-link-hover);
}
.coop-u-link-focus {
  color: var(--color-link-focus);
}
.coop-u-link-focus-bg {
  background: var(--color-link-focus);
}
.coop-u-link-focus-fill {
  fill: var(--color-link-focus);
}
.coop-u-link-focus-outline {
  outline: 4px solid var(--color-link-focus);
}

.coop-u-link-visited,
.coop-u-link-active {
  color: var(--color-link-visited);
}

.coop-u-link-visited-bg,
.coop-u-link-active-bg {
  background: var(--color-link-visited);
}
.coop-u-link-visited-fill,
.coop-u-link-active-fill {
  fill: var(--color-link-visited);
}

.coop-u-button-primary {
  color: var(--color-button-green-primary);
}
.coop-u-button-primary-bg {
  background: var(--color-button-green-primary);
}
.coop-u-button-primary-fill {
  fill: var(--color-button-green-primary);
}
.coop-u-button-primary-hover-bg {
  background: var(--color-button-green-primary-hover);
}
.coop-u-button-primary-hover-fill {
  fill: var(--color-button-green-primary-hover);
}
.coop-u-button-primary-active-bg {
  background: var(--color-button-green-primary-active);
}
.coop-u-button-primary-active-fill {
  fill: var(--color-button-green-primary-active);
}

.coop-u-button-dark,
.coop-u-button-blue {
  color: var(--color-button-blue);
}
.coop-u-button-dark-bg,
.coop-u-button-blue-bg {
  background: var(--color-button-blue);
}
.coop-u-button-blue-fill {
  fill: var(--color-button-blue);
}
.coop-u-button-dark-hover-bg,
.coop-u-button-blue-hover-bg {
  background: var(--color-button-blue-hover);
}
.coop-u-button-blue-hover-fill {
  fill: var(--color-button-blue-hover);
}
.coop-u-button-dark-active-bg,
.coop-u-button-blue-active-bg {
  background: var(--color-button-blue-active);
}
.coop-u-button-blue-active-fill {
  fill: var(--color-button-blue-active);
}

.coop-u-button-white-hover-bg {
  background: var(--color-button-white-hover);
}
.coop-u-button-white-hover-fill {
  fill: var(--color-button-white-hover);
}

.coop-u-button-grey-bg {
  background: var(--color-button-grey);
}
.coop-u-button-grey-fill {
  fill: var(--color-button-grey);
}

.coop-u-red-dark-4,
.coop-u-red-dark {
  color: var(--color-red-dark-4);
}
.coop-u-red-dark-4-bg,
.coop-u-red-dark-bg {
  background: var(--color-red-dark-4);
}
.coop-u-red-dark-4-fill,
.coop-u-red-dark-fill {
  fill: var(--color-red-dark-4);
}
.coop-u-red-mid-5,
.coop-u-red-mid {
  color: var(--color-red-mid-5);
}
.coop-u-red-mid-5-bg,
.coop-u-red-mid-bg {
  background: var(--color-red-mid-5);
}
.coop-u-red-mid-5-fill,
.coop-u-red-mid-fill {
  fill: var(--color-red-mid-5);
}
.coop-u-red-light-7 {
  color: var(--color-red-light-7);
}
.coop-u-red-light-7-bg {
  background: var(--color-red-light-7);
}
.coop-u-red-light-7-fill {
  fill: var(--color-red-light-7);
}
.coop-u-red-light-8 {
  color: var(--color-red-light-8);
}
.coop-u-red-light-8-bg {
  background: var(--color-red-light-8);
}
.coop-u-red-light-8-fill {
  fill: var(--color-red-light-8);
}
.coop-u-red-light-9 {
  color: var(--color-red-light-9);
}
.coop-u-red-light-9-bg {
  background: var(--color-red-light-9);
}
.coop-u-red-light-9-fill {
  fill: var(--color-red-light-9);
}
.coop-u-red-light-10 {
  color: var(--color-red-light-10);
}
.coop-u-red-light-10-bg {
  background: var(--color-red-light-10);
}
.coop-u-red-light-10-fill {
  fill: var(--color-red-light-10);
}

.coop-u-orange-dark-4 {
  color: var(--color-orange-dark-4);
}
.coop-u-orange-dark-4-bg {
  background: var(--color-orange-dark-4);
}
.coop-u-orange-dark-4-fill {
  fill: var(--color-orange-dark-4);
}
.coop-u-orange-mid-5,
.coop-u-orange-mid {
  color: var(--color-orange-mid-5);
}
.coop-u-orange-mid-5-bg,
.coop-u-orange-mid-bg {
  background: var(--color-orange-mid-5);
}
.coop-u-orange-mid-5-fill,
.coop-u-orange-mid-fill {
  fill: var(--color-orange-mid-5);
}
.coop-u-orange-mid-6 {
  color: var(--color-orange-mid-6);
}
.coop-u-orange-mid-6-bg {
  background: var(--color-orange-mid-6);
}
.coop-u-orange-mid-6-fill {
  fill: var(--color-orange-mid-6);
}
.coop-u-orange-mid-7 {
  color: var(--color-orange-mid-7);
}
.coop-u-orange-mid-7-bg {
  background: var(--color-orange-mid-7);
}
.coop-u-orange-mid-7-fill {
  fill: var(--color-orange-mid-7);
}
.coop-u-orange-light-8 {
  color: var(--color-orange-light-8);
}
.coop-u-orange-light-8-bg {
  background: var(--color-orange-light-8);
}
.coop-u-orange-light-8-fill {
  fill: var(--color-orange-light-8);
}
.coop-u-orange-light-9 {
  color: var(--color-orange-light-9);
}
.coop-u-orange-light-9-bg {
  background: var(--color-orange-light-9);
}
.coop-u-orange-light-9-fill {
  fill: var(--color-orange-light-9);
}
.coop-u-orange-light-10 {
  color: var(--color-orange-light-10);
}
.coop-u-orange-light-10-bg {
  background: var(--color-orange-light-10);
}
.coop-u-orange-light-10-fill {
  fill: var(--color-orange-light-10);
}

.coop-u-yellow-dark-4 {
  color: var(--color-yellow-dark-4);
}
.coop-u-yellow-dark-4-bg {
  background: var(--color-yellow-dark-4);
}
.coop-u-yellow-dark-4-fill {
  fill: var(--color-yellow-dark-4);
}
.coop-u-yellow-mid-5,
.coop-u-yellow-mid {
  color: var(--color-yellow-mid-5);
}
.coop-u-yellow-mid-5-bg,
.coop-u-yellow-mid-bg {
  background: var(--color-yellow-mid-5);
}
.coop-u-yellow-mid-5-fill,
.coop-u-yellow-mid-fill {
  fill: var(--color-yellow-mid-5);
}
.coop-u-yellow-mid-6,
.coop-u-yellow-bright {
  color: var(--color-yellow-mid-6);
}
.coop-u-yellow-mid-6-bg,
.coop-u-yellow-bright-bg {
  background: var(--color-yellow-mid-6);
}
.coop-u-yellow-mid-6-fill,
.coop-u-yellow-bright-fill {
  fill: var(--color-yellow-mid-6);
}
.coop-u-yellow-mid-7,
.coop-u-yellow-light {
  color: var(--color-yellow-mid-7);
}
.coop-u-yellow-mid-7-bg,
.coop-u-yellow-light-bg {
  background: var(--color-yellow-mid-7);
}
.coop-u-yellow-mid-7-fill,
.coop-u-yellow-light-fill {
  fill: var(--color-yellow-mid-7);
}
.coop-u-yellow-light-8 {
  color: var(--color-yellow-light-8);
}
.coop-u-yellow-light-8-bg {
  background: var(--color-yellow-light-8);
}
.coop-u-yellow-light-8-fill {
  fill: var(--color-yellow-light-8);
}
.coop-u-yellow-light-9 {
  color: var(--color-yellow-light-9);
}
.coop-u-yellow-light-9-bg {
  background: var(--color-yellow-light-9);
}
.coop-u-yellow-light-9-fill {
  fill: var(--color-yellow-light-9);
}
.coop-u-yellow-light-10 {
  color: var(--color-yellow-light-10);
}
.coop-u-yellow-light-10-bg {
  background: var(--color-yellow-light-10);
}
.coop-u-yellow-light-10-fill {
  fill: var(--color-yellow-light-10);
}

.coop-u-green-dark-2,
.coop-u-green-dark {
  color: var(--color-green-dark-2);
}
.coop-u-green-dark-2-bg,
.coop-u-green-dark-bg {
  background: var(--color-green-dark-2);
}
.coop-u-green-dark-2-fill,
.coop-u-green-dark-fill {
  fill: var(--color-green-dark-2);
}
.coop-u-green-mid-3,
.coop-u-green-mid {
  color: var(--color-green-mid-3);
}
.coop-u-green-mid-3-bg,
.coop-u-green-mid-bg {
  background: var(--color-green-mid-3);
}
.coop-u-green-mid-3-fill,
.coop-u-green-mid-fill {
  fill: var(--color-green-mid-3);
}
.coop-u-green-mid-4 {
  color: var(--color-green-mid-4);
}
.coop-u-green-mid-4-bg {
  background: var(--color-green-mid-4);
}
.coop-u-green-mid-4-fill {
  fill: var(--color-green-mid-4);
}
.coop-u-green-mid-5,
.coop-u-green-light {
  color: var(--color-green-mid-5);
}
.coop-u-green-mid-5-bg,
.coop-u-green-light-bg {
  background: var(--color-green-mid-5);
}
.coop-u-green-mid-5-fill,
.coop-u-green-light-fill {
  fill: var(--color-green-mid-5);
}
.coop-u-green-light-6,
.coop-u-green-bright {
  color: var(--color-green-light-6);
}
.coop-u-green-light-6-bg,
.coop-u-green-bright-bg {
  background: var(--color-green-light-6);
}
.coop-u-green-light-6-fill,
.coop-u-green-bright-fill {
  fill: var(--color-green-light-6);
}
.coop-u-green-light-8 {
  color: var(--color-green-light-8);
}
.coop-u-green-light-8-bg {
  background: var(--color-green-light-8);
}
.coop-u-green-light-8-fill {
  fill: var(--color-green-light-8);
}
.coop-u-green-light-10 {
  color: var(--color-green-light-10);
}
.coop-u-green-light-10-bg {
  background: var(--color-green-light-10);
}
.coop-u-green-light-10-fill {
  fill: var(--color-green-light-10);
}

.coop-u-teal-dark-2,
.coop-u-green-blue-dark {
  color: var(--color-teal-dark-2);
}
.coop-u-teal-dark-2-bg,
.coop-u-green-blue-dark-bg {
  background: var(--color-teal-dark-2);
}
.coop-u-teal-dark-2-fill,
.coop-u-green-blue-dark-fill {
  fill: var(--color-teal-dark-2);
}
.coop-u-teal-mid-3,
.coop-u-green-blue-mid {
  color: var(--color-teal-mid-3);
}
.coop-u-teal-mid-3-bg,
.coop-u-green-blue-mid-bg {
  background: var(--color-teal-mid-3);
}
.coop-u-teal-mid-3-fill,
.coop-u-green-blue-mid-fill {
  fill: var(--color-teal-mid-3);
}
.coop-u-teal-mid-4 {
  color: var(--color-teal-mid-4);
}
.coop-u-teal-mid-4-bg {
  background: var(--color-teal-mid-4);
}
.coop-u-teal-mid-4-fill {
  fill: var(--color-teal-mid-4);
}
.coop-u-teal-mid-6 {
  color: var(--color-teal-mid-6);
}
.coop-u-teal-mid-6-bg {
  background: var(--color-teal-mid-6);
}
.coop-u-teal-mid-6-fill {
  fill: var(--color-teal-mid-6);
}
.coop-u-teal-light-7,
.coop-u-green-blue-bright,
.coop-u-green-blue-light {
  color: var(--color-teal-light-7);
}
.coop-u-teal-light-7-bg,
.coop-u-green-blue-bright-bg,
.coop-u-green-blue-light-bg {
  background: var(--color-teal-light-7);
}
.coop-u-teal-light-7-fill,
.coop-u-green-blue-bright-fill,
.coop-u-green-blue-light-fill {
  fill: var(--color-teal-light-7);
}
.coop-u-teal-light-9 {
  color: var(--color-teal-light-9);
}
.coop-u-teal-light-9-bg {
  background: var(--color-teal-light-9);
}
.coop-u-teal-light-9-fill {
  fill: var(--color-teal-light-9);
}
.coop-u-teal-light-10 {
  color: var(--color-teal-light-10);
}
.coop-u-teal-light-10-bg {
  background: var(--color-teal-light-10);
}
.coop-u-teal-light-10-fill {
  fill: var(--color-teal-light-10);
}

.coop-u-blue-dark-3,
.coop-u-blue-dark {
  color: var(--color-blue-dark-3);
}
.coop-u-blue-dark-3-bg,
.coop-u-blue-dark-bg {
  background: var(--color-blue-dark-3);
}
.coop-u-blue-dark-3-fill,
.coop-u-blue-dark-fill {
  fill: var(--color-blue-dark-3);
}
.coop-u-blue-mid-4,
.coop-u-blue-mid {
  color: var(--color-blue-mid-4);
}
.coop-u-blue-mid-4-bg,
.coop-u-blue-mid-bg {
  background: var(--color-blue-mid-4);
}
.coop-u-blue-mid-4-fill,
.coop-u-blue-mid-fill {
  fill: var(--color-blue-mid-4);
}
.coop-u-blue-mid-6,
.coop-u-blue-bright {
  color: var(--color-blue-mid-6);
}
.coop-u-blue-mid-6-bg,
.coop-u-blue-bright-bg {
  background: var(--color-blue-mid-6);
}
.coop-u-blue-mid-6-fill,
.coop-u-blue-bright-fill {
  fill: var(--color-blue-mid-6);
}
.coop-u-blue-light-8 {
  color: var(--color-blue-light-8);
}
.coop-u-blue-light-8-bg {
  background: var(--color-blue-light-8);
}
.coop-u-blue-light-8-fill {
  fill: var(--color-blue-light-8);
}
.coop-u-blue-light-9,
.coop-u-blue-light {
  color: var(--color-blue-light-9);
}
.coop-u-blue-light-9-bg,
.coop-u-blue-light-bg {
  background: var(--color-blue-light-9);
}
.coop-u-blue-light-9-fill,
.coop-u-blue-light-fill {
  fill: var(--color-blue-light-9);
}
.coop-u-blue-light-10 {
  color: var(--color-blue-light-10);
}
.coop-u-blue-light-10-bg {
  background: var(--color-blue-light-10);
}
.coop-u-blue-light-10-fill {
  fill: var(--color-blue-light-10);
}

.coop-u-indigo-dark-4 {
  color: var(--color-indigo-dark-4);
}
.coop-u-indigo-dark-4-bg {
  background: var(--color-indigo-dark-4);
}
.coop-u-indigo-dark-4-fill {
  fill: var(--color-indigo-dark-4);
}
.coop-u-indigo-mid-5 {
  color: var(--color-indigo-mid-5);
}
.coop-u-indigo-mid-5-bg {
  background: var(--color-indigo-mid-5);
}
.coop-u-indigo-mid-5-fill {
  fill: var(--color-indigo-mid-5);
}
.coop-u-indigo-mid-7 {
  color: var(--color-indigo-mid-7);
}
.coop-u-indigo-mid-7-bg {
  background: var(--color-indigo-mid-7);
}
.coop-u-indigo-mid-7-fill {
  fill: var(--color-indigo-mid-7);
}
.coop-u-indigo-light-8 {
  color: var(--color-indigo-light-8);
}
.coop-u-indigo-light-8-bg {
  background: var(--color-indigo-light-8);
}
.coop-u-indigo-light-8-fill {
  fill: var(--color-indigo-light-8);
}
.coop-u-indigo-light-9 {
  color: var(--color-indigo-light-9);
}
.coop-u-indigo-light-9-bg {
  background: var(--color-indigo-light-9);
}
.coop-u-indigo-light-9-fill {
  fill: var(--color-indigo-light-9);
}
.coop-u-indigo-light-10 {
  color: var(--color-indigo-light-10);
}
.coop-u-indigo-light-10-bg {
  background: var(--color-indigo-light-10);
}
.coop-u-indigo-light-10-fill {
  fill: var(--color-indigo-light-10);
}

.coop-u-purple-dark-3,
.coop-u-purple-dark {
  color: var(--color-purple-dark-3);
}
.coop-u-purple-dark-3-bg,
.coop-u-purple-dark-bg {
  background: var(--color-purple-dark-3);
}
.coop-u-purple-dark-3-fill,
.coop-u-purple-dark-fill {
  fill: var(--color-purple-dark-3);
}
.coop-u-purple-mid-4 {
  color: var(--color-purple-mid-4);
}
.coop-u-purple-mid-4-bg {
  background: var(--color-purple-mid-4);
}
.coop-u-purple-mid-4-fill {
  fill: var(--color-purple-mid-4);
}
.coop-u-purple-mid-6 {
  color: var(--color-purple-mid-6);
}
.coop-u-purple-mid-6-bg {
  background: var(--color-purple-mid-6);
}
.coop-u-purple-mid-6-fill {
  fill: var(--color-purple-mid-6);
}
.coop-u-purple-light-8 {
  color: var(--color-purple-light-8);
}
.coop-u-purple-light-8-bg {
  background: var(--color-purple-light-8);
}
.coop-u-purple-light-8-fill {
  fill: var(--color-purple-light-8);
}
.coop-u-purple-light-9 {
  color: var(--color-purple-light-9);
}
.coop-u-purple-light-9-bg {
  background: var(--color-purple-light-9);
}
.coop-u-purple-light-9-fill {
  fill: var(--color-purple-light-9);
}
.coop-u-purple-light-10 {
  color: var(--color-purple-light-10);
}
.coop-u-purple-light-10-bg {
  background: var(--color-purple-light-10);
}
.coop-u-purple-light-10-fill {
  fill: var(--color-purple-light-10);
}

.coop-u-magenta-dark-3 {
  color: var(--color-magenta-dark-3);
}
.coop-u-magenta-dark-3-bg {
  background: var(--color-magenta-dark-3);
}
.coop-u-magenta-dark-3-fill {
  fill: var(--color-magenta-dark-3);
}
.coop-u-magenta-mid-4,
.coop-u-purple-mid {
  color: var(--color-magenta-mid-4);
}
.coop-u-magenta-mid-4-bg,
.coop-u-purple-mid-bg {
  background: var(--color-magenta-mid-4);
}
.coop-u-magenta-mid-4-fill,
.coop-u-purple-mid-fill {
  fill: var(--color-magenta-mid-4);
}
.coop-u-magenta-mid-7,
.coop-u-pink-light {
  color: var(--color-magenta-mid-7);
}
.coop-u-magenta-mid-7-bg,
.coop-u-pink-light-bg {
  background: var(--color-magenta-mid-7);
}
.coop-u-magenta-mid-7-fill,
.coop-u-pink-light-fill {
  fill: var(--color-magenta-mid-7);
}
.coop-u-magenta-light-8,
.coop-u-pink-bright {
  color: var(--color-magenta-light-8);
}
.coop-u-magenta-light-8-bg,
.coop-u-pink-bright-bg {
  background: var(--color-magenta-light-8);
}
.coop-u-magenta-light-8-fill,
.coop-u-pink-bright-fill {
  fill: var(--color-magenta-light-8);
}
.coop-u-magenta-light-9 {
  color: var(--color-magenta-light-9);
}
.coop-u-magenta-light-9-bg {
  background: var(--color-magenta-light-9);
}
.coop-u-magenta-light-9-fill {
  fill: var(--color-magenta-light-9);
}
.coop-u-magenta-light-10 {
  color: var(--color-magenta-light-10);
}
.coop-u-magenta-light-10-bg {
  background: var(--color-magenta-light-10);
}
.coop-u-magenta-light-10-fill {
  fill: var(--color-magenta-light-10);
}