/* Background Colour Utilities */
:root {
  /* UI Components */
  --card-gray: #f6f8fb;
  --card-gray-hover: #EDF0F7;
  --faded-card-bgcolor: #fafafb;
  --feeback-card-bgcolor: #fafafb;

  /* Borders */
  --faded-card-border: #8ba4cc;
  --card-border: #52608f;
  --feedback-card-border: #b4b9d2;
  --contact-card-border: #d4d6e5;

  /* Disruptions */
  --faded-card-border-disruption: #ffdd77;
  --card-border-disruption: #ffc107;

  /* Primary Colours */
  --primary-100: #004478;
  --primary-90: #004d87;
  --primary-80: #005596;
  --primary-70: #1966a1;
  --primary-60: #3377ab;
  --primary-50: #4d88b6;
  --primary-40: #6699c0;
  --primary-30: #80aacb;
  --primary-20: #99bbd5;
  --primary-10: #b3cce0;

  /* Secondary Colours */
  --secondary-100: #001537;
  --secondary-90: #00173e;
  --secondary-80: #001c47;
  --secondary-70: #1a2a59;
  --secondary-60: #33386b;
  --secondary-50: #4d467c;
  --secondary-40: #66658e;
  --secondary-30: #8083a0;
  --secondary-20: #9992b1;
  --secondary-10: #b3b1c3;

  /* Success Colours */
  --success-100: #01614f;
  --success-90: #016954;
  --success-80: #017f65;
  --success-70: #339f86;
  --success-60: #4da89a;
  --success-50: #66b3ad;
  --success-40: #80c1bf;
  --success-30: #99cfd2;
  --success-20: #b3ddd5;
  --success-10: #ccedea;

  /* Error Colours */
  --error-100: #a0042d;
  --error-90: #b10635;
  --error-80: #ce0538;
  --error-70: #d7265a;
  --error-60: #df477b;
  --error-50: #e6689c;
  --error-40: #ee89bd;
  --error-30: #f5aacd;
  --error-20: #facbdd;
  --error-10: #ffeced;

  /* Alert Colours */
  --alert-100: #cc9d06;
  --alert-90: #d7a507;
  --alert-80: #ffc107;
  --alert-70: #ffce33;
  --alert-60: #ffd94d;
  --alert-50: #ffe066;
  --alert-40: #ffe680;
  --alert-30: #ffeb99;
  --alert-20: #fff0b3;
  --alert-10: #fff5cc;

  /* Teal Colours */
  --teal-100: #003e3a;
  --teal-90: #004b4a;
  --teal-80: #005f5a;
  --teal-70: #009c92;
  --teal-60: #00b2a6;
  --teal-50: #00c3b6;
  --teal-40: #00d4c3;
  --teal-30: #a4e3e1;
  --teal-20: #b2e5e2;
  --teal-10: #d1f3f1;

  /* Berry Colours */
  --berry-100: #3e205f;
  --berry-90: #452369;
  --berry-80: #4f297a;
  --berry-70: #654389;
  --berry-60: #7b5d98;
  --berry-50: #9177a7;
  --berry-40: #a792b5;
  --berry-30: #bdafc4;
  --berry-20: #d3cad3;
  --berry-10: #e8e5e1;

  /* Plum Colours */
  --plum-100: #631f68;
  --plum-90: #6c2272;
  --plum-80: #78287c;
  --plum-70: #8b4c8e;
  --plum-60: #9f70a1;
  --plum-50: #b393b3;
  --plum-40: #c7b7c6;
  --plum-30: #dbcbd8;
  --plum-20: #efefea;
  --plum-10: #f4f4f3;

  /* Aqua Colours */
  --aqua-100: #29b0b4;
  --aqua-90: #2bbdc6;
  --aqua-80: #2ecee8;
  --aqua-70: #54d4ec;
  --aqua-60: #6bdbef;
  --aqua-50: #81e2f3;
  --aqua-40: #98e9f7;
  --aqua-30: #aeeffd;
  --aqua-20: #c5f5fd;
  --aqua-10: #dbfbfe;

  /* Orange Colours */
  --orange-100: #c46400;
  --orange-90: #d46e00;
  --orange-80: #f57c00;
  --orange-70: #f69133;
  --orange-60: #f9a64d;
  --orange-50: #fbb866;
  --orange-40: #fdca80;
  --orange-30: #fedc99;
  --orange-20: #ffe1b3;
  --orange-10: #fff0cc;

  /* Buttercup Colours */
  --buttercup-100: #ccae39;
  --buttercup-90: #e0c241;
  --buttercup-80: #ffe083;
  --buttercup-70: #ffe29e;
  --buttercup-60: #ffe4b8;
  --buttercup-50: #ffe7d1;
  --buttercup-40: #ffeaef;
  --buttercup-30: #ffeff2;
  --buttercup-20: #fff4f5;
  --buttercup-10: #fff9f8;

  /* State Colours */
  --states-positive: #009c92;
  --states-negative: #ee89bd;
}
/* White Background */
.background-white { background: white; }
.background-white-hover:hover { background: white; }
.background-white-focus:focus { background: white; }
.background-white-active:active { background: white; }

/* White Text */
.text-white { color: white; }
.text-white-hover:hover { color: white; }
.text-white-focus:focus { color: white; }
.text-white-active:active { color: white; }

/* Black Background */
.background-black { background: black; }
.background-black-hover:hover { background: black; }
.background-black-focus:focus { background: black; }
.background-black-active:active { background: black; }

/* Black Text */
.text-black { color: black; }
.text-black-hover:hover { color: black; }
.text-black-focus:focus { color: black; }
.text-black-active:active { color: black; }





/* --- All colours as Text and Background with each state */
/* Primary */
/* Background */
.background-primary { background-color: var(--primary-80); }
.background-primary-hover:hover { background-color: var(--primary-80); }
.background-primary-focus:focus { background-color: var(--primary-80); }
.background-primary-active:active { background-color: var(--primary-80); }

.background-primary-100 { background-color: var(--primary-100); }
.background-primary-100-hover:hover { background-color: var(--primary-100); }
.background-primary-100-focus:focus { background-color: var(--primary-100); }
.background-primary-100-active:active { background-color: var(--primary-100); }

.background-primary-90 { background-color: var(--primary-90); }
.background-primary-90-hover:hover { background-color: var(--primary-90); }
.background-primary-90-focus:focus { background-color: var(--primary-90); }
.background-primary-90-active:active { background-color: var(--primary-90); }

.background-primary-70 { background-color: var(--primary-70); }
.background-primary-70-hover:hover { background-color: var(--primary-70); }
.background-primary-70-focus:focus { background-color: var(--primary-70); }
.background-primary-70-active:active { background-color: var(--primary-70); }

.background-primary-60 { background-color: var(--primary-60); }
.background-primary-60-hover:hover { background-color: var(--primary-60); }
.background-primary-60-focus:focus { background-color: var(--primary-60); }
.background-primary-60-active:active { background-color: var(--primary-60); }

.background-primary-50 { background-color: var(--primary-50); }
.background-primary-50-hover:hover { background-color: var(--primary-50); }
.background-primary-50-focus:focus { background-color: var(--primary-50); }
.background-primary-50-active:active { background-color: var(--primary-50); }

.background-primary-40 { background-color: var(--primary-40); }
.background-primary-40-hover:hover { background-color: var(--primary-40); }
.background-primary-40-focus:focus { background-color: var(--primary-40); }
.background-primary-40-active:active { background-color: var(--primary-40); }

.background-primary-30 { background-color: var(--primary-30); }
.background-primary-30-hover:hover { background-color: var(--primary-30); }
.background-primary-30-focus:focus { background-color: var(--primary-30); }
.background-primary-30-active:active { background-color: var(--primary-30); }

.background-primary-20 { background-color: var(--primary-20); }
.background-primary-20-hover:hover { background-color: var(--primary-20); }
.background-primary-20-focus:focus { background-color: var(--primary-20); }
.background-primary-20-active:active { background-color: var(--primary-20); }

.background-primary-10 { background-color: var(--primary-10); }
.background-primary-10-hover:hover { background-color: var(--primary-10); }
.background-primary-10-focus:focus { background-color: var(--primary-10); }
.background-primary-10-active:active { background-color: var(--primary-10); }

/* Text */
.text-primary { color: var(--primary-80); }
.text-primary-hover:hover { color: var(--primary-80); }
.text-primary-focus:focus { color: var(--primary-80); }
.text-primary-active:active { color: var(--primary-80); }

.text-primary-100 { color: var(--primary-100); }
.text-primary-100-hover:hover { color: var(--primary-100); }
.text-primary-100-focus:focus { color: var(--primary-100); }
.text-primary-100-active:active { color: var(--primary-100); }

.text-primary-90 { color: var(--primary-90); }
.text-primary-90-hover:hover { color: var(--primary-90); }
.text-primary-90-focus:focus { color: var(--primary-90); }
.text-primary-90-active:active { color: var(--primary-90); }

.text-primary-70 { color: var(--primary-70); }
.text-primary-70-hover:hover { color: var(--primary-70); }
.text-primary-70-focus:focus { color: var(--primary-70); }
.text-primary-70-active:active { color: var(--primary-70); }

.text-primary-60 { color: var(--primary-60); }
.text-primary-60-hover:hover { color: var(--primary-60); }
.text-primary-60-focus:focus { color: var(--primary-60); }
.text-primary-60-active:active { color: var(--primary-60); }

.text-primary-50 { color: var(--primary-50); }
.text-primary-50-hover:hover { color: var(--primary-50); }
.text-primary-50-focus:focus { color: var(--primary-50); }
.text-primary-50-active:active { color: var(--primary-50); }

.text-primary-40 { color: var(--primary-40); }
.text-primary-40-hover:hover { color: var(--primary-40); }
.text-primary-40-focus:focus { color: var(--primary-40); }
.text-primary-40-active:active { color: var(--primary-40); }

.text-primary-30 { color: var(--primary-30); }
.text-primary-30-hover:hover { color: var(--primary-30); }
.text-primary-30-focus:focus { color: var(--primary-30); }
.text-primary-30-active:active { color: var(--primary-30); }

.text-primary-20 { color: var(--primary-20); }
.text-primary-20-hover:hover { color: var(--primary-20); }
.text-primary-20-focus:focus { color: var(--primary-20); }
.text-primary-20-active:active { color: var(--primary-20); }

.text-primary-10 { color: var(--primary-10); }
.text-primary-10-hover:hover { color: var(--primary-10); }
.text-primary-10-focus:focus { color: var(--primary-10); }
.text-primary-10-active:active { color: var(--primary-10); }

/* Secondary */
/* Background */
.background-secondary { background-color: var(--secondary-80); }
.background-secondary-hover:hover { background-color: var(--secondary-80); }
.background-secondary-focus:focus { background-color: var(--secondary-80); }
.background-secondary-active:active { background-color: var(--secondary-80); }

.background-secondary-100 { background-color: var(--secondary-100); }
.background-secondary-100-hover:hover { background-color: var(--secondary-100); }
.background-secondary-100-focus:focus { background-color: var(--secondary-100); }
.background-secondary-100-active:active { background-color: var(--secondary-100); }

.background-secondary-90 { background-color: var(--secondary-90); }
.background-secondary-90-hover:hover { background-color: var(--secondary-90); }
.background-secondary-90-focus:focus { background-color: var(--secondary-90); }
.background-secondary-90-active:active { background-color: var(--secondary-90); }

