@7shifts/sous-chef 2.17.1 → 2.18.0

package/dist/index.css

@@ -1,95 +1,261 @@
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
-._v0AEt {
-  font-family: "Proxima Nova", sans-serif;
-  position: absolute;
-  list-style: none;
-  min-width: 160px;
-  margin: 2px 0 0 0;
-  padding: 5px 0;
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-  background: #fff;
-  margin-top: 8px;
-  z-index: 9999;
-  opacity: 0;
-  transform-origin: top right;
-  transform: scale(0);
-  visibility: hidden;
-}
-
-._lxd1B {
-  opacity: 1;
-  transform: scale(1);
-  visibility: visible;
-}
-
-._IRJ4j {
-  padding: 12px 20px;
-  font-size: 14px;
-  line-height: 20px;
-  display: flex;
-  cursor: pointer;
-  white-space: nowrap;
-  color: #464646;
-}
-._IRJ4j:hover {
-  background: #F3F3F3;
-}
-._3-eyQ {
+:root {
+  --color-white: #fff;
+  --color-white-rgb: 255, 255, 255;
+  --color-black: #000;
+  --color-black-rgb: 0, 0, 0;
+  --color-tangerine-100: #fef1ed;
+  --color-tangerine-100-rgb: 254, 241, 237;
+  --color-tangerine-200: #fdd5c8;
+  --color-tangerine-200-rgb: 253, 213, 200;
+  --color-tangerine-300: #fcab91;
+  --color-tangerine-300-rgb: 252, 171, 145;
+  --color-tangerine-400: #fb7448;
+  --color-tangerine-400-rgb: 251, 116, 72;
+  --color-tangerine-500: #e16840;
+  --color-tangerine-500-rgb: 225, 104, 64;
+  --color-tangerine-600: #96452b;
+  --color-tangerine-600-rgb: 150, 69, 43;
+  --color-eggplant-100: #f0f3fb;
+  --color-eggplant-100-rgb: 240, 243, 251;
+  --color-eggplant-200: #d3dbf4;
+  --color-eggplant-200-rgb: 211, 219, 244;
+  --color-eggplant-300: #a7b7ea;
+  --color-eggplant-300-rgb: 67, 183, 234;
+  --color-eggplant-400: #6d87dd;
+  --color-eggplant-400-rgb: 109, 135, 221;
+  --color-eggplant-500: #6179c6;
+  --color-eggplant-500-rgb: 97, 121, 198;
+  --color-eggplant-600: #415184;
+  --color-eggplant-600-rgb: 65, 81, 132;
+  --color-mint-100: #ecfaf8;
+  --color-mint-100-rgb: 236, 250, 248;
+  --color-mint-200: #c6f1eb;
+  --color-mint-200-rgb: 198, 241, 235;
+  --color-mint-300: #8de4d7;
+  --color-mint-300-rgb: 141, 228, 215;
+  --color-mint-400: #3abda9;
+  --color-mint-400-rgb: 58, 189, 169;
+  --color-mint-500: #35ac9a;
+  --color-mint-500-rgb: 53, 172, 154;
+  --color-mint-600: #277e71;
+  --color-mint-600-rgb: 39, 126, 113;
+  --color-radish-100: #fcf0f0;
+  --color-radish-100-rgb: 252, 240, 240;
+  --color-radish-200: #f7d1d1;
+  --color-radish-200-rgb: 247, 209, 209;
+  --color-radish-300: #f0a3a3;
+  --color-radish-300-rgb: 240, 163, 163;
+  --color-radish-400: #e76767;
+  --color-radish-400-rgb: 231, 103, 103;
+  --color-radish-500: #cf5c5c;
+  --color-radish-500-rgb: 207, 92, 92;
+  --color-radish-600: #8a3d3d;
+  --color-radish-600-rgb: 138, 61, 61;
+  --color-blueberry-100: #f6fdff;
+  --color-blueberry-100-rgb: 246, 253, 255;
+  --color-blueberry-200: #ceecf5;
+  --color-blueberry-200-rgb: 206, 236, 245;
+  --color-blueberry-300: #9cd9eb;
+  --color-blueberry-300-rgb: 156, 217, 235;
+  --color-blueberry-400: #5bc0de;
+  --color-blueberry-400-rgb: 91, 192, 222;
+  --color-blueberry-500: #51acc7;
+  --color-blueberry-500-rgb: 81, 172, 199;
+  --color-blueberry-600: #367385;
+  --color-blueberry-600-rgb: 54, 115, 133;
+  --color-banana-100: #fff9ed;
+  --color-banana-100-rgb: 255, 249, 237;
+  --color-banana-200: #ffeec9;
+  --color-banana-200-rgb: 255, 238, 201;
+  --color-banana-300: #ffdd92;
+  --color-banana-300-rgb: 255, 221, 146;
+  --color-banana-400: #ffc74a;
+  --color-banana-400-rgb: 255, 199, 74;
+  --color-banana-500: #e5b242;
+  --color-banana-500-rgb: 229, 178, 66;
+  --color-banana-600: #99772c;
+  --color-banana-600-rgb: 153, 119, 44;
+  --color-grey-100: #f3f3f3;
+  --color-grey-100-rgb: 243, 243, 243;
+  --color-grey-200: #d5d5d5;
+  --color-grey-200-rgb: 213, 213, 213;
+  --color-grey-300: #949494;
+  --color-grey-300-rgb: 148, 148, 148;
+  --color-grey-400: #767676;
+  --color-grey-400-rgb: 118, 118, 118;
+  --color-grey-500: #464646;
+  --color-grey-500-rgb: 70, 70, 70;
+  --color-grey-600: #323232;
+  --color-grey-600-rgb: 50, 50, 50;
+}
+._1DgA2 {
   display: flex;
 }
-._3-eyQ .form__group {
+._1DgA2 .form__group {
   margin: 0;
 }
 
-._kf0KG {
+._3HjO2 {
   align-items: center;
 }
 
-._3xCGO {
+._3r9Wx {
   align-items: flex-end;
 }
 
-._3R2c9 {
+._oIWCF {
   align-items: flex-start;
 }
 
-._Zvv8e {
+._36c9a {
   justify-content: center;
 }
 
-._2hBMj {
+._1bNEh {
   justify-content: flex-end;
 }
 
-._3hKWn {
+._1VoZz {
   justify-content: space-between;
 }
 
-._3ACwY {
+._2GoV5 {
   justify-content: flex-start;
 }
 
-._2pujZ {
+._QuNgn {
   display: inline-flex;
 }
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
+._1QDLF {
+  color: var(--color-grey-500);
+  font-family: "Proxima Nova", sans-serif;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+._2wiMV {
+  line-height: normal;
+  padding: 0;
+  width: auto;
+  float: none;
+  color: var(--color-grey-500);
+  font-family: "Proxima Nova", sans-serif;
+  font-weight: 600;
+  font-size: 14px;
+  min-height: 16px;
+}
+
+._fu5zH {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/**
+This component is built with acessibility in mind.
+The `<input type="checkbox" />` is not removed from screen or changed its `apparence`. It would mess up with the `outline`.
+Instead we are keeping it on the screen with a `opacity: 0`. When it is active we turn the `outline` on the upper class to keep the native bahaviour.
+
+Just for future references:
+`.toggle [type='checkbox']` = input checkbox
+`.toggle__switch::before`   = toggle bottom layer
+`.toggle__switch::after`    = toggle knub
 */
+._1ui8X {
+  display: inline-flex;
+  align-items: center;
+  line-height: normal;
+  padding: 0;
+  width: auto;
+}
+
+._1YRJT {
+  line-height: normal;
+  padding: 0;
+  width: auto;
+  float: none;
+  color: var(--color-grey-500);
+  font-family: "Proxima Nova", sans-serif;
+  font-weight: 600;
+  font-size: 14px;
+  min-height: 16px;
+  margin-left: 8px;
+}
+
+._1jEiW {
+  color: var(--color-grey-500);
+  font-family: "Proxima Nova", sans-serif;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  margin-left: 48px;
+  display: block;
+}
+
+._1ui8X [type=checkbox] {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+._3tNyE {
+  position: relative;
+  cursor: pointer;
+}
+
+/* default states */
+._3tNyE::before {
+  content: "";
+  display: block;
+  background: var(--color-grey-200);
+  transition: all ease-in-out 150ms;
+  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.03);
+  border-radius: 26px;
+  height: 20px;
+  width: 40px;
+}
+
+._3tNyE::after {
+  content: "";
+  display: block;
+  position: absolute;
+  left: 2px;
+  right: 21px;
+  top: 2px;
+  background: var(--color-white);
+  border: 1px solid var(--color-grey-200);
+  border-radius: 24px;
+  height: 14px;
+  width: 14px;
+  transition: all ease-in-out 150ms;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.03);
+}
+
+/* special states */
+._1ui8X [type=checkbox]:focus-visible + ._3tNyE {
+  outline: var(--color-eggplant-400) solid 1px;
+}
+
+._1ui8X [type=checkbox]:disabled + ._3tNyE {
+  opacity: 0.4;
+  cursor: default;
+}
+
+._1ui8X [type=checkbox]:disabled + ._3tNyE::after {
+  box-shadow: none;
+}
+
+/* checked states */
+._1ui8X [type=checkbox]:checked + ._3tNyE::before {
+  background: var(--color-mint-400);
+}
+
+._1ui8X [type=checkbox]:checked + ._3tNyE::after {
+  border-color: var(--color-mint-400);
+  left: 21px;
+  right: 2px;
+}
 ._2wtfD {
   -webkit-animation: _2Jprn 1.4s linear infinite;
           animation: _2Jprn 1.4s linear infinite;
@@ -121,22 +287,22 @@ Please ask a designer if you have questions about which colours to use.
 ._3zucL {
   stroke-dasharray: 187;
   stroke-dashoffset: 0;
-  stroke: #fb7448;
+  stroke: var(--color-tangerine-400);
   transform-origin: center;
   -webkit-animation: _3ZqYM 1.4s ease-in-out infinite;
           animation: _3ZqYM 1.4s ease-in-out infinite;
 }
 
 ._3XYKx {
-  stroke: #3abda9;
+  stroke: var(--color-mint-400);
 }
 
 ._1pYbs {
-  stroke: #949494;
+  stroke: var(--color-grey-300);
 }
 
 ._3ofDF {
-  stroke: #fff;
+  stroke: var(--color-white);
 }
 
 ._e0OH1 {
@@ -170,33 +336,11 @@ Please ask a designer if you have questions about which colours to use.
     transform: rotate(450deg);
   }
 }
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
 ._1P_xb {
   display: inline-block;
   position: relative;
   text-align: left;
 }
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
 ._3h-8V {
   font-family: "Proxima Nova", sans-serif;
   font-size: 14px;
@@ -214,12 +358,12 @@ Please ask a designer if you have questions about which colours to use.
   opacity: 1;
 }
 ._2fg5c {
-  background: #323232;
-  color: #fff;
+  background: var(--color-grey-600);
+  color: var(--color-white);
 }
 ._1iXKZ {
-  background: #fff;
-  color: #464646;
+  background: var(--color-white);
+  color: var(--color-grey-500);
 }
 ._2K2Xx {
   font-weight: 600;
@@ -246,24 +390,13 @@ Please ask a designer if you have questions about which colours to use.
   opacity: 1;
 }
 ._2l-Dg {
-  border-top-color: #323232;
-  color: #fff;
+  border-top-color: var(--color-grey-600);
+  color: var(--color-white);
 }
 ._2LAWl {
-  border-top-color: #fff;
-  color: #464646;
-}
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
+  border-top-color: var(--color-white);
+  color: var(--color-grey-500);
+}
 ._1SQ_p {
   font-family: "Proxima Nova", sans-serif;
   font-weight: 600;
@@ -300,7 +433,7 @@ Please ask a designer if you have questions about which colours to use.
   height: 16px;
 }
 ._1SQ_p:focus {
-  box-shadow: 0 0 8px #a7b7ea;
+  box-shadow: 0 0 8px var(--color-eggplant-300);
   outline: none;
   text-decoration: none;
 }
@@ -339,743 +472,586 @@ Please ask a designer if you have questions about which colours to use.
 }
 
 ._3OB2g {
-  background: #F3F3F3;
-  border-color: #D5D5D5;
-  color: #464646;
+  background: var(--color-grey-100);
+  border-color: var(--color-grey-200);
+  color: var(--color-grey-500);
 }
 ._3OB2g:hover {
-  background: #D5D5D5;
-  border-color: #949494;
-  color: #323232;
+  background: var(--color-grey-200);
+  border-color: var(--color-grey-300);
+  color: var(--color-grey-600);
 }
 ._3OB2g:disabled {
-  background: #F3F3F3;
-  border-color: #D5D5D5;
-  color: #949494;
+  background: var(--color-grey-100);
+  border-color: var(--color-grey-200);
+  color: var(--color-grey-300);
 }
 ._3OB2g[aria-disabled=true] {
-  background: #F3F3F3;
-  border-color: #D5D5D5;
-  color: #949494;
+  background: var(--color-grey-100);
+  border-color: var(--color-grey-200);
+  color: var(--color-grey-300);
 }
 
 ._2RivT {
-  background: #3abda9;
-  border-color: #3abda9;
-  color: #fff;
+  background: var(--color-mint-400);
+  border-color: var(--color-mint-400);
+  color: var(--color-white);
 }
 ._2RivT:hover {
-  background: #35ac9a;
-  border-color: #35ac9a;
-  color: #fff;
+  background: var(--color-mint-500);
+  border-color: var(--color-mint-500);
+  color: var(--color-white);
 }
 ._2RivT:disabled {
-  background: #8de4d7;
-  border-color: #8de4d7;
-  color: #fff;
+  background: var(--color-mint-300);
+  border-color: var(--color-mint-300);
+  color: var(--color-white);
 }
 ._2RivT[aria-disabled=true] {
-  background: #8de4d7;
-  border-color: #8de4d7;
-  color: #fff;
+  background: var(--color-mint-300);
+  border-color: var(--color-mint-300);
+  color: var(--color-white);
 }
 
 ._3T8M_ {
-  background: #e76767;
-  border-color: #e76767;
-  color: #fff;
+  background: var(--color-radish-400);
+  border-color: var(--color-radish-400);
+  color: var(--color-white);
 }
 ._3T8M_:hover {
-  background: #cf5c5c;
-  border-color: #cf5c5c;
-  color: #fff;
+  background: var(--color-radish-500);
+  border-color: var(--color-radish-500);
+  color: var(--color-white);
 }
 ._3T8M_:disabled {
-  background: #f0a3a3;
-  border-color: #f0a3a3;
-  color: #fff;
+  background: var(--color-radish-300);
+  border-color: var(--color-radish-300);
+  color: var(--color-white);
 }
 ._3T8M_[aria-disabled=true] {
-  background: #f0a3a3;
-  border-color: #f0a3a3;
-  color: #fff;
+  background: var(--color-radish-300);
+  border-color: var(--color-radish-300);
+  color: var(--color-white);
 }
 
 ._1AYVC {
-  background: #6d87dd;
-  border-color: #6d87dd;
-  color: #fff;
+  background: var(--color-eggplant-400);
+  border-color: var(--color-eggplant-400);
+  color: var(--color-white);
 }
 ._1AYVC:hover {
-  background: #6179c6;
-  border-color: #6179c6;
-  color: #fff;
+  background: var(--color-eggplant-500);
+  border-color: var(--color-eggplant-500);
+  color: var(--color-white);
 }
 ._1AYVC:disabled {
-  background: #a7b7ea;
-  border-color: #a7b7ea;
-  color: #fff;
+  background: var(--color-eggplant-300);
+  border-color: var(--color-eggplant-300);
+  color: var(--color-white);
 }
 ._1AYVC[aria-disabled=true] {
-  background: #a7b7ea;
-  border-color: #a7b7ea;
-  color: #fff;
+  background: var(--color-eggplant-300);
+  border-color: var(--color-eggplant-300);
+  color: var(--color-white);
 }
 
 ._34HiE {
-  background: #fb7448;
-  border-color: #fb7448;
-  color: #fff;
+  background: var(--color-tangerine-400);
+  border-color: var(--color-tangerine-400);
+  color: var(--color-white);
 }
 ._34HiE:hover {
-  background: #e16840;
-  border-color: #e16840;
-  color: #fff;
+  background: var(--color-tangerine-500);
+  border-color: var(--color-tangerine-500);
+  color: var(--color-white);
 }
 ._34HiE:disabled {
-  background: #fcab91;
-  border-color: #fcab91;
-  color: #fff;
+  background: var(--color-tangerine-300);
+  border-color: var(--color-tangerine-300);
+  color: var(--color-white);
 }
 ._34HiE[aria-disabled=true] {
-  background: #fcab91;
-  border-color: #fcab91;
-  color: #fff;
+  background: var(--color-tangerine-300);
+  border-color: var(--color-tangerine-300);
+  color: var(--color-white);
 }
 
 ._3BrS0 {
   background: transparent;
-  border-color: #D5D5D5;
-  color: #464646;
+  border-color: var(--color-grey-200);
+  color: var(--color-grey-500);
 }
 ._3BrS0:hover {
   background: rgba(0, 0, 0, 0.03);
-  border-color: #949494;
-  color: #323232;
+  border-color: var(--color-grey-300);
+  color: var(--color-grey-600);
 }
 ._3BrS0:disabled {
   background: transparent;
-  border-color: #D5D5D5;
-  color: #949494;
+  border-color: var(--color-grey-200);
+  color: var(--color-grey-300);
 }
 ._3BrS0[aria-disabled=true] {
   background: transparent;
-  border-color: #D5D5D5;
-  color: #949494;
+  border-color: var(--color-grey-200);
+  color: var(--color-grey-300);
+}
+
+._17InS {
+  background: transparent;
+  border-color: var(--color-white);
+  color: var(--color-white);
+}
+._17InS:hover {
+  background: rgba(var(--color-white-rgb), 0.05);
+  border-color: var(--color-white);
+  color: var(--color-white);
+}
+._17InS:disabled {
+  background: transparent;
+  border-color: var(--color-grey-200);
+  color: var(--color-grey-300);
+}
+._17InS[aria-disabled=true] {
+  background: transparent;
+  border-color: var(--color-grey-200);
+  color: var(--color-grey-300);
 }
 
 ._1LCBO {
   background: transparent;
   border-color: transparent;
-  color: #fff;
+  color: var(--color-white);
 }
 ._1LCBO:hover {
   background: rgba(255, 255, 255, 0.1);
   border-color: rgba(255, 255, 255, 0.1);
-  color: #fff;
+  color: var(--color-white);
 }
 ._1LCBO:disabled {
   background: transparent;
   border-color: transparent;
-  color: #949494;
+  color: var(--color-grey-300);
 }
 ._1LCBO[aria-disabled=true] {
   background: transparent;
   border-color: transparent;
-  color: #949494;
+  color: var(--color-grey-300);
 }
 
 ._23S36 {
   background: transparent;
   border-color: transparent;
-  color: #5bc0de;
+  color: var(--color-blueberry-400);
 }
 ._23S36:hover {
   background: rgba(0, 0, 0, 0.03);
-  border-color: #F3F3F3;
-  color: #51acc7;
+  border-color: var(--color-grey-100);
+  color: var(--color-blueberry-500);
 }
 ._23S36:disabled {
   background: transparent;
   border-color: transparent;
-  color: #949494;
+  color: var(--color-grey-300);
 }
 ._23S36[aria-disabled=true] {
   background: transparent;
   border-color: transparent;
-  color: #949494;
+  color: var(--color-grey-300);
 }
 
 ._2CzxI {
   background: transparent;
   border-color: transparent;
-  color: #e76767;
+  color: var(--color-radish-400);
 }
 ._2CzxI:hover {
   background: rgba(0, 0, 0, 0.03);
-  border-color: #F3F3F3;
-  color: #cf5c5c;
+  border-color: var(--color-grey-100);
+  color: var(--color-radish-500);
 }
 ._2CzxI:disabled {
   background: transparent;
   border-color: transparent;
-  color: #949494;
+  color: var(--color-grey-300);
 }
 ._2CzxI[aria-disabled=true] {
   background: transparent;
   border-color: transparent;
-  color: #949494;
+  color: var(--color-grey-300);
 }
 
 ._21e4m {
   background: transparent;
   border-color: transparent;
-  color: #6d87dd;
+  color: var(--color-eggplant-400);
 }
 ._21e4m:hover {
   background: rgba(0, 0, 0, 0.03);
-  border-color: #F3F3F3;
-  color: #6179c6;
+  border-color: var(--color-grey-100);
+  color: var(--color-eggplant-500);
 }
 ._21e4m:disabled {
   background: transparent;
   border-color: transparent;
-  color: #949494;
+  color: var(--color-grey-300);
 }
 ._21e4m[aria-disabled=true] {
   background: transparent;
   border-color: transparent;
-  color: #949494;
+  color: var(--color-grey-300);
 }
 
 ._2-ESu {
   background: transparent;
   border-color: transparent;
-  color: #464646;
+  color: var(--color-grey-500);
 }
 ._2-ESu:hover {
   background: rgba(0, 0, 0, 0.03);
-  border-color: #F3F3F3;
-  color: #464646;
+  border-color: var(--color-grey-100);
+  color: var(--color-grey-500);
 }
 ._2-ESu:disabled {
   background: transparent;
   border-color: transparent;
-  color: #949494;
+  color: var(--color-grey-300);
 }
 ._2-ESu[aria-disabled=true] {
   background: transparent;
   border-color: transparent;
-  color: #949494;
+  color: var(--color-grey-300);
 }
 
 ._1u3kp {
   background: transparent;
   border-color: transparent;
-  color: #767676;
+  color: var(--color-grey-400);
 }
 ._1u3kp:hover {
   background: rgba(0, 0, 0, 0.03);
-  border-color: #F3F3F3;
-  color: #767676;
+  border-color: var(--color-grey-100);
+  color: var(--color-grey-400);
 }
 ._1u3kp:disabled {
   background: transparent;
   border-color: transparent;
-  color: #949494;
+  color: var(--color-grey-300);
 }
 ._1u3kp[aria-disabled=true] {
   background: transparent;
   border-color: transparent;
-  color: #949494;
-}
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
-._3DlpO {
+  color: var(--color-grey-300);
+}
+._1IynL button:disabled {
+  border-color: var(--color-grey-200);
+}
+._1IynL button:last-child {
+  border-radius: 0 4px 4px 0;
+  margin-left: -1px;
+}
+._1IynL button:first-child {
+  border-radius: 4px 0 0 4px;
+}
+._1IynL button:not(:first-child):not(:last-child) {
+  border-radius: 0;
+  margin-left: -1px;
+}
+._3K6vV {
+  color: var(--color-blueberry-400);
+  text-decoration: none;
+}
+._3K6vV:hover {
+  text-decoration: underline;
+}
+._1xjKv {
+  color: var(--color-grey-500);
+}
+._c4pW8._c4pW8 {
+  font-family: "Proxima Nova", sans-serif;
+  background: var(--color-grey-500);
+  color: var(--color-white);
+  border-radius: 4px;
+  min-height: auto;
+  font-size: 14px;
+}
+._c4pW8._1ncFe {
+  background-color: var(--color-radish-400);
+}
+
+._3EHwm {
+  padding-left: 20px;
+}
+._v0AEt {
+  font-family: "Proxima Nova", sans-serif;
+  position: absolute;
+  list-style: none;
+  min-width: 160px;
+  margin: 2px 0 0 0;
+  padding: 5px 0;
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  background: var(--color-white);
+  margin-top: 8px;
+  z-index: 9999;
+  opacity: 0;
+  transform-origin: top right;
+  transform: scale(0);
+  visibility: hidden;
+}
+
+._lxd1B {
+  opacity: 1;
+  transform: scale(1);
+  visibility: visible;
+}
+
+._IRJ4j {
+  padding: 12px 20px;
+  font-size: 14px;
+  line-height: 20px;
+  display: flex;
+  cursor: pointer;
+  white-space: nowrap;
+  color: var(--color-grey-500);
+}
+._IRJ4j:hover {
+  background: var(--color-grey-100);
+}
+._1UG1r {
   display: flex;
   padding: 16px;
-  border: 1px solid #fff;
-  border-bottom: 1px solid #D5D5D5;
+  border: 1px solid var(--color-white);
+  border-bottom: 1px solid var(--color-grey-200);
 }
-._3DlpO:last-child:not(._NS-B9) {
-  border-bottom: 1px solid #fff;
+._1UG1r:last-child:not(._WeTZF) {
+  border-bottom: 1px solid var(--color-white);
 }
 
-._3DlpO:focus:not(:focus-visible) {
+._1UG1r:focus:not(:focus-visible) {
   /* Remove the focus indicator on mouse-focus for browsers
      that do support :focus-visible */
   outline: none;
 }
 
-._2jPpF {
+._34gnL {
   cursor: pointer;
 }
-._2jPpF:hover {
-  background-color: #F3F3F3;
+._34gnL:hover {
+  background-color: var(--color-grey-100);
 }
 
-._NS-B9 {
-  border: 1px solid #6d87dd;
+._WeTZF {
+  border: 1px solid var(--color-eggplant-400);
   box-sizing: border-box;
-  box-shadow: 0 0 8px #a7b7ea;
+  box-shadow: 0 0 8px var(--color-eggplant-300);
 }
-._NS-B9:first-child {
+._WeTZF:first-child {
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
 }
-._NS-B9:first-child:not(:last-child) {
+._WeTZF:first-child:not(:last-child) {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
-._NS-B9:last-child {
+._WeTZF:last-child {
   border-bottom-left-radius: 8px;
   border-bottom-right-radius: 8px;
 }
-._NS-B9:last-child:not(:first-child) {
+._WeTZF:last-child:not(:first-child) {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
 
-._3ENNn {
+._3gRJf {
   display: flex;
   flex-direction: column;
   justify-content: center;
   position: relative;
 }
 
-._1FTaE {
+._3ABSf {
   width: 40px;
 }
 /**
 This file probaly will be split when we split the components
 */
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
-._28AYq {
+._kxyuW {
   display: flex;
   font-size: 12px;
   font-weight: 600;
   font-family: "Proxima Nova", sans-serif;
-  color: #464646;
+  color: var(--color-grey-500);
   padding: 19px 17px 8px 17px;
 }
 
-._3-nHz {
+._13L7D {
   display: flex;
   align-items: center;
   line-height: 21px;
 }
-._2Rh0i {
+._1YCGB {
   cursor: pointer;
 }
 
-._3-nHz:focus:not(:focus-visible) {
+._13L7D:focus:not(:focus-visible) {
   /* Remove the focus indicator on mouse-focus for browsers
      that do support :focus-visible */
   outline: none;
 }
 
-._2fGMK {
+._1gpTf {
   width: 40px;
 }
 
-._W7CnY {
+._1tFcX {
   display: inline-block;
   padding: 0 8px;
   line-height: 1em;
 }
 
-._2ygIH {
-  border: 1px solid #D5D5D5;
+._ppaWg {
+  border: 1px solid var(--color-grey-200);
   border-radius: 8px;
   font-family: "Proxima Nova", sans-serif;
   font-size: 14px;
 }
 
-._2cqhY {
+._1nb-e {
   margin-top: 20px;
   font-family: "Proxima Nova", sans-serif;
 }
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
-._1IynL button:disabled {
-  border-color: #D5D5D5;
-}
-._1IynL button:last-child {
-  border-radius: 0 4px 4px 0;
-  margin-left: -1px;
-}
-._1IynL button:first-child {
-  border-radius: 4px 0 0 4px;
-}
-._1IynL button:not(:first-child):not(:last-child) {
-  border-radius: 0;
-  margin-left: -1px;
-}
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
-._1d8Ci {
+._2GGMG {
   display: flex;
 }
-._1d8Ci:not(:last-child):not(._3tb7U) {
-  border-bottom: 1px solid #D5D5D5;
+._2GGMG:not(:last-child):not(._1ZCir) {
+  border-bottom: 1px solid var(--color-grey-200);
 }
 
-._1d8Ci:focus:not(:focus-visible) {
+._2GGMG:focus:not(:focus-visible) {
   /* Remove the focus indicator on mouse-focus for browsers
      that do support :focus-visible */
   outline: none;
 }
 
-._thFcO {
+._3VoZI {
   cursor: pointer;
 }
-._thFcO:hover {
-  background-color: #F3F3F3;
+._3VoZI:hover {
+  background-color: var(--color-grey-100);
 }
 
-._3tb7U {
-  border: 1px solid #6d87dd;
+._1ZCir {
+  border: 1px solid var(--color-eggplant-400);
   box-sizing: border-box;
-  box-shadow: 0 0 8px #a7b7ea;
+  box-shadow: 0 0 8px var(--color-eggplant-300);
 }
-._3tb7U:first-child {
+._1ZCir:first-child {
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
 }
-._3tb7U:first-child:not(:last-child) {
+._1ZCir:first-child:not(:last-child) {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
-._3tb7U:last-child {
+._1ZCir:last-child {
   border-bottom-left-radius: 8px;
   border-bottom-right-radius: 8px;
 }
-._3tb7U:last-child:not(:first-child) {
+._1ZCir:last-child:not(:first-child) {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
 
-._OTcMc {
+._kcNkt {
   display: flex;
   flex-direction: column;
   justify-content: center;
   position: relative;
 }
-._lNHQ8 {
+._2obax {
   padding: 16px;
 }
-._13YLe {
+._bLVPl {
   flex-direction: unset;
   justify-content: flex-end;
 }
-._1rrRr:not(:last-child) {
-  border-right: 1px solid #D5D5D5;
+._3PWfD:not(:last-child) {
+  border-right: 1px solid var(--color-grey-200);
 }
 
-._azbIG {
+._1IGwu {
   width: 40px;
   padding: 16px;
   box-sizing: content-box;
   flex-flow: row nowrap;
   justify-content: flex-end;
 }
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
-._1QDLF {
-  color: #464646;
-  font-family: "Proxima Nova", sans-serif;
-  font-weight: 400;
-  font-size: 12px;
-}
-
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
-._2wiMV {
-  line-height: normal;
-  padding: 0;
-  width: auto;
-  float: none;
-  color: #464646;
-  font-family: "Proxima Nova", sans-serif;
-  font-weight: 600;
-  font-size: 14px;
-  min-height: 16px;
-}
-
-._fu5zH {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-/**
-This component is built with acessibility in mind.
-The `<input type="checkbox" />` is not removed from screen or changed its `apparence`. It would mess up with the `outline`.
-Instead we are keeping it on the screen with a `opacity: 0`. When it is active we turn the `outline` on the upper class to keep the native bahaviour.
-
-Just for future references:
-`.toggle [type='checkbox']` = input checkbox
-`.toggle__switch::before`   = toggle bottom layer
-`.toggle__switch::after`    = toggle knub
-*/
-._1ui8X {
-  display: inline-flex;
-  align-items: center;
-  line-height: normal;
-  padding: 0;
-  width: auto;
-}
-
-._1YRJT {
-  line-height: normal;
-  padding: 0;
-  width: auto;
-  float: none;
-  color: #464646;
-  font-family: "Proxima Nova", sans-serif;
-  font-weight: 600;
-  font-size: 14px;
-  min-height: 16px;
-  margin-left: 8px;
-}
-
-._1jEiW {
-  color: #464646;
-  font-family: "Proxima Nova", sans-serif;
-  font-weight: 400;
-  font-size: 12px;
-  margin-left: 48px;
-  display: block;
-}
-
-._1ui8X [type=checkbox] {
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-}
-
-._3tNyE {
-  position: relative;
-  cursor: pointer;
-}
-
-/* default states */
-._3tNyE::before {
-  content: "";
-  display: block;
-  background: #D5D5D5;
-  transition: all ease-in-out 150ms;
-  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.03);
-  border-radius: 26px;
-  height: 20px;
-  width: 40px;
-}
-
-._3tNyE::after {
-  content: "";
-  display: block;
-  position: absolute;
-  left: 2px;
-  right: 21px;
-  top: 2px;
-  background: #fff;
-  border: 1px solid #D5D5D5;
-  border-radius: 24px;
-  height: 14px;
-  width: 14px;
-  transition: all ease-in-out 150ms;
-  box-shadow: 0 0 4px rgba(0, 0, 0, 0.03);
-}
-
-/* special states */
-._1ui8X [type=checkbox]:focus-visible + ._3tNyE {
-  outline: #6d87dd solid 1px;
-}
-
-._1ui8X [type=checkbox]:disabled + ._3tNyE {
-  opacity: 0.4;
-  cursor: default;
-}
-
-._1ui8X [type=checkbox]:disabled + ._3tNyE::after {
-  box-shadow: none;
-}
-
-/* checked states */
-._1ui8X [type=checkbox]:checked + ._3tNyE::before {
-  background: #3abda9;
-}
-
-._1ui8X [type=checkbox]:checked + ._3tNyE::after {
-  border-color: #3abda9;
-  left: 21px;
-  right: 2px;
-}
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
-._of22N {
+._2ZgmC {
   display: flex;
   font-size: 12px;
   font-weight: 600;
   font-family: "Proxima Nova", sans-serif;
-  color: #464646;
+  color: var(--color-grey-500);
   padding: 20px 17px 8px 17px;
 }
 
-._27x4v {
+._3slLU {
   display: flex;
   align-items: center;
   line-height: 21px;
 }
-._27x4v:not(._27x4v:first-child) {
+._3slLU:not(._3slLU:first-child) {
   padding-left: 16px;
 }
-._27x4v:not(._27x4v:last-child) {
+._3slLU:not(._3slLU:last-child) {
   padding-right: 16px;
 }
-._3gw3Z {
+._1-26z {
   cursor: pointer;
 }
-._Fjm2n {
+._1vCLo {
   justify-content: flex-end;
 }
 
-._27x4v:focus:not(:focus-visible) {
+._3slLU:focus:not(:focus-visible) {
   /* Remove the focus indicator on mouse-focus for browsers
      that do support :focus-visible */
   outline: none;
 }
 
-._LoIvx {
+._2i1wY {
   width: 40px;
   box-sizing: content-box;
 }
 
-._3VjFP {
+._BLrNe {
   display: inline-block;
   padding: 0 8px;
   line-height: 1em;
 }
 
-._1bTmd {
-  border: 1px solid #D5D5D5;
+._CT4Lp {
+  border: 1px solid var(--color-grey-200);
   border-radius: 8px;
   font-family: "Proxima Nova", sans-serif;
   font-size: 14px;
 }
 
-._1opWx {
-  background: #F3F3F3;
+._398L3 {
+  background: var(--color-grey-100);
   font-weight: 600;
 }
 
-._F_spz {
+._2smmY {
   margin-top: 20px;
   font-family: "Proxima Nova", sans-serif;
 }
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
-._orjDM {
+._2Ybjx {
   padding: 16px;
 }
-._3EpfF {
+._1cXj6 {
   text-align: right;
 }
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
 ._2puqJ {
   position: fixed;
   top: 0px;
@@ -1112,8 +1088,8 @@ Please ask a designer if you have questions about which colours to use.
 
 ._wQQ_2 {
   position: initial;
-  border: 1px solid #D5D5D5;
-  background: #fff;
+  border: 1px solid var(--color-grey-200);
+  background: var(--color-white);
   overflow: auto;
   outline: none;
   padding: 32px;
@@ -1133,21 +1109,10 @@ Please ask a designer if you have questions about which colours to use.
 ._2c2QP {
   opacity: 0;
 }
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
 ._36nxW {
   font-size: 24px;
   line-height: 28px;
-  color: #464646;
+  color: var(--color-grey-500);
   font-weight: 600;
   font-family: "Proxima Nova", sans-serif;
 }
@@ -1155,20 +1120,9 @@ Please ask a designer if you have questions about which colours to use.
 ._2XwRD {
   font-size: 20px;
   line-height: 24px;
-  color: #767676;
+  color: var(--color-grey-400);
   font-family: "Proxima Nova", sans-serif;
 }
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
 /**
  * This is for adding a shadow when the body is scrollable.
  * It is using ::before and ::after to accomplish that => https://www.kizu.ru/shadowscroll/
@@ -1203,17 +1157,6 @@ Please ask a designer if you have questions about which colours to use.
   margin: -30px 0 0;
   background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 70%, #fff);
 }
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
 ._LKOr5 {
   flex: 1;
   display: flex;
@@ -1225,17 +1168,6 @@ Please ask a designer if you have questions about which colours to use.
 ._Qktd- {
   margin-left: -12px;
 }
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
 ._v1b-5 {
   flex: 1;
   display: flex;
@@ -1273,21 +1205,21 @@ Please ask a designer if you have questions about which colours to use.
   left: auto;
   display: inline-block;
   margin-top: 2px;
-  color: #949494;
+  color: var(--color-grey-300);
   cursor: pointer;
   background-image: none;
   width: 0;
   height: 0;
   border-top: 7px solid transparent;
   border-bottom: 7px solid transparent;
-  border-right: 10px solid #464646;
+  border-right: 10px solid var(--color-grey-500);
   margin-right: 1.5em;
 }
 ._20uqc:hover {
   opacity: 0.8;
 }
 ._20uqc:hover {
-  border-right-color: #767676;
+  border-right-color: var(--color-grey-400);
 }
 
 ._3C53z {
@@ -1297,21 +1229,21 @@ Please ask a designer if you have questions about which colours to use.
   left: auto;
   display: inline-block;
   margin-top: 2px;
-  color: #949494;
+  color: var(--color-grey-300);
   cursor: pointer;
   background-image: none;
   width: 0;
   height: 0;
   border-top: 7px solid transparent;
   border-bottom: 7px solid transparent;
-  border-left: 10px solid #464646;
+  border-left: 10px solid var(--color-grey-500);
 }
 ._3C53z:hover {
   opacity: 0.8;
 }
 ._3C53z:hover {
   opacity: 0.8;
-  border-left-color: #767676;
+  border-left-color: var(--color-grey-400);
 }
 
 ._M_eHz {
@@ -1342,7 +1274,7 @@ Please ask a designer if you have questions about which colours to use.
 ._1FXNw > div {
   font-weight: 600;
   font-size: 20px;
-  color: #464646;
+  color: var(--color-grey-500);
 }
 
 ._3KcRU {
@@ -1357,7 +1289,7 @@ Please ask a designer if you have questions about which colours to use.
 ._c1Y-X {
   display: table-cell;
   padding: 0.5em;
-  color: #767676;
+  color: var(--color-grey-400);
   text-align: center;
   font-size: 0.875em;
 }
@@ -1384,7 +1316,7 @@ Please ask a designer if you have questions about which colours to use.
   cursor: pointer;
 }
 ._1AWH2:not(._1J9dh):not(._3vJkw):not(._1DR0N):not(._276GV):hover {
-  background: #F3F3F3;
+  background: var(--color-grey-100);
 }
 
 ._2M5xr {
@@ -1392,31 +1324,31 @@ Please ask a designer if you have questions about which colours to use.
 }
 
 ._3N6fj {
-  color: #fb7448;
+  color: var(--color-tangerine-400);
   font-weight: 700;
 }
 
 ._1DR0N:not(._3vJkw):not(._276GV) {
-  background-color: #fdd5c8;
-  color: #fb7448;
+  background-color: var(--color-tangerine-200);
+  color: var(--color-tangerine-400);
 }
 
 ._1DR0N:not(._3vJkw):not(._276GV):hover {
-  background-color: #fb7448;
-  color: #fff;
+  background-color: var(--color-tangerine-400);
+  color: var(--color-white);
 }
 
 ._1DR0N._3N6fj:hover {
-  color: #fff;
+  color: var(--color-white);
 }
 
 ._3vJkw {
-  color: #D5D5D5;
+  color: var(--color-grey-200);
   cursor: default;
 }
 
 ._276GV:not(._3vJkw) {
-  color: #949494;
+  color: var(--color-grey-300);
   cursor: default;
 }
 
@@ -1428,7 +1360,7 @@ Please ask a designer if you have questions about which colours to use.
   position: absolute;
   left: 0;
   z-index: 1;
-  background: #fff;
+  background: var(--color-white);
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
 }
 
@@ -1436,24 +1368,13 @@ Please ask a designer if you have questions about which colours to use.
   display: table-cell;
   padding: 0.5em;
   min-width: 1em;
-  border-right: 1px solid #D5D5D5;
-  color: #949494;
+  border-right: 1px solid var(--color-grey-200);
+  color: var(--color-grey-300);
   vertical-align: middle;
   text-align: right;
   font-size: 0.75em;
   cursor: pointer;
 }
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
 ._okDvi {
   flex: 1;
   display: flex;
@@ -1491,21 +1412,21 @@ Please ask a designer if you have questions about which colours to use.
   left: auto;
   display: inline-block;
   margin-top: 2px;
-  color: #949494;
+  color: var(--color-grey-300);
   cursor: pointer;
   background-image: none;
   width: 0;
   height: 0;
   border-top: 7px solid transparent;
   border-bottom: 7px solid transparent;
-  border-right: 10px solid #464646;
+  border-right: 10px solid var(--color-grey-500);
   margin-right: 1.5em;
 }
 ._3gjq8:hover {
   opacity: 0.8;
 }
 ._3gjq8:hover {
-  border-right-color: #767676;
+  border-right-color: var(--color-grey-400);
 }
 
 ._1m-Kd {
@@ -1515,21 +1436,21 @@ Please ask a designer if you have questions about which colours to use.
   left: auto;
   display: inline-block;
   margin-top: 2px;
-  color: #949494;
+  color: var(--color-grey-300);
   cursor: pointer;
   background-image: none;
   width: 0;
   height: 0;
   border-top: 7px solid transparent;
   border-bottom: 7px solid transparent;
-  border-left: 10px solid #464646;
+  border-left: 10px solid var(--color-grey-500);
 }
 ._1m-Kd:hover {
   opacity: 0.8;
 }
 ._1m-Kd:hover {
   opacity: 0.8;
-  border-left-color: #767676;
+  border-left-color: var(--color-grey-400);
 }
 
 ._Fq6Xh {
@@ -1560,7 +1481,7 @@ Please ask a designer if you have questions about which colours to use.
 ._36X9Y > div {
   font-weight: 600;
   font-size: 20px;
-  color: #464646;
+  color: var(--color-grey-500);
 }
 
 ._1aWPn {
@@ -1575,7 +1496,7 @@ Please ask a designer if you have questions about which colours to use.
 ._t-ctd {
   display: table-cell;
   padding: 0.5em;
-  color: #767676;
+  color: var(--color-grey-400);
   text-align: center;
   font-size: 0.875em;
 }
@@ -1602,7 +1523,7 @@ Please ask a designer if you have questions about which colours to use.
   cursor: pointer;
 }
 ._3nNcG:not(._1O7OT):not(._1M4ZF):not(._2PEs8):not(._1PIJa):hover {
-  background: #F3F3F3;
+  background: var(--color-grey-100);
 }
 
 ._2T_z1 {
@@ -1610,31 +1531,31 @@ Please ask a designer if you have questions about which colours to use.
 }
 
 ._1hVM6 {
-  color: #fb7448;
+  color: var(--color-tangerine-400);
   font-weight: 700;
 }
 
 ._2PEs8:not(._1M4ZF):not(._1PIJa) {
-  background-color: #fdd5c8;
-  color: #fb7448;
+  background-color: var(--color-tangerine-200);
+  color: var(--color-tangerine-400);
 }
 
 ._2PEs8:not(._1M4ZF):not(._1PIJa):hover {
-  background-color: #fb7448;
-  color: #fff;
+  background-color: var(--color-tangerine-400);
+  color: var(--color-white);
 }
 
 ._2PEs8._1hVM6:hover {
-  color: #fff;
+  color: var(--color-white);
 }
 
 ._1M4ZF {
-  color: #D5D5D5;
+  color: var(--color-grey-200);
   cursor: default;
 }
 
 ._1PIJa:not(._1M4ZF) {
-  color: #949494;
+  color: var(--color-grey-300);
   cursor: default;
 }
 
@@ -1646,7 +1567,7 @@ Please ask a designer if you have questions about which colours to use.
   position: absolute;
   left: 0;
   z-index: 1;
-  background: #fff;
+  background: var(--color-white);
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
 }
 
@@ -1654,8 +1575,8 @@ Please ask a designer if you have questions about which colours to use.
   display: table-cell;
   padding: 0.5em;
   min-width: 1em;
-  border-right: 1px solid #D5D5D5;
-  color: #949494;
+  border-right: 1px solid var(--color-grey-200);
+  color: var(--color-grey-300);
   vertical-align: middle;
   text-align: right;
   font-size: 0.75em;
@@ -1677,8 +1598,8 @@ Please ask a designer if you have questions about which colours to use.
 }
 
 ._2PEs8:not(._1M4ZF) {
-  background-color: #fdd5c8;
-  color: #fb7448;
+  background-color: var(--color-tangerine-200);
+  color: var(--color-tangerine-400);
 }
 ._2PEs8:first-of-type {
   border-top-left-radius: 50%;
@@ -1690,11 +1611,11 @@ Please ask a designer if you have questions about which colours to use.
 }
 
 ._3Nwep:hover {
-  background: #F3F3F3;
+  background: var(--color-grey-100);
 }
 ._3Nwep:hover ._2PEs8:not(._1M4ZF) {
-  background-color: #fb7448;
-  color: #fff;
+  background-color: var(--color-tangerine-400);
+  color: var(--color-white);
 }
 ._3Nwep:hover ._3nNcG:first-of-type {
   border-top-left-radius: 50%;
@@ -1704,23 +1625,12 @@ Please ask a designer if you have questions about which colours to use.
   border-top-right-radius: 50%;
   border-bottom-right-radius: 50%;
 }
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
 ._h724f {
   line-height: normal;
   padding: 0;
   width: auto;
   float: none;
-  color: #464646;
+  color: var(--color-grey-500);
   font-family: "Proxima Nova", sans-serif;
   font-weight: 600;
   font-size: 14px;
@@ -1732,51 +1642,19 @@ Please ask a designer if you have questions about which colours to use.
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
 ._1DWBq {
-  color: #464646;
+  color: var(--color-grey-500);
   font-family: "Proxima Nova", sans-serif;
   font-weight: 400;
   font-size: 12px;
+  line-height: 16px;
 }
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
 ._nZ2MD {
-  color: #e76767;
+  color: var(--color-radish-400);
   font-family: "Proxima Nova", sans-serif;
   font-weight: 400;
   font-size: 12px;
 }
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
 ._ybKOk {
   position: relative;
   display: flex;
@@ -1795,7 +1673,7 @@ Please ask a designer if you have questions about which colours to use.
   position: absolute;
   line-height: 22px;
   padding: 8px;
-  color: #464646;
+  color: var(--color-grey-500);
   min-width: 8px;
   pointer-events: none;
   font-size: 14px;
@@ -1811,14 +1689,14 @@ Please ask a designer if you have questions about which colours to use.
   text-align: left;
 }
 ._eX5OL svg {
-  color: #767676;
+  color: var(--color-grey-400);
 }
 
 .__YH01 {
   position: absolute;
   line-height: 22px;
   padding: 8px;
-  color: #464646;
+  color: var(--color-grey-500);
   min-width: 8px;
   pointer-events: none;
   font-size: 14px;
@@ -1835,23 +1713,12 @@ Please ask a designer if you have questions about which colours to use.
   text-align: right;
 }
 .__YH01 svg {
-  color: #767676;
-}
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
-._kIngZ {
+  color: var(--color-grey-400);
+}
+._qYNve {
   width: 100%;
 }
-._kIngZ input {
+._qYNve input {
   border: 1px solid transparent;
   display: flex;
   justify-content: flex-end;
@@ -1862,70 +1729,210 @@ Please ask a designer if you have questions about which colours to use.
   font-family: "Proxima Nova", sans-serif;
   border-radius: 0;
 }
-._kIngZ input:focus {
-  border-color: #6d87dd;
-  box-shadow: 0 0 8px #a7b7ea;
+._qYNve input:focus {
+  border-color: var(--color-eggplant-400);
+  box-shadow: 0 0 8px var(--color-eggplant-300);
   outline: none;
 }
-._kIngZ input:hover {
-  background: #F3F3F3;
+._qYNve input:hover {
+  background: var(--color-grey-100);
 }
-._3_QIj {
+._3w6bw {
   text-align: right;
 }
-._2Kyuc {
+._2y-_5 {
   /* Firefox */
 }
-._2Kyuc input::-webkit-outer-spin-button,
-._2Kyuc input::-webkit-inner-spin-button {
+._2y-_5 input::-webkit-outer-spin-button,
+._2y-_5 input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
-._2Kyuc input[type=number] {
+._2y-_5 input[type=number] {
   -moz-appearance: textfield;
 }
 
-._y9SBQ._y9SBQ {
-  border-color: #e76767;
+._1Mx8j._1Mx8j,
+._1Mx8j._1Mx8j:hover {
+  border-color: var(--color-radish-400);
+  background: var(--color-radish-100);
 }
 
-._32mWH._32mWH {
+._2BlhN._2BlhN {
   border-top-left-radius: 8px;
 }
 
-._3Jg2-._3Jg2- {
+._1qDoN._1qDoN {
   border-top-right-radius: 8px;
 }
 
-._1F5fj._1F5fj {
+._2NUlb._2NUlb {
   border-bottom-left-radius: 8px;
 }
 
-._1fTTW._1fTTW {
+._3Mm-v._3Mm-v {
   border-bottom-right-radius: 8px;
 }
+._2X-yg {
+  width: 272px;
+}
+._3O5Kh {
+  width: 336px;
+}
+:root {
+  --color-white: #fff;
+  --color-white-rgb: 255, 255, 255;
+  --color-black: #000;
+  --color-black-rgb: 0, 0, 0;
+  --color-tangerine-100: #fef1ed;
+  --color-tangerine-100-rgb: 254, 241, 237;
+  --color-tangerine-200: #fdd5c8;
+  --color-tangerine-200-rgb: 253, 213, 200;
+  --color-tangerine-300: #fcab91;
+  --color-tangerine-300-rgb: 252, 171, 145;
+  --color-tangerine-400: #fb7448;
+  --color-tangerine-400-rgb: 251, 116, 72;
+  --color-tangerine-500: #e16840;
+  --color-tangerine-500-rgb: 225, 104, 64;
+  --color-tangerine-600: #96452b;
+  --color-tangerine-600-rgb: 150, 69, 43;
+  --color-eggplant-100: #f0f3fb;
+  --color-eggplant-100-rgb: 240, 243, 251;
+  --color-eggplant-200: #d3dbf4;
+  --color-eggplant-200-rgb: 211, 219, 244;
+  --color-eggplant-300: #a7b7ea;
+  --color-eggplant-300-rgb: 67, 183, 234;
+  --color-eggplant-400: #6d87dd;
+  --color-eggplant-400-rgb: 109, 135, 221;
+  --color-eggplant-500: #6179c6;
+  --color-eggplant-500-rgb: 97, 121, 198;
+  --color-eggplant-600: #415184;
+  --color-eggplant-600-rgb: 65, 81, 132;
+  --color-mint-100: #ecfaf8;
+  --color-mint-100-rgb: 236, 250, 248;
+  --color-mint-200: #c6f1eb;
+  --color-mint-200-rgb: 198, 241, 235;
+  --color-mint-300: #8de4d7;
+  --color-mint-300-rgb: 141, 228, 215;
+  --color-mint-400: #3abda9;
+  --color-mint-400-rgb: 58, 189, 169;
+  --color-mint-500: #35ac9a;
+  --color-mint-500-rgb: 53, 172, 154;
+  --color-mint-600: #277e71;
+  --color-mint-600-rgb: 39, 126, 113;
+  --color-radish-100: #fcf0f0;
+  --color-radish-100-rgb: 252, 240, 240;
+  --color-radish-200: #f7d1d1;
+  --color-radish-200-rgb: 247, 209, 209;
+  --color-radish-300: #f0a3a3;
+  --color-radish-300-rgb: 240, 163, 163;
+  --color-radish-400: #e76767;
+  --color-radish-400-rgb: 231, 103, 103;
+  --color-radish-500: #cf5c5c;
+  --color-radish-500-rgb: 207, 92, 92;
+  --color-radish-600: #8a3d3d;
+  --color-radish-600-rgb: 138, 61, 61;
+  --color-blueberry-100: #f6fdff;
+  --color-blueberry-100-rgb: 246, 253, 255;
+  --color-blueberry-200: #ceecf5;
+  --color-blueberry-200-rgb: 206, 236, 245;
+  --color-blueberry-300: #9cd9eb;
+  --color-blueberry-300-rgb: 156, 217, 235;
+  --color-blueberry-400: #5bc0de;
+  --color-blueberry-400-rgb: 91, 192, 222;
+  --color-blueberry-500: #51acc7;
+  --color-blueberry-500-rgb: 81, 172, 199;
+  --color-blueberry-600: #367385;
+  --color-blueberry-600-rgb: 54, 115, 133;
+  --color-banana-100: #fff9ed;
+  --color-banana-100-rgb: 255, 249, 237;
+  --color-banana-200: #ffeec9;
+  --color-banana-200-rgb: 255, 238, 201;
+  --color-banana-300: #ffdd92;
+  --color-banana-300-rgb: 255, 221, 146;
+  --color-banana-400: #ffc74a;
+  --color-banana-400-rgb: 255, 199, 74;
+  --color-banana-500: #e5b242;
+  --color-banana-500-rgb: 229, 178, 66;
+  --color-banana-600: #99772c;
+  --color-banana-600-rgb: 153, 119, 44;
+  --color-grey-100: #f3f3f3;
+  --color-grey-100-rgb: 243, 243, 243;
+  --color-grey-200: #d5d5d5;
+  --color-grey-200-rgb: 213, 213, 213;
+  --color-grey-300: #949494;
+  --color-grey-300-rgb: 148, 148, 148;
+  --color-grey-400: #767676;
+  --color-grey-400-rgb: 118, 118, 118;
+  --color-grey-500: #464646;
+  --color-grey-500-rgb: 70, 70, 70;
+  --color-grey-600: #323232;
+  --color-grey-600-rgb: 50, 50, 50;
+}
+
+._23gnr {
+  width: 200px;
+  border-radius: 0px;
+  font-family: "Proxima Nova", sans-serif;
+  font-size: 14px;
+  color: var(--color-grey-500);
+  padding-left: 13px;
+  height: 38px;
+  background-color: var(--color-white);
+  border: 1px solid var(--color-grey-200);
+}
+._23gnr:not(._Zv1Se) {
+  cursor: pointer;
+}
+._23gnr:not(._Zv1Se):hover {
+  background-color: var(--color-grey-100);
+}
+._23gnr:not(._Zv1Se):focus {
+  box-shadow: 0 0 8px var(--color-eggplant-300);
+  outline: none;
+}
+._18V8V {
+  width: 264px;
+}
+._2v9v_ {
+  height: 18px;
+  width: 18px;
+}
+._s8MoI {
+  height: 38px;
+  background-color: var(--color-white);
+  border: 1px solid var(--color-grey-200);
+  cursor: pointer;
+}
+._s8MoI:hover {
+  background-color: var(--color-grey-100);
+}
+._s8MoI:focus {
+  box-shadow: 0 0 8px var(--color-eggplant-300);
+  outline: none;
+}
+._34Yoi, ._BeWpb {
+  width: 36px;
+}
+._34Yoi {
+  border-radius: 4px 0px 0px 4px;
+  border-right: 0;
+}
+._BeWpb {
+  border-radius: 0px 4px 4px 0px;
+  border-left: 0;
+}
 ._3CaV0 {
   max-width: 500px;
 }
 ._2i-Ll > div {
   min-width: 0;
 }
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
 ._BkzdC {
   border-radius: 4px;
   padding: 7px;
   box-shadow: none;
-  border: 1px solid #D5D5D5;
+  border: 1px solid var(--color-grey-200);
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -1935,7 +1942,7 @@ Please ask a designer if you have questions about which colours to use.
   line-height: 22px;
   font-size: 14px;
   font-family: "Proxima Nova", sans-serif;
-  color: #464646;
+  color: var(--color-grey-500);
   margin: 0;
   border: none;
   resize: none;
@@ -1947,65 +1954,54 @@ Please ask a designer if you have questions about which colours to use.
   outline: none;
 }
 ._BkzdC textarea:disabled {
-  background-color: #F3F3F3;
+  background-color: var(--color-grey-100);
 }
 ._Rop31 {
-  border: 1px solid #6d87dd;
-  box-shadow: 0 0 8px #a7b7ea;
+  border: 1px solid var(--color-eggplant-400);
+  box-shadow: 0 0 8px var(--color-eggplant-300);
   outline: none;
 }
 ._2x3Cm {
-  background-color: #F3F3F3;
+  background-color: var(--color-grey-100);
 }
 ._3zOwV {
-  border-color: #e76767 !important;
+  border-color: var(--color-radish-400) !important;
 }
 ._rQqnL {
   margin-top: 5px;
 }
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
 ._20YOA {
   padding: 7px;
   line-height: 22px;
   border-radius: 4px;
   font-size: 14px;
   font-family: "Proxima Nova", sans-serif;
-  color: #464646;
+  color: var(--color-grey-500);
   box-shadow: none;
-  border: 1px solid #D5D5D5;
+  border: 1px solid var(--color-grey-200);
   margin: 0;
   flex: 1;
   min-width: 90px;
 }
 ._20YOA:focus {
-  border: 1px solid #6d87dd;
-  box-shadow: 0 0 8px #a7b7ea;
+  border: 1px solid var(--color-eggplant-400);
+  box-shadow: 0 0 8px var(--color-eggplant-300);
   outline: none;
 }
 ._20YOA:disabled {
-  background-color: #F3F3F3;
-  color: #767676;
+  background-color: var(--color-grey-100);
+  color: var(--color-grey-400);
 }
 
 ._3kUSh {
-  border-color: #e76767 !important;
+  border-color: var(--color-radish-400) !important;
 }
 
 ._3IU3Q {
   border-left: 0 !important;
   border-top-left-radius: 0 !important;
   border-bottom-left-radius: 0 !important;
-  color: #767676;
+  color: var(--color-grey-400);
 }
 
 ._QXJOD {
@@ -2013,17 +2009,6 @@ Please ask a designer if you have questions about which colours to use.
   border-top-right-radius: 0 !important;
   border-bottom-right-radius: 0 !important;
 }
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
 ._2sg0c {
   position: relative;
 }
@@ -2047,8 +2032,8 @@ Please ask a designer if you have questions about which colours to use.
   width: 14px;
   background-color: transparent;
   border-radius: 4px;
-  border: 1px solid #D5D5D5;
-  box-shadow: inset 0 1px 4px -2px #D5D5D5;
+  border: 1px solid var(--color-grey-200);
+  box-shadow: inset 0 1px 4px -2px var(--color-grey-200);
 }
 ._2mA8e::after {
   position: absolute;
@@ -2069,34 +2054,23 @@ input:checked ~ ._2mA8e::after {
   top: 1px;
   width: 4px;
   height: 8px;
-  border: solid #fff;
+  border: solid var(--color-white);
   border-width: 0 2px 2px 0;
   background-color: transparent;
   border-radius: 0;
 }
 input:focus-visible + ._2mA8e {
-  outline: #6d87dd solid 1px;
+  outline: var(--color-eggplant-400) solid 1px;
 }
 input:disabled + ._2mA8e {
-  background-color: #F3F3F3;
-  border: 1px solid #D5D5D5;
+  background-color: var(--color-grey-100);
+  border: 1px solid var(--color-grey-200);
 }
 input:disabled + ._2mA8e::after {
   box-shadow: none;
   border: solid #9f9f9f !important;
   border-width: 0 2px 2px 0 !important;
 }
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
 ._g6T-p {
   position: relative;
 }
@@ -2116,17 +2090,17 @@ Please ask a designer if you have questions about which colours to use.
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: #fff;
+  background-color: var(--color-white);
   font-size: 14px;
   font-weight: 600;
   padding: 8px;
-  border: 1px solid #D5D5D5;
+  border: 1px solid var(--color-grey-200);
   border-radius: 25px;
   min-height: 38px;
   min-width: 60px;
   text-align: center;
   vertical-align: middle;
-  color: #464646;
+  color: var(--color-grey-500);
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
@@ -2136,50 +2110,39 @@ Please ask a designer if you have questions about which colours to use.
   box-sizing: border-box;
 }
 input:hover ~ ._1i2AX {
-  background-color: #D5D5D5;
-  border-color: #D5D5D5;
+  background-color: var(--color-grey-200);
+  border-color: var(--color-grey-200);
 }
 input:checked:hover ~ ._1i2AX {
-  background-color: #e16840;
-  border-color: #e16840;
+  background-color: var(--color-tangerine-500);
+  border-color: var(--color-tangerine-500);
 }
 input:checked ~ ._1i2AX {
-  background-color: #fb7448;
-  border-color: #fb7448;
-  color: #fff;
+  background-color: var(--color-tangerine-400);
+  border-color: var(--color-tangerine-400);
+  color: var(--color-white);
 }
 input:disabled + ._1i2AX {
-  background-color: #F3F3F3;
-  border-color: #F3F3F3;
-  color: #767676;
+  background-color: var(--color-grey-100);
+  border-color: var(--color-grey-100);
+  color: var(--color-grey-400);
 }
 input:disabled:checked + ._1i2AX {
-  background-color: #e16840;
-  border-color: #e16840;
-  color: #fff;
+  background-color: var(--color-tangerine-500);
+  border-color: var(--color-tangerine-500);
+  color: var(--color-white);
 }
 input:focus-visible + ._1i2AX {
-  border: 1px solid #6d87dd;
-  box-shadow: 0 0 8px #a7b7ea;
+  border: 1px solid var(--color-eggplant-400);
+  box-shadow: 0 0 8px var(--color-eggplant-300);
   outline: none;
 }
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
 ._1WGz2 {
   line-height: normal;
   padding: 0;
   width: auto;
   float: none;
-  color: #464646;
+  color: var(--color-grey-500);
   font-family: "Proxima Nova", sans-serif;
   font-weight: 600;
   font-size: 14px;
@@ -2197,29 +2160,18 @@ Please ask a designer if you have questions about which colours to use.
   padding: 0;
   width: auto;
   float: none;
-  color: #464646;
+  color: var(--color-grey-500);
   font-family: "Proxima Nova", sans-serif;
   font-weight: 600;
   font-size: 14px;
   min-height: 16px;
 }
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
 ._1Tw96 {
   line-height: normal;
   padding: 0;
   width: auto;
   float: none;
-  color: #464646;
+  color: var(--color-grey-500);
   font-family: "Proxima Nova", sans-serif;
   font-weight: 600;
   font-size: 14px;
@@ -2236,7 +2188,7 @@ Please ask a designer if you have questions about which colours to use.
   display: block;
   text-align: center;
   height: 100%;
-  color: #767676;
+  color: var(--color-grey-400);
 }
 ._2OGKE input {
   border: 0px;
@@ -2250,12 +2202,12 @@ Please ask a designer if you have questions about which colours to use.
   position: absolute;
 }
 input:checked ~ ._23M9k {
-  border-color: #a7b7ea;
-  box-shadow: 0 0 8px #a7b7ea;
+  border-color: var(--color-eggplant-300);
+  box-shadow: 0 0 8px var(--color-eggplant-300);
   cursor: default;
 }
 ._23M9k {
-  border: 1px solid #D5D5D5;
+  border: 1px solid var(--color-grey-200);
   border-radius: 4px;
   padding: 16px;
   display: block;
@@ -2267,30 +2219,19 @@ input:checked ~ ._23M9k {
   word-break: break-word;
 }
 ._23M9k:hover {
-  box-shadow: 0 0 8px #D5D5D5;
+  box-shadow: 0 0 8px var(--color-grey-200);
 }
 ._1r-Wg {
   line-height: normal;
   padding: 0;
   width: auto;
   float: none;
-  color: #464646;
+  color: var(--color-grey-500);
   font-family: "Proxima Nova", sans-serif;
   font-weight: 600;
   font-size: 14px;
   min-height: 16px;
 }
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
 ._1Clmp {
   position: relative;
 }
@@ -2314,8 +2255,8 @@ Please ask a designer if you have questions about which colours to use.
   width: 14px;
   background-color: transparent;
   border-radius: 50%;
-  border: 1px solid #D5D5D5;
-  box-shadow: inset 0 1px 4px -2px #D5D5D5;
+  border: 1px solid var(--color-grey-200);
+  box-shadow: inset 0 1px 4px -2px var(--color-grey-200);
 }
 ._1tMq-::after {
   position: absolute;
@@ -2335,16 +2276,16 @@ input:checked ~ ._1tMq-::after {
   top: 5px;
   width: 4px;
   height: 4px;
-  background-color: #fff;
+  background-color: var(--color-white);
   border: none;
   border-radius: 50%;
 }
 input:focus-visible + ._1tMq- {
-  outline: #6d87dd solid 1px;
+  outline: var(--color-eggplant-400) solid 1px;
 }
 input:disabled + ._1tMq- {
-  background-color: #F3F3F3;
-  border: 1px solid #D5D5D5;
+  background-color: var(--color-grey-100);
+  border: 1px solid var(--color-grey-200);
 }
 input:disabled + ._1tMq-::after {
   box-shadow: none;
@@ -2354,49 +2295,38 @@ input:disabled + ._1tMq-::after {
   left: 4px;
   top: 4px;
 }
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
 ._18Rzv {
   padding: 7px;
   line-height: 22px;
   border-radius: 4px;
   font-size: 14px;
   font-family: "Proxima Nova", sans-serif;
-  color: #464646;
+  color: var(--color-grey-500);
   box-shadow: none;
-  border: 1px solid #D5D5D5;
+  border: 1px solid var(--color-grey-200);
   margin: 0;
   flex: 1;
   min-width: 90px;
 }
 ._18Rzv:focus {
-  border: 1px solid #6d87dd;
-  box-shadow: 0 0 8px #a7b7ea;
+  border: 1px solid var(--color-eggplant-400);
+  box-shadow: 0 0 8px var(--color-eggplant-300);
   outline: none;
 }
 ._18Rzv:disabled {
-  background-color: #F3F3F3;
-  color: #767676;
+  background-color: var(--color-grey-100);
+  color: var(--color-grey-400);
 }
 
 ._3eD7t {
-  border-color: #e76767 !important;
+  border-color: var(--color-radish-400) !important;
 }
 
 ._2evrG {
   border-left: 0 !important;
   border-top-left-radius: 0 !important;
   border-bottom-left-radius: 0 !important;
-  color: #767676;
+  color: var(--color-grey-400);
 }
 
 ._-MgeO {
@@ -2417,94 +2347,70 @@ Please ask a designer if you have questions about which colours to use.
   right: 7px;
   top: 7px;
 }
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
 ._U0krC {
-  color: #D5D5D5;
+  color: var(--color-grey-200);
   font-family: "Proxima Nova", sans-serif;
 }
 
 ._2XIl4 {
-  color: #767676;
+  color: var(--color-grey-400);
   font-family: "Proxima Nova", sans-serif;
 }
 ._1cDCR {
   flex: 1;
   display: "flex";
 }
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
+._3sdnK {
+  border: solid var(--color-grey-200);
+  border-width: 1px 0 0 0;
+  margin: 0;
+}
+
+._2F1jP {
+  padding: 8px 4px 8px 4px;
+}
 ._uC4zU {
   font-family: "Proxima Nova", sans-serif;
   font-weight: 16px;
   font-size: 14px;
-  color: #767676;
+  color: var(--color-grey-400);
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 8px 12px;
 }
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
 ._1btTx, ._1Sc9D {
   padding: 7px;
   line-height: 22px;
   border-radius: 4px;
   font-size: 14px;
   font-family: "Proxima Nova", sans-serif;
-  color: #464646;
+  color: var(--color-grey-500);
   box-shadow: none;
-  border: 1px solid #D5D5D5;
+  border: 1px solid var(--color-grey-200);
   margin: 0;
   flex: 1;
   min-width: 90px;
 }
 ._1btTx:focus, ._1Sc9D:focus {
-  border: 1px solid #6d87dd;
-  box-shadow: 0 0 8px #a7b7ea;
+  border: 1px solid var(--color-eggplant-400);
+  box-shadow: 0 0 8px var(--color-eggplant-300);
   outline: none;
 }
 ._1btTx:disabled, ._1Sc9D:disabled {
-  background-color: #F3F3F3;
-  color: #767676;
+  background-color: var(--color-grey-100);
+  color: var(--color-grey-400);
 }
 
 ._2feYp, ._2SNat {
-  border-color: #e76767 !important;
+  border-color: var(--color-radish-400) !important;
 }
 
 ._E18JV, ._jLolW {
   border-left: 0 !important;
   border-top-left-radius: 0 !important;
   border-bottom-left-radius: 0 !important;
-  color: #767676;
+  color: var(--color-grey-400);
 }
 
 ._27J43, ._3eTNi {
@@ -2518,17 +2424,6 @@ Please ask a designer if you have questions about which colours to use.
   padding-bottom: 6px;
   width: 100%;
 }
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
 ._1Ini2 {
   flex: 1;
   display: flex;
@@ -2566,21 +2461,21 @@ Please ask a designer if you have questions about which colours to use.
   left: auto;
   display: inline-block;
   margin-top: 2px;
-  color: #949494;
+  color: var(--color-grey-300);
   cursor: pointer;
   background-image: none;
   width: 0;
   height: 0;
   border-top: 7px solid transparent;
   border-bottom: 7px solid transparent;
-  border-right: 10px solid #464646;
+  border-right: 10px solid var(--color-grey-500);
   margin-right: 1.5em;
 }
 ._6kNi3:hover {
   opacity: 0.8;
 }
 ._6kNi3:hover {
-  border-right-color: #767676;
+  border-right-color: var(--color-grey-400);
 }
 
 ._13W_e {
@@ -2590,21 +2485,21 @@ Please ask a designer if you have questions about which colours to use.
   left: auto;
   display: inline-block;
   margin-top: 2px;
-  color: #949494;
+  color: var(--color-grey-300);
   cursor: pointer;
   background-image: none;
   width: 0;
   height: 0;
   border-top: 7px solid transparent;
   border-bottom: 7px solid transparent;
-  border-left: 10px solid #464646;
+  border-left: 10px solid var(--color-grey-500);
 }
 ._13W_e:hover {
   opacity: 0.8;
 }
 ._13W_e:hover {
   opacity: 0.8;
-  border-left-color: #767676;
+  border-left-color: var(--color-grey-400);
 }
 
 ._1FeSY {
@@ -2635,7 +2530,7 @@ Please ask a designer if you have questions about which colours to use.
 ._AMbAo > div {
   font-weight: 600;
   font-size: 20px;
-  color: #464646;
+  color: var(--color-grey-500);
 }
 
 ._1LEst {
@@ -2650,7 +2545,7 @@ Please ask a designer if you have questions about which colours to use.
 ._1C5ry {
   display: table-cell;
   padding: 0.5em;
-  color: #767676;
+  color: var(--color-grey-400);
   text-align: center;
   font-size: 0.875em;
 }
@@ -2677,7 +2572,7 @@ Please ask a designer if you have questions about which colours to use.
   cursor: pointer;
 }
 ._mG73F:not(._wJ6Cb):not(._2pgnH):not(._MtLaz):not(._CRqyX):hover {
-  background: #F3F3F3;
+  background: var(--color-grey-100);
 }
 
 ._2KG9- {
@@ -2685,31 +2580,31 @@ Please ask a designer if you have questions about which colours to use.
 }
 
 ._2JA2y {
-  color: #fb7448;
+  color: var(--color-tangerine-400);
   font-weight: 700;
 }
 
 ._MtLaz:not(._2pgnH):not(._CRqyX) {
-  background-color: #fdd5c8;
-  color: #fb7448;
+  background-color: var(--color-tangerine-200);
+  color: var(--color-tangerine-400);
 }
 
 ._MtLaz:not(._2pgnH):not(._CRqyX):hover {
-  background-color: #fb7448;
-  color: #fff;
+  background-color: var(--color-tangerine-400);
+  color: var(--color-white);
 }
 
 ._MtLaz._2JA2y:hover {
-  color: #fff;
+  color: var(--color-white);
 }
 
 ._2pgnH {
-  color: #D5D5D5;
+  color: var(--color-grey-200);
   cursor: default;
 }
 
 ._CRqyX:not(._2pgnH) {
-  color: #949494;
+  color: var(--color-grey-300);
   cursor: default;
 }
 
@@ -2721,7 +2616,7 @@ Please ask a designer if you have questions about which colours to use.
   position: absolute;
   left: 0;
   z-index: 1;
-  background: #fff;
+  background: var(--color-white);
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
 }
 
@@ -2729,57 +2624,46 @@ Please ask a designer if you have questions about which colours to use.
   display: table-cell;
   padding: 0.5em;
   min-width: 1em;
-  border-right: 1px solid #D5D5D5;
-  color: #949494;
+  border-right: 1px solid var(--color-grey-200);
+  color: var(--color-grey-300);
   vertical-align: middle;
   text-align: right;
   font-size: 0.75em;
   cursor: pointer;
 }
 
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
 ._25rf7, ._3qVhi input, ._3qVhi {
   padding: 7px;
   line-height: 22px;
   border-radius: 4px;
   font-size: 14px;
   font-family: "Proxima Nova", sans-serif;
-  color: #464646;
+  color: var(--color-grey-500);
   box-shadow: none;
-  border: 1px solid #D5D5D5;
+  border: 1px solid var(--color-grey-200);
   margin: 0;
   flex: 1;
   min-width: 90px;
 }
 ._25rf7:focus, ._3qVhi input:focus, ._3qVhi:focus {
-  border: 1px solid #6d87dd;
-  box-shadow: 0 0 8px #a7b7ea;
+  border: 1px solid var(--color-eggplant-400);
+  box-shadow: 0 0 8px var(--color-eggplant-300);
   outline: none;
 }
 ._25rf7:disabled, ._3qVhi input:disabled, ._3qVhi:disabled {
-  background-color: #F3F3F3;
-  color: #767676;
+  background-color: var(--color-grey-100);
+  color: var(--color-grey-400);
 }
 
 ._2M9Ud {
-  border-color: #e76767 !important;
+  border-color: var(--color-radish-400) !important;
 }
 
 ._3TUb2 {
   border-left: 0 !important;
   border-top-left-radius: 0 !important;
   border-bottom-left-radius: 0 !important;
-  color: #767676;
+  color: var(--color-grey-400);
 }
 
 ._foqL0 {
@@ -2795,10 +2679,10 @@ Please ask a designer if you have questions about which colours to use.
   align-items: center;
 }
 ._3df9R {
-  border-color: #e76767 !important;
+  border-color: var(--color-radish-400) !important;
 }
 ._2Nkht {
-  background-color: #F3F3F3;
+  background-color: var(--color-grey-100);
 }
 ._3qVhi input {
   border: none;
@@ -2808,7 +2692,7 @@ Please ask a designer if you have questions about which colours to use.
 }
 ._3qVhi input:focus {
   border: none;
-  box-shadow: inset 0 -2px 0 #fb7448;
+  box-shadow: inset 0 -2px 0 var(--color-tangerine-400);
   outline: none;
   border-radius: 0;
   border-top-right-radius: 4px;
@@ -2829,37 +2713,26 @@ Please ask a designer if you have questions about which colours to use.
 }
 
 ._mG73F._MtLaz.from {
-  background-color: #fb7448;
-  color: #fff;
+  background-color: var(--color-tangerine-400);
+  color: var(--color-white);
   border-top-left-radius: 50%;
   border-bottom-left-radius: 50%;
 }
 
 ._mG73F._MtLaz.to {
-  background-color: #fb7448;
-  color: #fff;
+  background-color: var(--color-tangerine-400);
+  color: var(--color-white);
   border-top-right-radius: 50%;
   border-bottom-right-radius: 50%;
 }
 
 ._MtLaz:not(._2pgnH) {
-  background-color: #fdd5c8;
-  color: #fb7448;
-}
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
+  background-color: var(--color-tangerine-200);
+  color: var(--color-tangerine-400);
+}
 ._vgLin {
   padding: 16px 12px 16px 12px;
-  background: #F3F3F3;
+  background: var(--color-grey-100);
   margin: 1px;
   position: relative;
   border-radius: 3px;
@@ -2870,22 +2743,22 @@ Please ask a designer if you have questions about which colours to use.
   font-weight: 600;
   font-size: 14px;
   line-height: 16px;
-  color: #464646;
+  color: var(--color-grey-500);
 }
 
 ._3n6S7 {
   font-size: 14px;
   line-height: 16px;
   flex-grow: 1;
-  color: #464646;
+  color: var(--color-grey-500);
 }
 ._3n6S7 a {
   text-decoration: underline;
-  color: #464646;
+  color: var(--color-grey-500);
 }
 ._3n6S7 a:hover {
   cursor: pointer;
-  color: #323232;
+  color: var(--color-grey-600);
 }
 
 ._2pMYs {
@@ -2893,43 +2766,43 @@ Please ask a designer if you have questions about which colours to use.
 }
 
 ._ON6Eg {
-  background: #f6fdff;
-  box-shadow: 0 0 0 1px rgba(81, 172, 199, 0.15), 0 1px 3px 0 rgba(81, 172, 199, 0.25);
+  background: rgb(var(--color-blueberry-100-rgb));
+  box-shadow: 0 0 0 1px rgba(var(--color-blueberry-500-rgb), 0.15), 0 1px 3px 0 rgba(var(--color-blueberry-500-rgb), 0.25);
 }
 ._ON6Eg ._1-D-E {
-  color: #51acc7;
+  color: rgb(var(--color-blueberry-500-rgb));
 }
 
 ._1FFZh {
-  background: #ecfaf8;
-  box-shadow: 0 0 0 1px rgba(53, 172, 154, 0.15), 0 1px 3px 0 rgba(53, 172, 154, 0.25);
+  background: rgb(var(--color-mint-100-rgb));
+  box-shadow: 0 0 0 1px rgba(var(--color-mint-500-rgb), 0.15), 0 1px 3px 0 rgba(var(--color-mint-500-rgb), 0.25);
 }
 ._1FFZh ._1-D-E {
-  color: #35ac9a;
+  color: rgb(var(--color-mint-500-rgb));
 }
 
 ._2R34O {
-  background: #fcf0f0;
-  box-shadow: 0 0 0 1px rgba(207, 92, 92, 0.15), 0 1px 3px 0 rgba(207, 92, 92, 0.25);
+  background: rgb(var(--color-radish-100-rgb));
+  box-shadow: 0 0 0 1px rgba(var(--color-radish-500-rgb), 0.15), 0 1px 3px 0 rgba(var(--color-radish-500-rgb), 0.25);
 }
 ._2R34O ._1-D-E {
-  color: #cf5c5c;
+  color: rgb(var(--color-radish-500-rgb));
 }
 
 ._3Cfhe {
-  background: #fff9ed;
-  box-shadow: 0 0 0 1px rgba(229, 178, 66, 0.15), 0 1px 3px 0 rgba(229, 178, 66, 0.25);
+  background: rgb(var(--color-banana-100-rgb));
+  box-shadow: 0 0 0 1px rgba(var(--color-banana-500-rgb), 0.15), 0 1px 3px 0 rgba(var(--color-banana-500-rgb), 0.25);
 }
 ._3Cfhe ._1-D-E {
-  color: #e5b242;
+  color: rgb(var(--color-banana-500-rgb));
 }
 
 ._1SIOw {
-  background: #f0f3fb;
-  box-shadow: 0 0 0 1px rgba(97, 121, 198, 0.15), 0 1px 3px 0 rgba(97, 121, 198, 0.25);
+  background: rgb(var(--color-eggplant-100-rgb));
+  box-shadow: 0 0 0 1px rgba(var(--color-eggplant-500-rgb), 0.15), 0 1px 3px 0 rgba(var(--color-eggplant-500-rgb), 0.25);
 }
 ._1SIOw ._1-D-E {
-  color: #6179c6;
+  color: rgb(var(--color-eggplant-500-rgb));
 }
 
 ._3SNQ1 {
@@ -2952,39 +2825,73 @@ Please ask a designer if you have questions about which colours to use.
   align-items: center;
   min-height: 38px;
 }
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
 ._1jqm8 {
   font-size: 12px;
   line-height: 12px;
-  color: #464646;
-}
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
+  color: var(--color-grey-500);
+}
+._29ZIp {
+  position: relative;
+}
+._3Q8NT {
+  box-sizing: border-box;
+  background: white;
+  border: 1px solid var(--color-grey-200);
+  border-radius: 8px;
+  width: 100%;
+  height: 100%;
+  padding: 24px 20px;
+  color: var(--color-grey-500);
+}
+._2Fah6 {
+  cursor: pointer;
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0.15), 0 3px 3px rgba(0, 0, 0, 0.05);
+  transition: all ease-in-out 150ms;
+  font: inherit;
+  text-align: inherit;
+}
+._2Fah6:not(._SGno0):hover {
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.2);
+  background-color: var(--color-grey-100);
+}
+._2Fah6:focus {
+  box-shadow: 0 0 8px var(--color-eggplant-300);
+  outline: none;
+}
+._1zqRN {
+  border-color: var(--color-eggplant-400);
+  box-shadow: 0 0 8px var(--color-eggplant-300);
+}
+._3Hwms {
+  min-height: 56px;
+}
+._TmEUS {
+  position: absolute;
+  z-index: 1;
+  right: 8px;
+  top: 8px;
+}
+._1KO1J {
+  color: var(--color-white);
+  font-size: 14px;
+  padding: 16px;
+  text-align: center;
+}
+._2mTN3 {
+  background-color: var(--color-blueberry-400);
+}
+._1YuCF {
+  background-color: var(--color-radish-400);
+}
+._tlNFk {
+  background-color: var(--color-eggplant-400);
+}
 ._2f81N {
   display: inline-flex;
-  background-color: #fb7448;
+  background-color: var(--color-tangerine-400);
   height: 20px;
   min-width: 20px;
-  color: #fff;
+  color: var(--color-white);
   text-align: center;
   line-height: 20px;
   border-radius: 20px;
@@ -2993,41 +2900,30 @@ Please ask a designer if you have questions about which colours to use.
   font-weight: normal;
   padding: 0 6px;
   align-items: center;
-  border: 1px solid #fff;
+  border: 1px solid var(--color-white);
 }
 ._2f81N svg {
-  fill: #fff;
+  fill: var(--color-white);
 }
 ._2g1GI {
-  background-color: #ffc74a;
+  background-color: var(--color-banana-400);
 }
 ._2zLnM {
-  background-color: #e76767;
+  background-color: var(--color-radish-400);
 }
 ._27QOo {
-  background-color: #3abda9;
+  background-color: var(--color-mint-400);
 }
 ._2gmsM {
-  background-color: #5bc0de;
-}
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
+  background-color: var(--color-blueberry-400);
+}
 ._2wJGB {
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   font-family: "Proxima Nova", sans-serif;
-  color: #fff;
+  color: var(--color-white);
   border-radius: 50%;
   width: 20px;
   height: 20px;
@@ -3035,7 +2931,7 @@ Please ask a designer if you have questions about which colours to use.
   overflow: hidden;
 }
 ._2wJGB svg {
-  fill: #fff;
+  fill: var(--color-white);
 }
 ._2wJGB img {
   height: inherit;
@@ -3085,17 +2981,6 @@ Please ask a designer if you have questions about which colours to use.
   width: 80%;
   padding-top: 25%;
 }
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
 ._1fIeV {
   font-size: 12px;
   font-weight: 600;
@@ -3107,40 +2992,29 @@ Please ask a designer if you have questions about which colours to use.
   text-transform: uppercase;
 }
 ._V4byU {
-  background-color: #fdd5c8;
-  color: #96452b;
+  background-color: var(--color-tangerine-200);
+  color: var(--color-tangerine-600);
 }
 ._37gN9 {
-  background-color: #c6f1eb;
-  color: #277e71;
+  background-color: var(--color-mint-200);
+  color: var(--color-mint-600);
 }
 ._Tw7tp {
-  background-color: #d3dbf4;
-  color: #415184;
+  background-color: var(--color-eggplant-200);
+  color: var(--color-eggplant-600);
 }
 ._t94VZ {
-  background-color: #ffeec9;
-  color: #99772c;
+  background-color: var(--color-banana-200);
+  color: var(--color-banana-600);
 }
 ._3SmeO {
-  background-color: #ceecf5;
-  color: #367385;
+  background-color: var(--color-blueberry-200);
+  color: var(--color-blueberry-600);
 }
 ._2eoX0 {
-  background-color: #f7d1d1;
-  color: #8a3d3d;
-}
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
+  background-color: var(--color-radish-200);
+  color: var(--color-radish-600);
+}
 ._23q4Y {
   font-size: 14px;
   font-weight: 600;
@@ -3155,90 +3029,22 @@ Please ask a designer if you have questions about which colours to use.
   text-transform: capitalize;
 }
 ._niDEM {
-  background-color: #D5D5D5;
-  color: #323232;
+  background-color: var(--color-grey-200);
+  color: var(--color-grey-600);
 }
 ._IwDRB {
-  background-color: #c6f1eb;
-  color: #277e71;
+  background-color: var(--color-mint-200);
+  color: var(--color-mint-600);
 }
 ._MPji- {
-  background-color: #f7d1d1;
-  color: #8a3d3d;
+  background-color: var(--color-radish-200);
+  color: var(--color-radish-600);
 }
 ._3S2m8 {
-  background-color: #ffeec9;
-  color: #99772c;
+  background-color: var(--color-banana-200);
+  color: var(--color-banana-600);
 }
 ._2G3ML {
-  background-color: #ceecf5;
-  color: #367385;
-}
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
-._29ZIp {
-  position: relative;
-}
-._3Q8NT {
-  box-sizing: border-box;
-  background: white;
-  border: 1px solid #D5D5D5;
-  border-radius: 8px;
-  width: 100%;
-  height: 100%;
-  padding: 24px 20px;
-  color: #464646;
-}
-._2Fah6 {
-  cursor: pointer;
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0.15), 0 3px 3px rgba(0, 0, 0, 0.05);
-  transition: all ease-in-out 150ms;
-}
-._2Fah6:not(._SGno0):hover {
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.2);
-  background-color: #F3F3F3;
-}
-._2Fah6:focus {
-  box-shadow: 0 0 8px #a7b7ea;
-  outline: none;
-}
-._1zqRN {
-  border-color: #6d87dd;
-  box-shadow: 0 0 8px #a7b7ea;
-}
-._3Hwms {
-  min-height: 56px;
-}
-._TmEUS {
-  position: absolute;
-  z-index: 1;
-  right: 8px;
-  top: 8px;
-}
-
-button {
-  background: none;
-  color: inherit;
-  border: none;
-  padding: 0;
-  font: inherit;
-  cursor: pointer;
-  text-align: inherit;
+  background-color: var(--color-blueberry-200);
+  color: var(--color-blueberry-600);
 }