.background-secondary-70 { background-color: var(--secondary-70); }
.background-secondary-70-hover:hover { background-color: var(--secondary-70); }
.background-secondary-70-focus:focus { background-color: var(--secondary-70); }
.background-secondary-70-active:active { background-color: var(--secondary-70); }

.background-secondary-60 { background-color: var(--secondary-60); }
.background-secondary-60-hover:hover { background-color: var(--secondary-60); }
.background-secondary-60-focus:focus { background-color: var(--secondary-60); }
.background-secondary-60-active:active { background-color: var(--secondary-60); }

.background-secondary-50 { background-color: var(--secondary-50); }
.background-secondary-50-hover:hover { background-color: var(--secondary-50); }
.background-secondary-50-focus:focus { background-color: var(--secondary-50); }
.background-secondary-50-active:active { background-color: var(--secondary-50); }

.background-secondary-40 { background-color: var(--secondary-40); }
.background-secondary-40-hover:hover { background-color: var(--secondary-40); }
.background-secondary-40-focus:focus { background-color: var(--secondary-40); }
.background-secondary-40-active:active { background-color: var(--secondary-40); }

.background-secondary-30 { background-color: var(--secondary-30); }
.background-secondary-30-hover:hover { background-color: var(--secondary-30); }
.background-secondary-30-focus:focus { background-color: var(--secondary-30); }
.background-secondary-30-active:active { background-color: var(--secondary-30); }

.background-secondary-20 { background-color: var(--secondary-20); }
.background-secondary-20-hover:hover { background-color: var(--secondary-20); }
.background-secondary-20-focus:focus { background-color: var(--secondary-20); }
.background-secondary-20-active:active { background-color: var(--secondary-20); }

.background-secondary-10 { background-color: var(--secondary-10); }
.background-secondary-10-hover:hover { background-color: var(--secondary-10); }
.background-secondary-10-focus:focus { background-color: var(--secondary-10); }
.background-secondary-10-active:active { background-color: var(--secondary-10); }

/* Text */
.text-secondary { color: var(--secondary-80); }
.text-secondary-hover:hover { color: var(--secondary-80); }
.text-secondary-focus:focus { color: var(--secondary-80); }
.text-secondary-active:active { color: var(--secondary-80); }

.text-secondary-100 { color: var(--secondary-100); }
.text-secondary-100-hover:hover { color: var(--secondary-100); }
.text-secondary-100-focus:focus { color: var(--secondary-100); }
.text-secondary-100-active:active { color: var(--secondary-100); }

.text-secondary-90 { color: var(--secondary-90); }
.text-secondary-90-hover:hover { color: var(--secondary-90); }
.text-secondary-90-focus:focus { color: var(--secondary-90); }
.text-secondary-90-active:active { color: var(--secondary-90); }

.text-secondary-70 { color: var(--secondary-70); }
.text-secondary-70-hover:hover { color: var(--secondary-70); }
.text-secondary-70-focus:focus { color: var(--secondary-70); }
.text-secondary-70-active:active { color: var(--secondary-70); }

.text-secondary-60 { color: var(--secondary-60); }
.text-secondary-60-hover:hover { color: var(--secondary-60); }
.text-secondary-60-focus:focus { color: var(--secondary-60); }
.text-secondary-60-active:active { color: var(--secondary-60); }

.text-secondary-50 { color: var(--secondary-50); }
.text-secondary-50-hover:hover { color: var(--secondary-50); }
.text-secondary-50-focus:focus { color: var(--secondary-50); }
.text-secondary-50-active:active { color: var(--secondary-50); }

.text-secondary-40 { color: var(--secondary-40); }
.text-secondary-40-hover:hover { color: var(--secondary-40); }
.text-secondary-40-focus:focus { color: var(--secondary-40); }
.text-secondary-40-active:active { color: var(--secondary-40); }

.text-secondary-30 { color: var(--secondary-30); }
.text-secondary-30-hover:hover { color: var(--secondary-30); }
.text-secondary-30-focus:focus { color: var(--secondary-30); }
.text-secondary-30-active:active { color: var(--secondary-30); }

.text-secondary-20 { color: var(--secondary-20); }
.text-secondary-20-hover:hover { color: var(--secondary-20); }
.text-secondary-20-focus:focus { color: var(--secondary-20); }
.text-secondary-20-active:active { color: var(--secondary-20); }

.text-secondary-10 { color: var(--secondary-10); }
.text-secondary-10-hover:hover { color: var(--secondary-10); }
.text-secondary-10-focus:focus { color: var(--secondary-10); }
.text-secondary-10-active:active { color: var(--secondary-10); }

/* Success */
/* Background */
.background-success { background-color: var(--success-80); }
.background-success-hover:hover { background-color: var(--success-80); }
.background-success-focus:focus { background-color: var(--success-80); }
.background-success-active:active { background-color: var(--success-80); }

.background-success-100 { background-color: var(--success-100); }
.background-success-100-hover:hover { background-color: var(--success-100); }
.background-success-100-focus:focus { background-color: var(--success-100); }
.background-success-100-active:active { background-color: var(--success-100); }

.background-success-90 { background-color: var(--success-90); }
.background-success-90-hover:hover { background-color: var(--success-90); }
.background-success-90-focus:focus { background-color: var(--success-90); }
.background-success-90-active:active { background-color: var(--success-90); }

.background-success-70 { background-color: var(--success-70); }
.background-success-70-hover:hover { background-color: var(--success-70); }
.background-success-70-focus:focus { background-color: var(--success-70); }
.background-success-70-active:active { background-color: var(--success-70); }

.background-success-60 { background-color: var(--success-60); }
.background-success-60-hover:hover { background-color: var(--success-60); }
.background-success-60-focus:focus { background-color: var(--success-60); }
.background-success-60-active:active { background-color: var(--success-60); }

.background-success-50 { background-color: var(--success-50); }
.background-success-50-hover:hover { background-color: var(--success-50); }
.background-success-50-focus:focus { background-color: var(--success-50); }
.background-success-50-active:active { background-color: var(--success-50); }

.background-success-40 { background-color: var(--success-40); }
.background-success-40-hover:hover { background-color: var(--success-40); }
.background-success-40-focus:focus { background-color: var(--success-40); }
.background-success-40-active:active { background-color: var(--success-40); }

.background-success-30 { background-color: var(--success-30); }
.background-success-30-hover:hover { background-color: var(--success-30); }
.background-success-30-focus:focus { background-color: var(--success-30); }
.background-success-30-active:active { background-color: var(--success-30); }

.background-success-20 { background-color: var(--success-20); }
.background-success-20-hover:hover { background-color: var(--success-20); }
.background-success-20-focus:focus { background-color: var(--success-20); }
.background-success-20-active:active { background-color: var(--success-20); }

.background-success-10 { background-color: var(--success-10); }
.background-success-10-hover:hover { background-color: var(--success-10); }
.background-success-10-focus:focus { background-color: var(--success-10); }
.background-success-10-active:active { background-color: var(--success-10); }

/* Text */
.text-success { color: var(--success-80); }
.text-success-hover:hover { color: var(--success-80); }
.text-success-focus:focus { color: var(--success-80); }
.text-success-active:active { color: var(--success-80); }

.text-success-100 { color: var(--success-100); }
.text-success-100-hover:hover { color: var(--success-100); }
.text-success-100-focus:focus { color: var(--success-100); }
.text-success-100-active:active { color: var(--success-100); }

.text-success-90 { color: var(--success-90); }
.text-success-90-hover:hover { color: var(--success-90); }
.text-success-90-focus:focus { color: var(--success-90); }
.text-success-90-active:active { color: var(--success-90); }

.text-success-70 { color: var(--success-70); }
.text-success-70-hover:hover { color: var(--success-70); }
.text-success-70-focus:focus { color: var(--success-70); }
.text-success-70-active:active { color: var(--success-70); }

.text-success-60 { color: var(--success-60); }
.text-success-60-hover:hover { color: var(--success-60); }
.text-success-60-focus:focus { color: var(--success-60); }
.text-success-60-active:active { color: var(--success-60); }

.text-success-50 { color: var(--success-50); }
.text-success-50-hover:hover { color: var(--success-50); }
.text-success-50-focus:focus { color: var(--success-50); }
.text-success-50-active:active { color: var(--success-50); }

.text-success-40 { color: var(--success-40); }
.text-success-40-hover:hover { color: var(--success-40); }
.text-success-40-focus:focus { color: var(--success-40); }
.text-success-40-active:active { color: var(--success-40); }

.text-success-30 { color: var(--success-30); }
.text-success-30-hover:hover { color: var(--success-30); }
.text-success-30-focus:focus { color: var(--success-30); }
.text-success-30-active:active { color: var(--success-30); }

.text-success-20 { color: var(--success-20); }
.text-success-20-hover:hover { color: var(--success-20); }
.text-success-20-focus:focus { color: var(--success-20); }
.text-success-20-active:active { color: var(--success-20); }

.text-success-10 { color: var(--success-10); }
.text-success-10-hover:hover { color: var(--success-10); }
.text-success-10-focus:focus { color: var(--success-10); }
.text-success-10-active:active { color: var(--success-10); }

/* Error */

/* Background */
.background-error { background-color: var(--error-80); }
.background-error-hover:hover { background-color: var(--error-80); }
.background-error-focus:focus { background-color: var(--error-80); }
.background-error-active:active { background-color: var(--error-80); }

.background-error-100 { background-color: var(--error-100); }
.background-error-100-hover:hover { background-color: var(--error-100); }
.background-error-100-focus:focus { background-color: var(--error-100); }
.background-error-100-active:active { background-color: var(--error-100); }

.background-error-90 { background-color: var(--error-90); }
.background-error-90-hover:hover { background-color: var(--error-90); }
.background-error-90-focus:focus { background-color: var(--error-90); }
.background-error-90-active:active { background-color: var(--error-90); }

.background-error-70 { background-color: var(--error-70); }
.background-error-70-hover:hover { background-color: var(--error-70); }
.background-error-70-focus:focus { background-color: var(--error-70); }
.background-error-70-active:active { background-color: var(--error-70); }

.background-error-60 { background-color: var(--error-60); }
.background-error-60-hover:hover { background-color: var(--error-60); }
.background-error-60-focus:focus { background-color: var(--error-60); }
.background-error-60-active:active { background-color: var(--error-60); }

.background-error-50 { background-color: var(--error-50); }
.background-error-50-hover:hover { background-color: var(--error-50); }
.background-error-50-focus:focus { background-color: var(--error-50); }
.background-error-50-active:active { background-color: var(--error-50); }

.background-error-40 { background-color: var(--error-40); }
.background-error-40-hover:hover { background-color: var(--error-40); }
.background-error-40-focus:focus { background-color: var(--error-40); }
.background-error-40-active:active { background-color: var(--error-40); }

.background-error-30 { background-color: var(--error-30); }
.background-error-30-hover:hover { background-color: var(--error-30); }
.background-error-30-focus:focus { background-color: var(--error-30); }
.background-error-30-active:active { background-color: var(--error-30); }

.background-error-20 { background-color: var(--error-20); }
.background-error-20-hover:hover { background-color: var(--error-20); }
.background-error-20-focus:focus { background-color: var(--error-20); }
.background-error-20-active:active { background-color: var(--error-20); }

.background-error-10 { background-color: var(--error-10); }
.background-error-10-hover:hover { background-color: var(--error-10); }
.background-error-10-focus:focus { background-color: var(--error-10); }
.background-error-10-active:active { background-color: var(--error-10); }

/* Text */
.text-error { color: var(--error-80); }
.text-error-hover:hover { color: var(--error-80); }
.text-error-focus:focus { color: var(--error-80); }
.text-error-active:active { color: var(--error-80); }

.text-error-100 { color: var(--error-100); }
.text-error-100-hover:hover { color: var(--error-100); }
.text-error-100-focus:focus { color: var(--error-100); }
.text-error-100-active:active { color: var(--error-100); }

.text-error-90 { color: var(--error-90); }
.text-error-90-hover:hover { color: var(--error-90); }
.text-error-90-focus:focus { color: var(--error-90); }
.text-error-90-active:active { color: var(--error-90); }

.text-error-70 { color: var(--error-70); }
.text-error-70-hover:hover { color: var(--error-70); }
.text-error-70-focus:focus { color: var(--error-70); }
.text-error-70-active:active { color: var(--error-70); }

.text-error-60 { color: var(--error-60); }
.text-error-60-hover:hover { color: var(--error-60); }
.text-error-60-focus:focus { color: var(--error-60); }
.text-error-60-active:active { color: var(--error-60); }

.text-error-50 { color: var(--error-50); }
.text-error-50-hover:hover { color: var(--error-50); }
.text-error-50-focus:focus { color: var(--error-50); }
.text-error-50-active:active { color: var(--error-50); }

.text-error-40 { color: var(--error-40); }
.text-error-40-hover:hover { color: var(--error-40); }
.text-error-40-focus:focus { color: var(--error-40); }
.text-error-40-active:active { color: var(--error-40); }

.text-error-30 { color: var(--error-30); }
.text-error-30-hover:hover { color: var(--error-30); }
.text-error-30-focus:focus { color: var(--error-30); }
.text-error-30-active:active { color: var(--error-30); }

.text-error-20 { color: var(--error-20); }
.text-error-20-hover:hover { color: var(--error-20); }
.text-error-20-focus:focus { color: var(--error-20); }
.text-error-20-active:active { color: var(--error-20); }

.text-error-10 { color: var(--error-10); }
.text-error-10-hover:hover { color: var(--error-10); }
.text-error-10-focus:focus { color: var(--error-10); }
.text-error-10-active:active { color: var(--error-10); }

/* alert */

/* Background */
.background-alert { background-color: var(--alert-80); }
.background-alert-hover:hover { background-color: var(--alert-80); }
.background-alert-focus:focus { background-color: var(--alert-80); }
.background-alert-active:active { background-color: var(--alert-80); }

.background-alert-100 { background-color: var(--alert-100); }
.background-alert-100-hover:hover { background-color: var(--alert-100); }
.background-alert-100-focus:focus { background-color: var(--alert-100); }
.background-alert-100-active:active { background-color: var(--alert-100); }

.background-alert-90 { background-color: var(--alert-90); }
.background-alert-90-hover:hover { background-color: var(--alert-90); }
.background-alert-90-focus:focus { background-color: var(--alert-90); }
.background-alert-90-active:active { background-color: var(--alert-90); }

.background-alert-70 { background-color: var(--alert-70); }
.background-alert-70-hover:hover { background-color: var(--alert-70); }
.background-alert-70-focus:focus { background-color: var(--alert-70); }
.background-alert-70-active:active { background-color: var(--alert-70); }

.background-alert-60 { background-color: var(--alert-60); }
.background-alert-60-hover:hover { background-color: var(--alert-60); }
.background-alert-60-focus:focus { background-color: var(--alert-60); }
.background-alert-60-active:active { background-color: var(--alert-60); }

.background-alert-50 { background-color: var(--alert-50); }
.background-alert-50-hover:hover { background-color: var(--alert-50); }
.background-alert-50-focus:focus { background-color: var(--alert-50); }
.background-alert-50-active:active { background-color: var(--alert-50); }

.background-alert-40 { background-color: var(--alert-40); }
.background-alert-40-hover:hover { background-color: var(--alert-40); }
.background-alert-40-focus:focus { background-color: var(--alert-40); }
.background-alert-40-active:active { background-color: var(--alert-40); }

.background-alert-30 { background-color: var(--alert-30); }
.background-alert-30-hover:hover { background-color: var(--alert-30); }
.background-alert-30-focus:focus { background-color: var(--alert-30); }
.background-alert-30-active:active { background-color: var(--alert-30); }

.background-alert-20 { background-color: var(--alert-20); }
.background-alert-20-hover:hover { background-color: var(--alert-20); }
.background-alert-20-focus:focus { background-color: var(--alert-20); }
.background-alert-20-active:active { background-color: var(--alert-20); }

.background-alert-10 { background-color: var(--alert-10); }
.background-alert-10-hover:hover { background-color: var(--alert-10); }
.background-alert-10-focus:focus { background-color: var(--alert-10); }
.background-alert-10-active:active { background-color: var(--alert-10); }

/* Text */
.text-alert { color: var(--alert-80); }
.text-alert-hover:hover { color: var(--alert-80); }
.text-alert-focus:focus { color: var(--alert-80); }
.text-alert-active:active { color: var(--alert-80); }

.text-alert-100 { color: var(--alert-100); }
.text-alert-100-hover:hover { color: var(--alert-100); }
.text-alert-100-focus:focus { color: var(--alert-100); }
.text-alert-100-active:active { color: var(--alert-100); }

.text-alert-90 { color: var(--alert-90); }
.text-alert-90-hover:hover { color: var(--alert-90); }
.text-alert-90-focus:focus { color: var(--alert-90); }
.text-alert-90-active:active { color: var(--alert-90); }

.text-alert-70 { color: var(--alert-70); }
.text-alert-70-hover:hover { color: var(--alert-70); }
.text-alert-70-focus:focus { color: var(--alert-70); }
.text-alert-70-active:active { color: var(--alert-70); }

.text-alert-60 { color: var(--alert-60); }
.text-alert-60-hover:hover { color: var(--alert-60); }
.text-alert-60-focus:focus { color: var(--alert-60); }
.text-alert-60-active:active { color: var(--alert-60); }

.text-alert-50 { color: var(--alert-50); }
.text-alert-50-hover:hover { color: var(--alert-50); }
.text-alert-50-focus:focus { color: var(--alert-50); }
.text-alert-50-active:active { color: var(--alert-50); }

.text-alert-40 { color: var(--alert-40); }
.text-alert-40-hover:hover { color: var(--alert-40); }
.text-alert-40-focus:focus { color: var(--alert-40); }
.text-alert-40-active:active { color: var(--alert-40); }

.text-alert-30 { color: var(--alert-30); }
.text-alert-30-hover:hover { color: var(--alert-30); }
.text-alert-30-focus:focus { color: var(--alert-30); }
.text-alert-30-active:active { color: var(--alert-30); }

.text-alert-20 { color: var(--alert-20); }
.text-alert-20-hover:hover { color: var(--alert-20); }
.text-alert-20-focus:focus { color: var(--alert-20); }
.text-alert-20-active:active { color: var(--alert-20); }

.text-alert-10 { color: var(--alert-10); }
.text-alert-10-hover:hover { color: var(--alert-10); }
.text-alert-10-focus:focus { color: var(--alert-10); }
.text-alert-10-active:active { color: var(--alert-10); }

/* Teal */

/* Background */
.background-teal { background-color: var(--teal-80); }
.background-teal-hover:hover { background-color: var(--teal-80); }
.background-teal-focus:focus { background-color: var(--teal-80); }
.background-teal-active:active { background-color: var(--teal-80); }

.background-teal-100 { background-color: var(--teal-100); }
.background-teal-100-hover:hover { background-color: var(--teal-100); }
.background-teal-100-focus:focus { background-color: var(--teal-100); }
.background-teal-100-active:active { background-color: var(--teal-100); }

.background-teal-90 { background-color: var(--teal-90); }
.background-teal-90-hover:hover { background-color: var(--teal-90); }
.background-teal-90-focus:focus { background-color: var(--teal-90); }
.background-teal-90-active:active { background-color: var(--teal-90); }

.background-teal-70 { background-color: var(--teal-70); }
.background-teal-70-hover:hover { background-color: var(--teal-70); }
.background-teal-70-focus:focus { background-color: var(--teal-70); }
.background-teal-70-active:active { background-color: var(--teal-70); }

.background-teal-60 { background-color: var(--teal-60); }
.background-teal-60-hover:hover { background-color: var(--teal-60); }
.background-teal-60-focus:focus { background-color: var(--teal-60); }
.background-teal-60-active:active { background-color: var(--teal-60); }

.background-teal-50 { background-color: var(--teal-50); }
.background-teal-50-hover:hover { background-color: var(--teal-50); }
.background-teal-50-focus:focus { background-color: var(--teal-50); }
.background-teal-50-active:active { background-color: var(--teal-50); }

.background-teal-40 { background-color: var(--teal-40); }
.background-teal-40-hover:hover { background-color: var(--teal-40); }
.background-teal-40-focus:focus { background-color: var(--teal-40); }
.background-teal-40-active:active { background-color: var(--teal-40); }

.background-teal-30 { background-color: var(--teal-30); }
.background-teal-30-hover:hover { background-color: var(--teal-30); }
.background-teal-30-focus:focus { background-color: var(--teal-30); }
.background-teal-30-active:active { background-color: var(--teal-30); }

.background-teal-20 { background-color: var(--teal-20); }
.background-teal-20-hover:hover { background-color: var(--teal-20); }
.background-teal-20-focus:focus { background-color: var(--teal-20); }
.background-teal-20-active:active { background-color: var(--teal-20); }

.background-teal-10 { background-color: var(--teal-10); }
.background-teal-10-hover:hover { background-color: var(--teal-10); }
.background-teal-10-focus:focus { background-color: var(--teal-10); }
.background-teal-10-active:active { background-color: var(--teal-10); }

/* Text */
.text-teal { color: var(--teal-80); }
.text-teal-hover:hover { color: var(--teal-80); }
.text-teal-focus:focus { color: var(--teal-80); }
.text-teal-active:active { color: var(--teal-80); }

.text-teal-100 { color: var(--teal-100); }
.text-teal-100-hover:hover { color: var(--teal-100); }
.text-teal-100-focus:focus { color: var(--teal-100); }
.text-teal-100-active:active { color: var(--teal-100); }

.text-teal-90 { color: var(--teal-90); }
.text-teal-90-hover:hover { color: var(--teal-90); }
.text-teal-90-focus:focus { color: var(--teal-90); }
.text-teal-90-active:active { color: var(--teal-90); }

.text-teal-70 { color: var(--teal-70); }
.text-teal-70-hover:hover { color: var(--teal-70); }
.text-teal-70-focus:focus { color: var(--teal-70); }
.text-teal-70-active:active { color: var(--teal-70); }

.text-teal-60 { color: var(--teal-60); }
.text-teal-60-hover:hover { color: var(--teal-60); }
.text-teal-60-focus:focus { color: var(--teal-60); }
.text-teal-60-active:active { color: var(--teal-60); }

.text-teal-50 { color: var(--teal-50); }
.text-teal-50-hover:hover { color: var(--teal-50); }
.text-teal-50-focus:focus { color: var(--teal-50); }
.text-teal-50-active:active { color: var(--teal-50); }

.text-teal-40 { color: var(--teal-40); }
.text-teal-40-hover:hover { color: var(--teal-40); }
.text-teal-40-focus:focus { color: var(--teal-40); }
.text-teal-40-active:active { color: var(--teal-40); }

.text-teal-30 { color: var(--teal-30); }
.text-teal-30-hover:hover { color: var(--teal-30); }
.text-teal-30-focus:focus { color: var(--teal-30); }
.text-teal-30-active:active { color: var(--teal-30); }

.text-teal-20 { color: var(--teal-20); }
.text-teal-20-hover:hover { color: var(--teal-20); }
.text-teal-20-focus:focus { color: var(--teal-20); }
.text-teal-20-active:active { color: var(--teal-20); }

.text-teal-10 { color: var(--teal-10); }
.text-teal-10-hover:hover { color: var(--teal-10); }
.text-teal-10-focus:focus { color: var(--teal-10); }
.text-teal-10-active:active { color: var(--teal-10); }

/* Berry */

/* Background */
.background-berry { background-color: var(--berry-80); }
.background-berry-hover:hover { background-color: var(--berry-80); }
.background-berry-focus:focus { background-color: var(--berry-80); }
.background-berry-active:active { background-color: var(--berry-80); }

.background-berry-100 { background-color: var(--berry-100); }
.background-berry-100-hover:hover { background-color: var(--berry-100); }
.background-berry-100-focus:focus { background-color: var(--berry-100); }
.background-berry-100-active:active { background-color: var(--berry-100); }

.background-berry-90 { background-color: var(--berry-90); }
.background-berry-90-hover:hover { background-color: var(--berry-90); }
.background-berry-90-focus:focus { background-color: var(--berry-90); }
.background-berry-90-active:active { background-color: var(--berry-90); }

.background-berry-70 { background-color: var(--berry-70); }
.background-berry-70-hover:hover { background-color: var(--berry-70); }
.background-berry-70-focus:focus { background-color: var(--berry-70); }
.background-berry-70-active:active { background-color: var(--berry-70); }

.background-berry-60 { background-color: var(--berry-60); }
.background-berry-60-hover:hover { background-color: var(--berry-60); }
.background-berry-60-focus:focus { background-color: var(--berry-60); }
.background-berry-60-active:active { background-color: var(--berry-60); }

.background-berry-50 { background-color: var(--berry-50); }
.background-berry-50-hover:hover { background-color: var(--berry-50); }
.background-berry-50-focus:focus { background-color: var(--berry-50); }
.background-berry-50-active:active { background-color: var(--berry-50); }

.background-berry-40 { background-color: var(--berry-40); }
.background-berry-40-hover:hover { background-color: var(--berry-40); }
.background-berry-40-focus:focus { background-color: var(--berry-40); }
.background-berry-40-active:active { background-color: var(--berry-40); }

.background-berry-30 { background-color: var(--berry-30); }
.background-berry-30-hover:hover { background-color: var(--berry-30); }
.background-berry-30-focus:focus { background-color: var(--berry-30); }
.background-berry-30-active:active { background-color: var(--berry-30); }

.background-berry-20 { background-color: var(--berry-20); }
.background-berry-20-hover:hover { background-color: var(--berry-20); }
.background-berry-20-focus:focus { background-color: var(--berry-20); }
.background-berry-20-active:active { background-color: var(--berry-20); }

.background-berry-10 { background-color: var(--berry-10); }
.background-berry-10-hover:hover { background-color: var(--berry-10); }
.background-berry-10-focus:focus { background-color: var(--berry-10); }
.background-berry-10-active:active { background-color: var(--berry-10); }

/* Text */
.text-berry { color: var(--berry-80); }
.text-berry-hover:hover { color: var(--berry-80); }
.text-berry-focus:focus { color: var(--berry-80); }
.text-berry-active:active { color: var(--berry-80); }

.text-berry-100 { color: var(--berry-100); }
.text-berry-100-hover:hover { color: var(--berry-100); }
.text-berry-100-focus:focus { color: var(--berry-100); }
.text-berry-100-active:active { color: var(--berry-100); }

.text-berry-90 { color: var(--berry-90); }
.text-berry-90-hover:hover { color: var(--berry-90); }
.text-berry-90-focus:focus { color: var(--berry-90); }
.text-berry-90-active:active { color: var(--berry-90); }

.text-berry-70 { color: var(--berry-70); }
.text-berry-70-hover:hover { color: var(--berry-70); }
.text-berry-70-focus:focus { color: var(--berry-70); }
.text-berry-70-active:active { color: var(--berry-70); }

.text-berry-60 { color: var(--berry-60); }
.text-berry-60-hover:hover { color: var(--berry-60); }
.text-berry-60-focus:focus { color: var(--berry-60); }
.text-berry-60-active:active { color: var(--berry-60); }

.text-berry-50 { color: var(--berry-50); }
.text-berry-50-hover:hover { color: var(--berry-50); }
.text-berry-50-focus:focus { color: var(--berry-50); }
.text-berry-50-active:active { color: var(--berry-50); }

.text-berry-40 { color: var(--berry-40); }
.text-berry-40-hover:hover { color: var(--berry-40); }
.text-berry-40-focus:focus { color: var(--berry-40); }
.text-berry-40-active:active { color: var(--berry-40); }

.text-berry-30 { color: var(--berry-30); }
.text-berry-30-hover:hover { color: var(--berry-30); }
.text-berry-30-focus:focus { color: var(--berry-30); }
.text-berry-30-active:active { color: var(--berry-30); }

.text-berry-20 { color: var(--berry-20); }
.text-berry-20-hover:hover { color: var(--berry-20); }
.text-berry-20-focus:focus { color: var(--berry-20); }
.text-berry-20-active:active { color: var(--berry-20); }

.text-berry-10 { color: var(--berry-10); }
.text-berry-10-hover:hover { color: var(--berry-10); }
.text-berry-10-focus:focus { color: var(--berry-10); }
.text-berry-10-active:active { color: var(--berry-10); }

/* Plum */

/* Background */
.background-plum { background-color: var(--plum-80); }
.background-plum-hover:hover { background-color: var(--plum-80); }
.background-plum-focus:focus { background-color: var(--plum-80); }
.background-plum-active:active { background-color: var(--plum-80); }

.background-plum-100 { background-color: var(--plum-100); }
.background-plum-100-hover:hover { background-color: var(--plum-100); }
.background-plum-100-focus:focus { background-color: var(--plum-100); }
.background-plum-100-active:active { background-color: var(--plum-100); }

.background-plum-90 { background-color: var(--plum-90); }
.background-plum-90-hover:hover { background-color: var(--plum-90); }
.background-plum-90-focus:focus { background-color: var(--plum-90); }
.background-plum-90-active:active { background-color: var(--plum-90); }

.background-plum-70 { background-color: var(--plum-70); }
.background-plum-70-hover:hover { background-color: var(--plum-70); }
.background-plum-70-focus:focus { background-color: var(--plum-70); }
.background-plum-70-active:active { background-color: var(--plum-70); }

.background-plum-60 { background-color: var(--plum-60); }
.background-plum-60-hover:hover { background-color: var(--plum-60); }
.background-plum-60-focus:focus { background-color: var(--plum-60); }
.background-plum-60-active:active { background-color: var(--plum-60); }

.background-plum-50 { background-color: var(--plum-50); }
.background-plum-50-hover:hover { background-color: var(--plum-50); }
.background-plum-50-focus:focus { background-color: var(--plum-50); }
.background-plum-50-active:active { background-color: var(--plum-50); }

.background-plum-40 { background-color: var(--plum-40); }
.background-plum-40-hover:hover { background-color: var(--plum-40); }
.background-plum-40-focus:focus { background-color: var(--plum-40); }
.background-plum-40-active:active { background-color: var(--plum-40); }

.background-plum-30 { background-color: var(--plum-30); }
.background-plum-30-hover:hover { background-color: var(--plum-30); }
.background-plum-30-focus:focus { background-color: var(--plum-30); }
.background-plum-30-active:active { background-color: var(--plum-30); }

.background-plum-20 { background-color: var(--plum-20); }
.background-plum-20-hover:hover { background-color: var(--plum-20); }
.background-plum-20-focus:focus { background-color: var(--plum-20); }
.background-plum-20-active:active { background-color: var(--plum-20); }

.background-plum-10 { background-color: var(--plum-10); }
.background-plum-10-hover:hover { background-color: var(--plum-10); }
.background-plum-10-focus:focus { background-color: var(--plum-10); }
.background-plum-10-active:active { background-color: var(--plum-10); }

/* Text */
.text-plum { color: var(--plum-80); }
.text-plum-hover:hover { color: var(--plum-80); }
.text-plum-focus:focus { color: var(--plum-80); }
.text-plum-active:active { color: var(--plum-80); }

.text-plum-100 { color: var(--plum-100); }
.text-plum-100-hover:hover { color: var(--plum-100); }
.text-plum-100-focus:focus { color: var(--plum-100); }
.text-plum-100-active:active { color: var(--plum-100); }

.text-plum-90 { color: var(--plum-90); }
.text-plum-90-hover:hover { color: var(--plum-90); }
.text-plum-90-focus:focus { color: var(--plum-90); }
.text-plum-90-active:active { color: var(--plum-90); }

.text-plum-70 { color: var(--plum-70); }
.text-plum-70-hover:hover { color: var(--plum-70); }
.text-plum-70-focus:focus { color: var(--plum-70); }
.text-plum-70-active:active { color: var(--plum-70); }

.text-plum-60 { color: var(--plum-60); }
.text-plum-60-hover:hover { color: var(--plum-60); }
.text-plum-60-focus:focus { color: var(--plum-60); }
.text-plum-60-active:active { color: var(--plum-60); }

.text-plum-50 { color: var(--plum-50); }
.text-plum-50-hover:hover { color: var(--plum-50); }
.text-plum-50-focus:focus { color: var(--plum-50); }
.text-plum-50-active:active { color: var(--plum-50); }

.text-plum-40 { color: var(--plum-40); }
.text-plum-40-hover:hover { color: var(--plum-40); }
.text-plum-40-focus:focus { color: var(--plum-40); }
.text-plum-40-active:active { color: var(--plum-40); }

.text-plum-30 { color: var(--plum-30); }
.text-plum-30-hover:hover { color: var(--plum-30); }
.text-plum-30-focus:focus { color: var(--plum-30); }
.text-plum-30-active:active { color: var(--plum-30); }

.text-plum-20 { color: var(--plum-20); }
.text-plum-20-hover:hover { color: var(--plum-20); }
.text-plum-20-focus:focus { color: var(--plum-20); }
.text-plum-20-active:active { color: var(--plum-20); }

.text-plum-10 { color: var(--plum-10); }
.text-plum-10-hover:hover { color: var(--plum-10); }
.text-plum-10-focus:focus { color: var(--plum-10); }
.text-plum-10-active:active { color: var(--plum-10); }

/* Aqua */

/* Background */
.background-aqua { background-color: var(--aqua-80); }
.background-aqua-hover:hover { background-color: var(--aqua-80); }
.background-aqua-focus:focus { background-color: var(--aqua-80); }
.background-aqua-active:active { background-color: var(--aqua-80); }

.background-aqua-100 { background-color: var(--aqua-100); }
.background-aqua-100-hover:hover { background-color: var(--aqua-100); }
.background-aqua-100-focus:focus { background-color: var(--aqua-100); }
.background-aqua-100-active:active { background-color: var(--aqua-100); }

.background-aqua-90 { background-color: var(--aqua-90); }
.background-aqua-90-hover:hover { background-color: var(--aqua-90); }
.background-aqua-90-focus:focus { background-color: var(--aqua-90); }
.background-aqua-90-active:active { background-color: var(--aqua-90); }

.background-aqua-70 { background-color: var(--aqua-70); }
.background-aqua-70-hover:hover { background-color: var(--aqua-70); }
.background-aqua-70-focus:focus { background-color: var(--aqua-70); }
.background-aqua-70-active:active { background-color: var(--aqua-70); }

.background-aqua-60 { background-color: var(--aqua-60); }
.background-aqua-60-hover:hover { background-color: var(--aqua-60); }
.background-aqua-60-focus:focus { background-color: var(--aqua-60); }
.background-aqua-60-active:active { background-color: var(--aqua-60); }

.background-aqua-50 { background-color: var(--aqua-50); }
.background-aqua-50-hover:hover { background-color: var(--aqua-50); }
.background-aqua-50-focus:focus { background-color: var(--aqua-50); }
.background-aqua-50-active:active { background-color: var(--aqua-50); }

.background-aqua-40 { background-color: var(--aqua-40); }
.background-aqua-40-hover:hover { background-color: var(--aqua-40); }
.background-aqua-40-focus:focus { background-color: var(--aqua-40); }
.background-aqua-40-active:active { background-color: var(--aqua-40); }

.background-aqua-30 { background-color: var(--aqua-30); }
.background-aqua-30-hover:hover { background-color: var(--aqua-30); }
.background-aqua-30-focus:focus { background-color: var(--aqua-30); }
.background-aqua-30-active:active { background-color: var(--aqua-30); }

.background-aqua-20 { background-color: var(--aqua-20); }
.background-aqua-20-hover:hover { background-color: var(--aqua-20); }
.background-aqua-20-focus:focus { background-color: var(--aqua-20); }
.background-aqua-20-active:active { background-color: var(--aqua-20); }

.background-aqua-10 { background-color: var(--aqua-10); }
.background-aqua-10-hover:hover { background-color: var(--aqua-10); }
.background-aqua-10-focus:focus { background-color: var(--aqua-10); }
.background-aqua-10-active:active { background-color: var(--aqua-10); }

/* Text */
.text-aqua { color: var(--aqua-80); }
.text-aqua-hover:hover { color: var(--aqua-80); }
.text-aqua-focus:focus { color: var(--aqua-80); }
.text-aqua-active:active { color: var(--aqua-80); }

.text-aqua-100 { color: var(--aqua-100); }
.text-aqua-100-hover:hover { color: var(--aqua-100); }
.text-aqua-100-focus:focus { color: var(--aqua-100); }
.text-aqua-100-active:active { color: var(--aqua-100); }

.text-aqua-90 { color: var(--aqua-90); }
.text-aqua-90-hover:hover { color: var(--aqua-90); }
.text-aqua-90-focus:focus { color: var(--aqua-90); }
.text-aqua-90-active:active { color: var(--aqua-90); }

.text-aqua-70 { color: var(--aqua-70); }
.text-aqua-70-hover:hover { color: var(--aqua-70); }
.text-aqua-70-focus:focus { color: var(--aqua-70); }
.text-aqua-70-active:active { color: var(--aqua-70); }

.text-aqua-60 { color: var(--aqua-60); }
.text-aqua-60-hover:hover { color: var(--aqua-60); }
.text-aqua-60-focus:focus { color: var(--aqua-60); }
.text-aqua-60-active:active { color: var(--aqua-60); }

.text-aqua-50 { color: var(--aqua-50); }
.text-aqua-50-hover:hover { color: var(--aqua-50); }
.text-aqua-50-focus:focus { color: var(--aqua-50); }
.text-aqua-50-active:active { color: var(--aqua-50); }

.text-aqua-40 { color: var(--aqua-40); }
.text-aqua-40-hover:hover { color: var(--aqua-40); }
.text-aqua-40-focus:focus { color: var(--aqua-40); }
.text-aqua-40-active:active { color: var(--aqua-40); }

.text-aqua-30 { color: var(--aqua-30); }
.text-aqua-30-hover:hover { color: var(--aqua-30); }
.text-aqua-30-focus:focus { color: var(--aqua-30); }
.text-aqua-30-active:active { color: var(--aqua-30); }

.text-aqua-20 { color: var(--aqua-20); }
.text-aqua-20-hover:hover { color: var(--aqua-20); }
.text-aqua-20-focus:focus { color: var(--aqua-20); }
.text-aqua-20-active:active { color: var(--aqua-20); }

.text-aqua-10 { color: var(--aqua-10); }
.text-aqua-10-hover:hover { color: var(--aqua-10); }
.text-aqua-10-focus:focus { color: var(--aqua-10); }
.text-aqua-10-active:active { color: var(--aqua-10); }

/* Orange */

/* Background */
.background-orange { background-color: var(--orange-80); }
.background-orange-hover:hover { background-color: var(--orange-80); }
.background-orange-focus:focus { background-color: var(--orange-80); }
.background-orange-active:active { background-color: var(--orange-80); }

.background-orange-100 { background-color: var(--orange-100); }
.background-orange-100-hover:hover { background-color: var(--orange-100); }
.background-orange-100-focus:focus { background-color: var(--orange-100); }
.background-orange-100-active:active { background-color: var(--orange-100); }

.background-orange-90 { background-color: var(--orange-90); }
.background-orange-90-hover:hover { background-color: var(--orange-90); }
.background-orange-90-focus:focus { background-color: var(--orange-90); }
.background-orange-90-active:active { background-color: var(--orange-90); }

.background-orange-70 { background-color: var(--orange-70); }
.background-orange-70-hover:hover { background-color: var(--orange-70); }
.background-orange-70-focus:focus { background-color: var(--orange-70); }
.background-orange-70-active:active { background-color: var(--orange-70); }

.background-orange-60 { background-color: var(--orange-60); }
.background-orange-60-hover:hover { background-color: var(--orange-60); }
.background-orange-60-focus:focus { background-color: var(--orange-60); }
.background-orange-60-active:active { background-color: var(--orange-60); }

.background-orange-50 { background-color: var(--orange-50); }
.background-orange-50-hover:hover { background-color: var(--orange-50); }
.background-orange-50-focus:focus { background-color: var(--orange-50); }
.background-orange-50-active:active { background-color: var(--orange-50); }

.background-orange-40 { background-color: var(--orange-40); }
.background-orange-40-hover:hover { background-color: var(--orange-40); }
.background-orange-40-focus:focus { background-color: var(--orange-40); }
.background-orange-40-active:active { background-color: var(--orange-40); }

.background-orange-30 { background-color: var(--orange-30); }
.background-orange-30-hover:hover { background-color: var(--orange-30); }
.background-orange-30-focus:focus { background-color: var(--orange-30); }
.background-orange-30-active:active { background-color: var(--orange-30); }

.background-orange-20 { background-color: var(--orange-20); }
.background-orange-20-hover:hover { background-color: var(--orange-20); }
.background-orange-20-focus:focus { background-color: var(--orange-20); }
.background-orange-20-active:active { background-color: var(--orange-20); }

.background-orange-10 { background-color: var(--orange-10); }
.background-orange-10-hover:hover { background-color: var(--orange-10); }
.background-orange-10-focus:focus { background-color: var(--orange-10); }
.background-orange-10-active:active { background-color: var(--orange-10); }

/* Text */
.text-orange { color: var(--orange-80); }
.text-orange-hover:hover { color: var(--orange-80); }
.text-orange-focus:focus { color: var(--orange-80); }
.text-orange-active:active { color: var(--orange-80); }

.text-orange-100 { color: var(--orange-100); }
.text-orange-100-hover:hover { color: var(--orange-100); }
.text-orange-100-focus:focus { color: var(--orange-100); }
.text-orange-100-active:active { color: var(--orange-100); }

.text-orange-90 { color: var(--orange-90); }
.text-orange-90-hover:hover { color: var(--orange-90); }
.text-orange-90-focus:focus { color: var(--orange-90); }
.text-orange-90-active:active { color: var(--orange-90); }

.text-orange-70 { color: var(--orange-70); }
.text-orange-70-hover:hover { color: var(--orange-70); }
.text-orange-70-focus:focus { color: var(--orange-70); }
.text-orange-70-active:active { color: var(--orange-70); }

.text-orange-60 { color: var(--orange-60); }
.text-orange-60-hover:hover { color: var(--orange-60); }
.text-orange-60-focus:focus { color: var(--orange-60); }
.text-orange-60-active:active { color: var(--orange-60); }

.text-orange-50 { color: var(--orange-50); }
.text-orange-50-hover:hover { color: var(--orange-50); }
.text-orange-50-focus:focus { color: var(--orange-50); }
.text-orange-50-active:active { color: var(--orange-50); }

.text-orange-40 { color: var(--orange-40); }
.text-orange-40-hover:hover { color: var(--orange-40); }
.text-orange-40-focus:focus { color: var(--orange-40); }
.text-orange-40-active:active { color: var(--orange-40); }

.text-orange-30 { color: var(--orange-30); }
.text-orange-30-hover:hover { color: var(--orange-30); }
.text-orange-30-focus:focus { color: var(--orange-30); }
.text-orange-30-active:active { color: var(--orange-30); }

.text-orange-20 { color: var(--orange-20); }
.text-orange-20-hover:hover { color: var(--orange-20); }
.text-orange-20-focus:focus { color: var(--orange-20); }
.text-orange-20-active:active { color: var(--orange-20); }

.text-orange-10 { color: var(--orange-10); }
.text-orange-10-hover:hover { color: var(--orange-10); }
.text-orange-10-focus:focus { color: var(--orange-10); }
.text-orange-10-active:active { color: var(--orange-10); }

/* Buttercup */

/* Background */
.background-buttercup { background-color: var(--buttercup-80); }
.background-buttercup-hover:hover { background-color: var(--buttercup-80); }
.background-buttercup-focus:focus { background-color: var(--buttercup-80); }
.background-buttercup-active:active { background-color: var(--buttercup-80); }

.background-buttercup-100 { background-color: var(--buttercup-100); }
.background-buttercup-100-hover:hover { background-color: var(--buttercup-100); }
.background-buttercup-100-focus:focus { background-color: var(--buttercup-100); }
.background-buttercup-100-active:active { background-color: var(--buttercup-100); }

.background-buttercup-90 { background-color: var(--buttercup-90); }
.background-buttercup-90-hover:hover { background-color: var(--buttercup-90); }
.background-buttercup-90-focus:focus { background-color: var(--buttercup-90); }
.background-buttercup-90-active:active { background-color: var(--buttercup-90); }

.background-buttercup-70 { background-color: var(--buttercup-70); }
.background-buttercup-70-hover:hover { background-color: var(--buttercup-70); }
.background-buttercup-70-focus:focus { background-color: var(--buttercup-70); }
.background-buttercup-70-active:active { background-color: var(--buttercup-70); }

.background-buttercup-60 { background-color: var(--buttercup-60); }
.background-buttercup-60-hover:hover { background-color: var(--buttercup-60); }
.background-buttercup-60-focus:focus { background-color: var(--buttercup-60); }
.background-buttercup-60-active:active { background-color: var(--buttercup-60); }

.background-buttercup-50 { background-color: var(--buttercup-50); }
.background-buttercup-50-hover:hover { background-color: var(--buttercup-50); }
.background-buttercup-50-focus:focus { background-color: var(--buttercup-50); }
.background-buttercup-50-active:active { background-color: var(--buttercup-50); }

.background-buttercup-40 { background-color: var(--buttercup-40); }
.background-buttercup-40-hover:hover { background-color: var(--buttercup-40); }
.background-buttercup-40-focus:focus { background-color: var(--buttercup-40); }
.background-buttercup-40-active:active { background-color: var(--buttercup-40); }

.background-buttercup-30 { background-color: var(--buttercup-30); }
.background-buttercup-30-hover:hover { background-color: var(--buttercup-30); }
.background-buttercup-30-focus:focus { background-color: var(--buttercup-30); }
.background-buttercup-30-active:active { background-color: var(--buttercup-30); }

.background-buttercup-20 { background-color: var(--buttercup-20); }
.background-buttercup-20-hover:hover { background-color: var(--buttercup-20); }
.background-buttercup-20-focus:focus { background-color: var(--buttercup-20); }
.background-buttercup-20-active:active { background-color: var(--buttercup-20); }

.background-buttercup-10 { background-color: var(--buttercup-10); }
.background-buttercup-10-hover:hover { background-color: var(--buttercup-10); }
.background-buttercup-10-focus:focus { background-color: var(--buttercup-10); }
.background-buttercup-10-active:active { background-color: var(--buttercup-10); }

/* Text */
.text-buttercup { color: var(--buttercup-80); }
.text-buttercup-hover:hover { color: var(--buttercup-80); }
.text-buttercup-focus:focus { color: var(--buttercup-80); }
.text-buttercup-active:active { color: var(--buttercup-80); }

.text-buttercup-100 { color: var(--buttercup-100); }
.text-buttercup-100-hover:hover { color: var(--buttercup-100); }
.text-buttercup-100-focus:focus { color: var(--buttercup-100); }
.text-buttercup-100-active:active { color: var(--buttercup-100); }

.text-buttercup-90 { color: var(--buttercup-90); }
.text-buttercup-90-hover:hover { color: var(--buttercup-90); }
.text-buttercup-90-focus:focus { color: var(--buttercup-90); }
.text-buttercup-90-active:active { color: var(--buttercup-90); }

.text-buttercup-70 { color: var(--buttercup-70); }
.text-buttercup-70-hover:hover { color: var(--buttercup-70); }
.text-buttercup-70-focus:focus { color: var(--buttercup-70); }
.text-buttercup-70-active:active { color: var(--buttercup-70); }

.text-buttercup-60 { color: var(--buttercup-60); }
.text-buttercup-60-hover:hover { color: var(--buttercup-60); }
.text-buttercup-60-focus:focus { color: var(--buttercup-60); }
.text-buttercup-60-active:active { color: var(--buttercup-60); }

.text-buttercup-50 { color: var(--buttercup-50); }
.text-buttercup-50-hover:hover { color: var(--buttercup-50); }
.text-buttercup-50-focus:focus { color: var(--buttercup-50); }
.text-buttercup-50-active:active { color: var(--buttercup-50); }

.text-buttercup-40 { color: var(--buttercup-40); }
.text-buttercup-40-hover:hover { color: var(--buttercup-40); }
.text-buttercup-40-focus:focus { color: var(--buttercup-40); }
.text-buttercup-40-active:active { color: var(--buttercup-40); }

.text-buttercup-30 { color: var(--buttercup-30); }
.text-buttercup-30-hover:hover { color: var(--buttercup-30); }
.text-buttercup-30-focus:focus { color: var(--buttercup-30); }
.text-buttercup-30-active:active { color: var(--buttercup-30); }

.text-buttercup-20 { color: var(--buttercup-20); }
.text-buttercup-20-hover:hover { color: var(--buttercup-20); }
.text-buttercup-20-focus:focus { color: var(--buttercup-20); }
.text-buttercup-20-active:active { color: var(--buttercup-20); }

.text-buttercup-10 { color: var(--buttercup-10); }
.text-buttercup-10-hover:hover { color: var(--buttercup-10); }
.text-buttercup-10-focus:focus { color: var(--buttercup-10); }
.text-buttercup-10-active:active { color: var(--buttercup-10); }


/* --- All colours as Text and Background with each state */

/* Background Component Utilities */
.background-card-gray { background-color: var(--card-gray); }
.background-card-gray:hover  { background-color: var(--card-gray-hover); }
.background-faded-card { background-color: var(--faded-card-bgcolor); }
.background-feedback-card { background-color: var(--feeback-card-bgcolor); }

/* Disruption Border Utilities */
.border-faded-card-disruption { border-color: var(--faded-card-border-disruption); }
.border-card-disruption { border-color: var(--card-border-disruption); }



/* State Colours */
.background-positive {
  background-color: var(--states-positive);
}
.background-negative {
  background-color: var(--states-negative);
}


/* State Colours */
.text-positive {
  color: var(--states-positive);
}
.text-negative {
  color: var(--states-negative);
}


/* Opacity Utilities */
.opacity-0    { opacity: 0; }       /* 0% */
.opacity-10   { opacity: 0.1; }     /* 10% */
.opacity-20   { opacity: 0.2; }     /* 20% */
.opacity-30   { opacity: 0.3; }     /* 30% */
.opacity-40   { opacity: 0.4; }     /* 40% */
.opacity-50   { opacity: 0.5; }     /* 50% */
.opacity-60   { opacity: 0.6; }     /* 60% */
.opacity-70   { opacity: 0.7; }     /* 70% */
.opacity-80   { opacity: 0.8; }     /* 80% */
.opacity-90   { opacity: 0.9; }     /* 90% */
.opacity-100  { opacity: 1; }       /* 100% */


/* Borders */


/* Border Utilities */
.border-faded-card { border-color: var(--faded-card-border); }
.border-card { border-color: var(--card-border); }
.border-feedback-card { border-color: var(--feedback-card-border); }
.border-contact-card { border-color: var(--contact-card-border); }

/* Transparent Border */
.border-transparent { border-color: transparent; }
.border-transparent:hover { border-color: transparent; }
.border-transparent:focus { border-color: transparent; }
.border-transparent:active { border-color: transparent; }

/* Positive (Success) Border */
.border-positive { border-color: var(--states-positive); }
.border-positive:hover { border-color: var(--states-positive); }
.border-positive:focus { border-color: var(--states-positive); }
.border-positive:active { border-color: var(--states-positive); }

/* Negative (Error) Border */
.border-negative { border-color: var(--states-negative); }
.border-negative:hover { border-color: var(--states-negative); }
.border-negative:focus { border-color: var(--states-negative); }
.border-negative:active { border-color: var(--states-negative); }

/* Primary Colours */
.border-primary-100 { border-color: var(--primary-100); }
.border-primary-100:hover { border-color: var(--primary-100); }
.border-primary-100:focus { border-color: var(--primary-100); }
.border-primary-100:active { border-color: var(--primary-100); }

.border-primary-90 { border-color: var(--primary-90); }
.border-primary-90:hover { border-color: var(--primary-90); }
.border-primary-90:focus { border-color: var(--primary-90); }
.border-primary-90:active { border-color: var(--primary-90); }

.border-primary-80 { border-color: var(--primary-80); }
.border-primary-80:hover { border-color: var(--primary-80); }
.border-primary-80:focus { border-color: var(--primary-80); }
.border-primary-80:active { border-color: var(--primary-80); }

.border-primary-70 { border-color: var(--primary-70); }
.border-primary-70:hover { border-color: var(--primary-70); }
.border-primary-70:focus { border-color: var(--primary-70); }
.border-primary-70:active { border-color: var(--primary-70); }

.border-primary-60 { border-color: var(--primary-60); }
.border-primary-60:hover { border-color: var(--primary-60); }
.border-primary-60:focus { border-color: var(--primary-60); }
.border-primary-60:active { border-color: var(--primary-60); }

.border-primary-50 { border-color: var(--primary-50); }
.border-primary-50:hover { border-color: var(--primary-50); }
.border-primary-50:focus { border-color: var(--primary-50); }
.border-primary-50:active { border-color: var(--primary-50); }

.border-primary-40 { border-color: var(--primary-40); }
.border-primary-40:hover { border-color: var(--primary-40); }
.border-primary-40:focus { border-color: var(--primary-40); }
.border-primary-40:active { border-color: var(--primary-40); }

.border-primary-30 { border-color: var(--primary-30); }
.border-primary-30:hover { border-color: var(--primary-30); }
.border-primary-30:focus { border-color: var(--primary-30); }
.border-primary-30:active { border-color: var(--primary-30); }

.border-primary-20 { border-color: var(--primary-20); }
.border-primary-20:hover { border-color: var(--primary-20); }
.border-primary-20:focus { border-color: var(--primary-20); }
.border-primary-20:active { border-color: var(--primary-20); }

.border-primary-10 { border-color: var(--primary-10); }
.border-primary-10:hover { border-color: var(--primary-10); }
.border-primary-10:focus { border-color: var(--primary-10); }
.border-primary-10:active { border-color: var(--primary-10); }

/* Secondary Colours */
.border-secondary-100 { border-color: var(--secondary-100); }
.border-secondary-100:hover { border-color: var(--secondary-100); }
.border-secondary-100:focus { border-color: var(--secondary-100); }
.border-secondary-100:active { border-color: var(--secondary-100); }

.border-secondary-90 { border-color: var(--secondary-90); }
.border-secondary-90:hover { border-color: var(--secondary-90); }
.border-secondary-90:focus { border-color: var(--secondary-90); }
.border-secondary-90:active { border-color: var(--secondary-90); }

.border-secondary-80 { border-color: var(--secondary-80); }
.border-secondary-80:hover { border-color: var(--secondary-80); }
.border-secondary-80:focus { border-color: var(--secondary-80); }
.border-secondary-80:active { border-color: var(--secondary-80); }

.border-secondary-70 { border-color: var(--secondary-70); }
.border-secondary-70:hover { border-color: var(--secondary-70); }
.border-secondary-70:focus { border-color: var(--secondary-70); }
.border-secondary-70:active { border-color: var(--secondary-70); }

.border-secondary-60 { border-color: var(--secondary-60); }
.border-secondary-60:hover { border-color: var(--secondary-60); }
.border-secondary-60:focus { border-color: var(--secondary-60); }
.border-secondary-60:active { border-color: var(--secondary-60); }

.border-secondary-50 { border-color: var(--secondary-50); }
.border-secondary-50:hover { border-color: var(--secondary-50); }
.border-secondary-50:focus { border-color: var(--secondary-50); }
.border-secondary-50:active { border-color: var(--secondary-50); }

.border-secondary-40 { border-color: var(--secondary-40); }
.border-secondary-40:hover { border-color: var(--secondary-40); }
.border-secondary-40:focus { border-color: var(--secondary-40); }
.border-secondary-40:active { border-color: var(--secondary-40); }

.border-secondary-30 { border-color: var(--secondary-30); }
.border-secondary-30:hover { border-color: var(--secondary-30); }
.border-secondary-30:focus { border-color: var(--secondary-30); }
.border-secondary-30:active { border-color: var(--secondary-30); }

.border-secondary-20 { border-color: var(--secondary-20); }
.border-secondary-20:hover { border-color: var(--secondary-20); }
.border-secondary-20:focus { border-color: var(--secondary-20); }
.border-secondary-20:active { border-color: var(--secondary-20); }

.border-secondary-10 { border-color: var(--secondary-10); }
.border-secondary-10:hover { border-color: var(--secondary-10); }
.border-secondary-10:focus { border-color: var(--secondary-10); }
.border-secondary-10:active { border-color: var(--secondary-10); }

/* Success Colours */
.border-success-100 { border-color: var(--success-100); }
.border-success-100:hover { border-color: var(--success-100); }
.border-success-100:focus { border-color: var(--success-100); }
.border-success-100:active { border-color: var(--success-100); }

.border-success-90 { border-color: var(--success-90); }
.border-success-90:hover { border-color: var(--success-90); }
.border-success-90:focus { border-color: var(--success-90); }
.border-success-90:active { border-color: var(--success-90); }

.border-success-80 { border-color: var(--success-80); }
.border-success-80:hover { border-color: var(--success-80); }
.border-success-80:focus { border-color: var(--success-80); }
.border-success-80:active { border-color: var(--success-80); }

.border-success-70 { border-color: var(--success-70); }
.border-success-70:hover { border-color: var(--success-70); }
.border-success-70:focus { border-color: var(--success-70); }
.border-success-70:active { border-color: var(--success-70); }

.border-success-60 { border-color: var(--success-60); }
.border-success-60:hover { border-color: var(--success-60); }
.border-success-60:focus { border-color: var(--success-60); }
.border-success-60:active { border-color: var(--success-60); }

.border-success-50 { border-color: var(--success-50); }
.border-success-50:hover { border-color: var(--success-50); }
.border-success-50:focus { border-color: var(--success-50); }
.border-success-50:active { border-color: var(--success-50); }

.border-success-40 { border-color: var(--success-40); }
.border-success-40:hover { border-color: var(--success-40); }
.border-success-40:focus { border-color: var(--success-40); }
.border-success-40:active { border-color: var(--success-40); }

.border-success-30 { border-color: var(--success-30); }
.border-success-30:hover { border-color: var(--success-30); }
.border-success-30:focus { border-color: var(--success-30); }
.border-success-30:active { border-color: var(--success-30); }

.border-success-20 { border-color: var(--success-20); }
.border-success-20:hover { border-color: var(--success-20); }
.border-success-20:focus { border-color: var(--success-20); }
.border-success-20:active { border-color: var(--success-20); }

.border-success-10 { border-color: var(--success-10); }
.border-success-10:hover { border-color: var(--success-10); }
.border-success-10:focus { border-color: var(--success-10); }
.border-success-10:active { border-color: var(--success-10); }

/* Error Colours */
.border-error-100 { border-color: var(--error-100); }
.border-error-100:hover { border-color: var(--error-100); }
.border-error-100:focus { border-color: var(--error-100); }
.border-error-100:active { border-color: var(--error-100); }

.border-error-90 { border-color: var(--error-90); }
.border-error-90:hover { border-color: var(--error-90); }
.border-error-90:focus { border-color: var(--error-90); }
.border-error-90:active { border-color: var(--error-90); }

.border-error-80 { border-color: var(--error-80); }
.border-error-80:hover { border-color: var(--error-80); }
.border-error-80:focus { border-color: var(--error-80); }
.border-error-80:active { border-color: var(--error-80); }

.border-error-70 { border-color: var(--error-70); }
.border-error-70:hover { border-color: var(--error-70); }
.border-error-70:focus { border-color: var(--error-70); }
.border-error-70:active { border-color: var(--error-70); }

.border-error-60 { border-color: var(--error-60); }
.border-error-60:hover { border-color: var(--error-60); }
.border-error-60:focus { border-color: var(--error-60); }
.border-error-60:active { border-color: var(--error-60); }

.border-error-50 { border-color: var(--error-50); }
.border-error-50:hover { border-color: var(--error-50); }
.border-error-50:focus { border-color: var(--error-50); }
.border-error-50:active { border-color: var(--error-50); }

.border-error-40 { border-color: var(--error-40); }
.border-error-40:hover { border-color: var(--error-40); }
.border-error-40:focus { border-color: var(--error-40); }
.border-error-40:active { border-color: var(--error-40); }

.border-error-30 { border-color: var(--error-30); }
.border-error-30:hover { border-color: var(--error-30); }
.border-error-30:focus { border-color: var(--error-30); }
.border-error-30:active { border-color: var(--error-30); }

.border-error-20 { border-color: var(--error-20); }
.border-error-20:hover { border-color: var(--error-20); }
.border-error-20:focus { border-color: var(--error-20); }
.border-error-20:active { border-color: var(--error-20); }

.border-error-10 { border-color: var(--error-10); }
.border-error-10:hover { border-color: var(--error-10); }
.border-error-10:focus { border-color: var(--error-10); }
.border-error-10:active { border-color: var(--error-10); }

/* Alert Colours */
.border-alert-100 { border-color: var(--alert-100); }
.border-alert-100:hover { border-color: var(--alert-100); }
.border-alert-100:focus { border-color: var(--alert-100); }
.border-alert-100:active { border-color: var(--alert-100); }

.border-alert-90 { border-color: var(--alert-90); }
.border-alert-90:hover { border-color: var(--alert-90); }
.border-alert-90:focus { border-color: var(--alert-90); }
.border-alert-90:active { border-color: var(--alert-90); }

.border-alert-80 { border-color: var(--alert-80); }
.border-alert-80:hover { border-color: var(--alert-80); }
.border-alert-80:focus { border-color: var(--alert-80); }
.border-alert-80:active { border-color: var(--alert-80); }

.border-alert-70 { border-color: var(--alert-70); }
.border-alert-70:hover { border-color: var(--alert-70); }
.border-alert-70:focus { border-color: var(--alert-70); }
.border-alert-70:active { border-color: var(--alert-70); }

.border-alert-60 { border-color: var(--alert-60); }
.border-alert-60:hover { border-color: var(--alert-60); }
.border-alert-60:focus { border-color: var(--alert-60); }
.border-alert-60:active { border-color: var(--alert-60); }

.border-alert-50 { border-color: var(--alert-50); }
.border-alert-50:hover { border-color: var(--alert-50); }
.border-alert-50:focus { border-color: var(--alert-50); }
.border-alert-50:active { border-color: var(--alert-50); }

.border-alert-40 { border-color: var(--alert-40); }
.border-alert-40:hover { border-color: var(--alert-40); }
.border-alert-40:focus { border-color: var(--alert-40); }
.border-alert-40:active { border-color: var(--alert-40); }

.border-alert-30 { border-color: var(--alert-30); }
.border-alert-30:hover { border-color: var(--alert-30); }
.border-alert-30:focus { border-color: var(--alert-30); }
.border-alert-30:active { border-color: var(--alert-30); }

.border-alert-20 { border-color: var(--alert-20); }
.border-alert-20:hover { border-color: var(--alert-20); }
.border-alert-20:focus { border-color: var(--alert-20); }
.border-alert-20:active { border-color: var(--alert-20); }

.border-alert-10 { border-color: var(--alert-10); }
.border-alert-10:hover { border-color: var(--alert-10); }
.border-alert-10:focus { border-color: var(--alert-10); }
.border-alert-10:active { border-color: var(--alert-10); }

/* Teal Colours */
.border-teal-100 { border-color: var(--teal-100); }
.border-teal-100:hover { border-color: var(--teal-100); }
.border-teal-100:focus { border-color: var(--teal-100); }
.border-teal-100:active { border-color: var(--teal-100); }

.border-teal-90 { border-color: var(--teal-90); }
.border-teal-90:hover { border-color: var(--teal-90); }
.border-teal-90:focus { border-color: var(--teal-90); }
.border-teal-90:active { border-color: var(--teal-90); }

.border-teal-80 { border-color: var(--teal-80); }
.border-teal-80:hover { border-color: var(--teal-80); }
.border-teal-80:focus { border-color: var(--teal-80); }
.border-teal-80:active { border-color: var(--teal-80); }

.border-teal-70 { border-color: var(--teal-70); }
.border-teal-70:hover { border-color: var(--teal-70); }
.border-teal-70:focus { border-color: var(--teal-70); }
.border-teal-70:active { border-color: var(--teal-70); }

.border-teal-60 { border-color: var(--teal-60); }
.border-teal-60:hover { border-color: var(--teal-60); }
.border-teal-60:focus { border-color: var(--teal-60); }
.border-teal-60:active { border-color: var(--teal-60); }

.border-teal-50 { border-color: var(--teal-50); }
.border-teal-50:hover { border-color: var(--teal-50); }
.border-teal-50:focus { border-color: var(--teal-50); }
.border-teal-50:active { border-color: var(--teal-50); }

.border-teal-40 { border-color: var(--teal-40); }
.border-teal-40:hover { border-color: var(--teal-40); }
.border-teal-40:focus { border-color: var(--teal-40); }
.border-teal-40:active { border-color: var(--teal-40); }

.border-teal-30 { border-color: var(--teal-30); }
.border-teal-30:hover { border-color: var(--teal-30); }
.border-teal-30:focus { border-color: var(--teal-30); }
.border-teal-30:active { border-color: var(--teal-30); }

.border-teal-20 { border-color: var(--teal-20); }
.border-teal-20:hover { border-color: var(--teal-20); }
.border-teal-20:focus { border-color: var(--teal-20); }
.border-teal-20:active { border-color: var(--teal-20); }

.border-teal-10 { border-color: var(--teal-10); }
.border-teal-10:hover { border-color: var(--teal-10); }
.border-teal-10:focus { border-color: var(--teal-10); }
.border-teal-10:active { border-color: var(--teal-10); }

/* Berry Colours */
.border-berry-100 { border-color: var(--berry-100); }
.border-berry-100:hover { border-color: var(--berry-100); }
.border-berry-100:focus { border-color: var(--berry-100); }
.border-berry-100:active { border-color: var(--berry-100); }

.border-berry-90 { border-color: var(--berry-90); }
.border-berry-90:hover { border-color: var(--berry-90); }
.border-berry-90:focus { border-color: var(--berry-90); }
.border-berry-90:active { border-color: var(--berry-90); }

.border-berry-80 { border-color: var(--berry-80); }
.border-berry-80:hover { border-color: var(--berry-80); }
.border-berry-80:focus { border-color: var(--berry-80); }
.border-berry-80:active { border-color: var(--berry-80); }

.border-berry-70 { border-color: var(--berry-70); }
.border-berry-70:hover { border-color: var(--berry-70); }
.border-berry-70:focus { border-color: var(--berry-70); }
.border-berry-70:active { border-color: var(--berry-70); }

.border-berry-60 { border-color: var(--berry-60); }
.border-berry-60:hover { border-color: var(--berry-60); }
.border-berry-60:focus { border-color: var(--berry-60); }
.border-berry-60:active { border-color: var(--berry-60); }

.border-berry-50 { border-color: var(--berry-50); }
.border-berry-50:hover { border-color: var(--berry-50); }
.border-berry-50:focus { border-color: var(--berry-50); }
.border-berry-50:active { border-color: var(--berry-50); }

.border-berry-40 { border-color: var(--berry-40); }
.border-berry-40:hover { border-color: var(--berry-40); }
.border-berry-40:focus { border-color: var(--berry-40); }
.border-berry-40:active { border-color: var(--berry-40); }

.border-berry-30 { border-color: var(--berry-30); }
.border-berry-30:hover { border-color: var(--berry-30); }
.border-berry-30:focus { border-color: var(--berry-30); }
.border-berry-30:active { border-color: var(--berry-30); }

.border-berry-20 { border-color: var(--berry-20); }
.border-berry-20:hover { border-color: var(--berry-20); }
.border-berry-20:focus { border-color: var(--berry-20); }
.border-berry-20:active { border-color: var(--berry-20); }

.border-berry-10 { border-color: var(--berry-10); }
.border-berry-10:hover { border-color: var(--berry-10); }
.border-berry-10:focus { border-color: var(--berry-10); }
.border-berry-10:active { border-color: var(--berry-10); }

/* Plum Colours */
.border-plum-100 { border-color: var(--plum-100); }
.border-plum-100:hover { border-color: var(--plum-100); }
.border-plum-100:focus { border-color: var(--plum-100); }
.border-plum-100:active { border-color: var(--plum-100); }

.border-plum-90 { border-color: var(--plum-90); }
.border-plum-90:hover { border-color: var(--plum-90); }
.border-plum-90:focus { border-color: var(--plum-90); }
.border-plum-90:active { border-color: var(--plum-90); }

.border-plum-80 { border-color: var(--plum-80); }
.border-plum-80:hover { border-color: var(--plum-80); }
.border-plum-80:focus { border-color: var(--plum-80); }
.border-plum-80:active { border-color: var(--plum-80); }

.border-plum-70 { border-color: var(--plum-70); }
.border-plum-70:hover { border-color: var(--plum-70); }
.border-plum-70:focus { border-color: var(--plum-70); }
.border-plum-70:active { border-color: var(--plum-70); }

.border-plum-60 { border-color: var(--plum-60); }
.border-plum-60:hover { border-color: var(--plum-60); }
.border-plum-60:focus { border-color: var(--plum-60); }
.border-plum-60:active { border-color: var(--plum-60); }

.border-plum-50 { border-color: var(--plum-50); }
.border-plum-50:hover { border-color: var(--plum-50); }
.border-plum-50:focus { border-color: var(--plum-50); }
.border-plum-50:active { border-color: var(--plum-50); }

.border-plum-40 { border-color: var(--plum-40); }
.border-plum-40:hover { border-color: var(--plum-40); }
.border-plum-40:focus { border-color: var(--plum-40); }
.border-plum-40:active { border-color: var(--plum-40); }

.border-plum-30 { border-color: var(--plum-30); }
.border-plum-30:hover { border-color: var(--plum-30); }
.border-plum-30:focus { border-color: var(--plum-30); }
.border-plum-30:active { border-color: var(--plum-30); }

.border-plum-20 { border-color: var(--plum-20); }
.border-plum-20:hover { border-color: var(--plum-20); }
.border-plum-20:focus { border-color: var(--plum-20); }
.border-plum-20:active { border-color: var(--plum-20); }

.border-plum-10 { border-color: var(--plum-10); }
.border-plum-10:hover { border-color: var(--plum-10); }
.border-plum-10:focus { border-color: var(--plum-10); }
.border-plum-10:active { border-color: var(--plum-10); }

/* Aqua Colours */
.border-aqua-100 { border-color: var(--aqua-100); }
.border-aqua-100:hover { border-color: var(--aqua-100); }
.border-aqua-100:focus { border-color: var(--aqua-100); }
.border-aqua-100:active { border-color: var(--aqua-100); }

.border-aqua-90 { border-color: var(--aqua-90); }
.border-aqua-90:hover { border-color: var(--aqua-90); }
.border-aqua-90:focus { border-color: var(--aqua-90); }
.border-aqua-90:active { border-color: var(--aqua-90); }

.border-aqua-80 { border-color: var(--aqua-80); }
.border-aqua-80:hover { border-color: var(--aqua-80); }
.border-aqua-80:focus { border-color: var(--aqua-80); }
.border-aqua-80:active { border-color: var(--aqua-80); }

.border-aqua-70 { border-color: var(--aqua-70); }
.border-aqua-70:hover { border-color: var(--aqua-70); }
.border-aqua-70:focus { border-color: var(--aqua-70); }
.border-aqua-70:active { border-color: var(--aqua-70); }

.border-aqua-60 { border-color: var(--aqua-60); }
.border-aqua-60:hover { border-color: var(--aqua-60); }
.border-aqua-60:focus { border-color: var(--aqua-60); }
.border-aqua-60:active { border-color: var(--aqua-60); }

.border-aqua-50 { border-color: var(--aqua-50); }
.border-aqua-50:hover { border-color: var(--aqua-50); }
.border-aqua-50:focus { border-color: var(--aqua-50); }
.border-aqua-50:active { border-color: var(--aqua-50); }

.border-aqua-40 { border-color: var(--aqua-40); }
.border-aqua-40:hover { border-color: var(--aqua-40); }
.border-aqua-40:focus { border-color: var(--aqua-40); }
.border-aqua-40:active { border-color: var(--aqua-40); }

.border-aqua-30 { border-color: var(--aqua-30); }
.border-aqua-30:hover { border-color: var(--aqua-30); }
.border-aqua-30:focus { border-color: var(--aqua-30); }
.border-aqua-30:active { border-color: var(--aqua-30); }

.border-aqua-20 { border-color: var(--aqua-20); }
.border-aqua-20:hover { border-color: var(--aqua-20); }
.border-aqua-20:focus { border-color: var(--aqua-20); }
.border-aqua-20:active { border-color: var(--aqua-20); }

.border-aqua-10 { border-color: var(--aqua-10); }
.border-aqua-10:hover { border-color: var(--aqua-10); }
.border-aqua-10:focus { border-color: var(--aqua-10); }
.border-aqua-10:active { border-color: var(--aqua-10); }

/* Orange Colours */
.border-orange-100 { border-color: var(--orange-100); }
.border-orange-100:hover { border-color: var(--orange-100); }
.border-orange-100:focus { border-color: var(--orange-100); }
.border-orange-100:active { border-color: var(--orange-100); }

.border-orange-90 { border-color: var(--orange-90); }
.border-orange-90:hover { border-color: var(--orange-90); }
.border-orange-90:focus { border-color: var(--orange-90); }
.border-orange-90:active { border-color: var(--orange-90); }

.border-orange-80 { border-color: var(--orange-80); }
.border-orange-80:hover { border-color: var(--orange-80); }
.border-orange-80:focus { border-color: var(--orange-80); }
.border-orange-80:active { border-color: var(--orange-80); }

.border-orange-70 { border-color: var(--orange-70); }
.border-orange-70:hover { border-color: var(--orange-70); }
.border-orange-70:focus { border-color: var(--orange-70); }
.border-orange-70:active { border-color: var(--orange-70); }

.border-orange-60 { border-color: var(--orange-60); }
.border-orange-60:hover { border-color: var(--orange-60); }
.border-orange-60:focus { border-color: var(--orange-60); }
.border-orange-60:active { border-color: var(--orange-60); }

.border-orange-50 { border-color: var(--orange-50); }
.border-orange-50:hover { border-color: var(--orange-50); }
.border-orange-50:focus { border-color: var(--orange-50); }
.border-orange-50:active { border-color: var(--orange-50); }

.border-orange-40 { border-color: var(--orange-40); }
.border-orange-40:hover { border-color: var(--orange-40); }
.border-orange-40:focus { border-color: var(--orange-40); }
.border-orange-40:active { border-color: var(--orange-40); }

.border-orange-30 { border-color: var(--orange-30); }
.border-orange-30:hover { border-color: var(--orange-30); }
.border-orange-30:focus { border-color: var(--orange-30); }
.border-orange-30:active { border-color: var(--orange-30); }

.border-orange-20 { border-color: var(--orange-20); }
.border-orange-20:hover { border-color: var(--orange-20); }
.border-orange-20:focus { border-color: var(--orange-20); }
.border-orange-20:active { border-color: var(--orange-20); }

.border-orange-10 { border-color: var(--orange-10); }
.border-orange-10:hover { border-color: var(--orange-10); }
.border-orange-10:focus { border-color: var(--orange-10); }
.border-orange-10:active { border-color: var(--orange-10); }

/* Buttercup Colours */
.border-buttercup-100 { border-color: var(--buttercup-100); }
.border-buttercup-100:hover { border-color: var(--buttercup-100); }
.border-buttercup-100:focus { border-color: var(--buttercup-100); }
.border-buttercup-100:active { border-color: var(--buttercup-100); }

.border-buttercup-90 { border-color: var(--buttercup-90); }
.border-buttercup-90:hover { border-color: var(--buttercup-90); }
.border-buttercup-90:focus { border-color: var(--buttercup-90); }
.border-buttercup-90:active { border-color: var(--buttercup-90); }

.border-buttercup-80 { border-color: var(--buttercup-80); }
.border-buttercup-80:hover { border-color: var(--buttercup-80); }
.border-buttercup-80:focus { border-color: var(--buttercup-80); }
.border-buttercup-80:active { border-color: var(--buttercup-80); }

.border-buttercup-70 { border-color: var(--buttercup-70); }
.border-buttercup-70:hover { border-color: var(--buttercup-70); }
.border-buttercup-70:focus { border-color: var(--buttercup-70); }
.border-buttercup-70:active { border-color: var(--buttercup-70); }

.border-buttercup-60 { border-color: var(--buttercup-60); }
.border-buttercup-60:hover { border-color: var(--buttercup-60); }
.border-buttercup-60:focus { border-color: var(--buttercup-60); }
.border-buttercup-60:active { border-color: var(--buttercup-60); }

.border-buttercup-50 { border-color: var(--buttercup-50); }
.border-buttercup-50:hover { border-color: var(--buttercup-50); }
.border-buttercup-50:focus { border-color: var(--buttercup-50); }
.border-buttercup-50:active { border-color: var(--buttercup-50); }

.border-buttercup-40 { border-color: var(--buttercup-40); }
.border-buttercup-40:hover { border-color: var(--buttercup-40); }
.border-buttercup-40:focus { border-color: var(--buttercup-40); }
.border-buttercup-40:active { border-color: var(--buttercup-40); }

.border-buttercup-30 { border-color: var(--buttercup-30); }
.border-buttercup-30:hover { border-color: var(--buttercup-30); }
.border-buttercup-30:focus { border-color: var(--buttercup-30); }
.border-buttercup-30:active { border-color: var(--buttercup-30); }

.border-buttercup-20 { border-color: var(--buttercup-20); }
.border-buttercup-20:hover { border-color: var(--buttercup-20); }
.border-buttercup-20:focus { border-color: var(--buttercup-20); }
.border-buttercup-20:active { border-color: var(--buttercup-20); }

.border-buttercup-10 { border-color: var(--buttercup-10); }
.border-buttercup-10:hover { border-color: var(--buttercup-10); }
.border-buttercup-10:focus { border-color: var(--buttercup-10); }
.border-buttercup-10:active { border-color: var(--buttercup-10); }