@jobber/components 5.3.0 → 5.3.2-rework-bas.15

package/dist/styles.css

@@ -57,7 +57,7 @@
   padding-left: calc(var(--space-small) + var(--space-smaller));
   border-radius: 8px;
   border-radius: var(--radius-base);
-  background: rgb(1, 40, 55);
+  background: hsl(198, 35%, 21%);
   background: var(--color-surface--reverse);
 }
 
@@ -65,12 +65,12 @@
    the reverse color scheme of Toast */
 
 .cExoS0APILs- * path {
-  fill: rgb(78, 105, 116) !important;
+  fill: hsl(197, 15%, 45%) !important;
   fill: var(--color-text--secondary) !important;
 }
 
 .cExoS0APILs-:hover * path {
-  fill: rgba(101, 120, 132, 1) !important;
+  fill: hsl(197, 15%, 45%) !important;
   fill: var(--color-greyBlue) !important;
 }
 
@@ -108,7 +108,7 @@
 .CX-N-e0e6og- h5 {
   padding: calc(16px / 2) 0 calc(16px / 4) calc(16px / 2);
   padding: var(--space-small) 0 var(--space-smaller) var(--space-small);
-  border-bottom: calc(16px / 16) solid rgb(1, 40, 55);
+  border-bottom: calc(16px / 16) solid hsl(197, 90%, 12%);
   border-bottom: var(--border-base) solid var(--color-border--section);
 }
 
@@ -148,14 +148,14 @@
 .ucQtG0iwqbo-:hover,
 .ucQtG0iwqbo-:focus,
 .ucQtG0iwqbo-.r8HS-ma79QE- {
-  background-color: rgb(241, 239, 233);
+  background-color: hsl(53, 21%, 93%);
   background-color: var(--color-surface--hover);
-  outline-color: rgb(131, 151, 160);
+  outline-color: hsl(198, 12%, 57%);
   outline-color: var(--color-focus);
 }
 
 .ucQtG0iwqbo-.ydwLX44YFZc-:not(:last-child) {
-  border-bottom: calc(16px / 16) solid rgb(218, 224, 226);
+  border-bottom: calc(16px / 16) solid hsl(200, 13%, 87%);
   border-bottom: var(--border-base) solid var(--color-border);
 }
 
@@ -333,47 +333,47 @@
 }
 
 .pkqoq2KXY9w- {
-  color: rgb(1, 40, 55);
+  color: hsl(197, 90%, 12%);
   color: var(--color-blue);
 }
 
 .ftVHRSii3ro- {
-  color: rgb(181, 181, 181);
+  color: hsl(0, 0%, 72%);
   color: var(--color-grey);
 }
 
 .FQbGABZWVzA- {
-  color: rgb(66, 78, 86);
+  color: hsl(198, 35%, 21%);
   color: var(--color-greyBlue--dark);
 }
 
 .zQaB9J0-vrs- {
-  color: rgba(101, 120, 132, 1);
+  color: hsl(197, 15%, 45%);
   color: var(--color-greyBlue);
 }
 
 ._4-xdzcqT-Us- {
-  color: rgb(50, 130, 28);
+  color: hsl(107, 58%, 33%);
   color: var(--color-green);
 }
 
 .Zp9E7ELPjPA- {
-  color: rgb(199, 20, 0);
+  color: hsl(6, 64%, 51%);
   color: var(--color-red);
 }
 
 .v-Fo4PwPxDI- {
-  color: rgb(209, 185, 46);
+  color: hsl(51, 64%, 49%);
   color: var(--color-yellow);
 }
 
 .YrGUIChAZC0- {
-  color: rgb(91, 79, 6);
+  color: hsl(51, 64%, 32%);
   color: var(--color-yellow--dark);
 }
 
 .r7JcIVoDcTY- {
-  color: rgb(60, 162, 224);
+  color: hsl(207, 79%, 57%);
   color: var(--color-lightBlue);
 }
 
@@ -383,52 +383,52 @@
 }
 
 .fLix4jA-RkU- {
-  color: rgb(1, 40, 55);
+  color: hsl(197, 90%, 12%);
   color: var(--color-heading);
 }
 
 ._1g0uMAwFAsk- {
-  color: rgb(66, 78, 86);
+  color: hsl(198, 35%, 21%);
   color: var(--color-text);
 }
 
 .oXqFAHwT6y4- {
-  color: rgb(78, 105, 116);
+  color: hsl(197, 15%, 45%);
   color: var(--color-text--secondary);
 }
 
 .gPhKMwPfrsw- {
-  color: rgb(1, 40, 55);
+  color: hsl(197, 90%, 12%);
   color: var(--color-inactive--onSurface);
 }
 
 .rWkzi9HFNDU- {
-  color: rgb(199, 20, 0);
+  color: hsl(6, 64%, 51%);
   color: var(--color-critical);
 }
 
 .PQLYQKGCmPI- {
-  color: rgb(91, 79, 6);
+  color: hsl(51, 64%, 24%);
   color: var(--color-warning--onSurface);
 }
 
 .L6bBDJrx-m0- {
-  color: rgb(17, 66, 85);
+  color: hsl(207, 61%, 34%);
   color: var(--color-informative--onSurface);
 }
 
 .bJDJJKvmT90- {
-  color: rgb(14, 78, 26);
+  color: hsl(107, 64%, 16%);
   color: var(--color-success--onSurface);
 }
 
 ._99f--2dY5rg- {
-  color: rgb(50, 130, 28);
+  color: hsl(107, 58%, 33%);
   color: var(--color-interactive);
 }
 
 ._3g4iYm8XwkM- {
-  color: rgb(181, 181, 181);
+  color: hsl(0, 0%, 72%);
   color: var(--color-disabled);
 }
 
@@ -488,9 +488,9 @@
   --public-field--bottom-left-radius: var(--radius-base);
   --public-field--bottom-right-radius: var(--radius-base);
 
-  --field--placeholder-color: var(--color-greyBlue--light);
+  --field--placeholder-color: var(--color-base-blue--600);
   --field--value-color: var(--color-heading);
-  --field--border-color: var(--color-border);
+  --field--border-color: var(--color-base-blue--500);
 
   --postfix-right: var(--space-base);
 }
@@ -531,7 +531,7 @@
   -ms-flex-direction: column;
       flex-direction: column;
   width: 100%;
-  border: calc(16px / 16) solid rgb(218, 224, 226);
+  border: calc(16px / 16) solid hsl(198, 12%, 57%);
   border: var(--border-base) solid var(--field--border-color);
   border-radius: 8px;
   border-radius: var(--radius-base);
@@ -543,7 +543,7 @@
   border-bottom-left-radius: var(--public-field--bottom-left-radius);
   border-top-left-radius: 8px;
   border-top-left-radius: var(--public-field--top-left-radius);
-  color: rgb(1, 40, 55);
+  color: hsl(197, 90%, 12%);
   color: var(--field--value-color);
   font-size: calc((16px * 1) * 0.875);
   font-size: calc(calc(16px * 1) * 0.875);
@@ -560,7 +560,7 @@
   position: relative;
   z-index: var(--field--base-elevation);
   box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),
-    0px 0px 0px calc(16px / 4) rgb(131, 151, 160);
+    0px 0px 0px calc(16px / 4) hsl(198, 12%, 57%);
   box-shadow: var(--shadow-focus);
 }
 
@@ -619,7 +619,7 @@
 /* override iOS default styling for disabled input */
 
 ._1rsTLm5GwcM- :disabled {
-  -webkit-text-fill-color: rgb(1, 40, 55);
+  -webkit-text-fill-color: hsl(197, 90%, 12%);
   -webkit-text-fill-color: var(--field--value-color);
   opacity: 1;
 }
@@ -758,7 +758,7 @@
   padding-left: var(--field--padding-left);
   padding-right: var(--field--padding-right);
   overflow: hidden;
-  color: rgb(147, 161, 169);
+  color: hsl(197, 15%, 45%);
   color: var(--field--placeholder-color);
   line-height: var(--field--value-lineHeight);
   text-align: var(--field--textAlign);
@@ -935,11 +935,11 @@
   min-height: var(--button--size);
   box-sizing: border-box;
   margin: 0;
-  border: calc(16px / 16) solid rgb(50, 130, 28);
+  border: calc(16px / 16) solid hsl(107, 58%, 33%);
   border: var(--border-base) solid var(--button--color-variation);
   border-radius: 8px;
   border-radius: var(--radius-base);
-  color: rgb(50, 130, 28);
+  color: hsl(107, 58%, 33%);
   color: var(--button--color-variation);
   -webkit-font-smoothing: antialiased;
   line-height: 1;
@@ -954,7 +954,7 @@
   transition: all var(--timing-base) ease-out;
   -webkit-appearance: none;
           appearance: none;
-  fill: rgb(50, 130, 28);
+  fill: hsl(107, 58%, 33%);
   fill: var(--button--color-variation);
   -ms-flex-align: center;
       align-items: center;
@@ -977,13 +977,13 @@ a.U9VsquOtk2I-:hover,
 a.U9VsquOtk2I-:focus-visible,
 .U9VsquOtk2I-:active,
 a.U9VsquOtk2I-:active {
-  border-color: rgb(14, 78, 26);
+  border-color: hsl(107, 65%, 24%);
   border-color: var(--button--color-variation--hover);
-  color: rgb(14, 78, 26);
+  color: hsl(107, 65%, 24%);
   color: var(--button--color-variation--hover);
-  fill: rgb(14, 78, 26);
+  fill: hsl(107, 65%, 24%);
   fill: var(--button--color-variation--hover);
-  background-color: rgb(241, 239, 233);
+  background-color: hsl(53, 21%, 93%);
   background-color: var(--button--color-surface--hover);
 }
 
@@ -992,7 +992,7 @@ a.U9VsquOtk2I-:focus-visible,
 .U9VsquOtk2I-:active,
 a.U9VsquOtk2I-:active {
   box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),
-    0px 0px 0px calc(16px / 4) rgb(131, 151, 160);
+    0px 0px 0px calc(16px / 4) hsl(198, 12%, 57%);
   box-shadow: var(--shadow-focus);
   outline: transparent;
 }
@@ -1022,7 +1022,7 @@ a.U9VsquOtk2I-:active {
 .FXqN12jWtPo-:not(.vDKO-cmh8vY-):not(.bg-l22drjd0-):focus-visible {
   color: rgba(255, 255, 255, 1);
   color: var(--button--color-primaryLabel);
-  background-color: rgb(50, 130, 28);
+  background-color: hsl(107, 58%, 33%);
   background-color: var(--button--color-variation);
   fill: rgba(255, 255, 255, 1);
   fill: var(--button--color-primaryLabel);
@@ -1030,14 +1030,14 @@ a.U9VsquOtk2I-:active {
 
 .FXqN12jWtPo-:not(.vDKO-cmh8vY-):not(.bg-l22drjd0-):hover,
 .FXqN12jWtPo-:not(.vDKO-cmh8vY-):not(.bg-l22drjd0-):focus-visible {
-  background-color: rgb(14, 78, 26);
+  background-color: hsl(107, 65%, 24%);
   background-color: var(--button--color-variation--hover);
 }
 
 .vDKO-cmh8vY-.FXqN12jWtPo- {
-  color: rgb(50, 130, 28);
+  color: hsl(107, 58%, 33%);
   color: var(--button--color-variation);
-  fill: rgb(50, 130, 28);
+  fill: hsl(107, 58%, 33%);
   fill: var(--button--color-variation);
   background-color: rgba(255, 255, 255, 1);
   background-color: var(--button--color-surface);
@@ -1045,17 +1045,17 @@ a.U9VsquOtk2I-:active {
 
 .pf6G840lKdA-,
 .vDKO-cmh8vY-.FXqN12jWtPo- {
-  border-color: rgb(218, 224, 226);
+  border-color: hsl(200, 13%, 87%);
   border-color: var(--color-border);
 }
 
 .vDKO-cmh8vY-.FXqN12jWtPo-:hover,
 .vDKO-cmh8vY-.FXqN12jWtPo-:focus-visible {
-  color: rgb(14, 78, 26);
+  color: hsl(107, 65%, 24%);
   color: var(--button--color-variation--hover);
-  background-color: rgb(241, 239, 233);
+  background-color: hsl(53, 21%, 93%);
   background-color: var(--button--color-surface--hover);
-  fill: rgb(14, 78, 26);
+  fill: hsl(107, 65%, 24%);
   fill: var(--button--color-variation--hover);
 }
 
@@ -1063,7 +1063,7 @@ a.U9VsquOtk2I-:active {
 .vDKO-cmh8vY-.FXqN12jWtPo-:hover,
 .pf6G840lKdA-:focus-visible,
 .vDKO-cmh8vY-.FXqN12jWtPo-:focus-visible {
-  border-color: rgb(14, 78, 26);
+  border-color: hsl(107, 65%, 24%);
   border-color: var(--button--color-variation--hover);
 }
 
@@ -1089,7 +1089,7 @@ a.U9VsquOtk2I-:active {
 
 .vDKO-cmh8vY-.pf6G840lKdA-:hover,
 .vDKO-cmh8vY-.pf6G840lKdA-:focus-visible {
-  background-color: rgb(241, 239, 233);
+  background-color: hsl(53, 21%, 93%);
   background-color: var(--button--color-surface--hover);
 }
 
@@ -1113,11 +1113,11 @@ a.m7DbwRZWcNk-:focus-visible {
 .vDKO-cmh8vY-.m7DbwRZWcNk-:focus-visible,
 a.vDKO-cmh8vY-.m7DbwRZWcNk-:hover,
 a.vDKO-cmh8vY-.m7DbwRZWcNk-:focus-visible {
-  color: rgb(1, 25, 35);
+  color: hsl(197, 90%, 12%);
   color: var(--color-interactive--subtle--hover);
-  background-color: rgb(241, 239, 233);
+  background-color: hsl(53, 21%, 93%);
   background-color: var(--color-surface--hover);
-  fill: rgb(1, 25, 35);
+  fill: hsl(197, 90%, 12%);
   fill: var(--color-interactive--subtle--hover);
 }
 
@@ -1127,16 +1127,16 @@ a.vDKO-cmh8vY-.m7DbwRZWcNk-:focus-visible {
 a.U9VsquOtk2I-.bg-l22drjd0-,
 .U9VsquOtk2I-.bg-l22drjd0-:hover,
 a.U9VsquOtk2I-.bg-l22drjd0-:hover {
-  border-color: rgb(225, 225, 225);
+  border-color: hsl(0, 0%, 93%);
   border-color: var(--color-disabled--secondary);
-  color: rgb(181, 181, 181);
+  color: hsl(0, 0%, 72%);
   color: var(--color-disabled);
   -webkit-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  background-color: rgb(225, 225, 225);
+  background-color: hsl(0, 0%, 93%);
   background-color: var(--color-disabled--secondary);
-  fill: rgb(181, 181, 181);
+  fill: hsl(0, 0%, 72%);
   fill: var(--color-disabled);
   pointer-events: none;
   cursor: not-allowed;
@@ -1145,10 +1145,10 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 /* Sizes */
 
 .STSDgSRREx4- {
-  --button--size: 24px;
-  padding: calc(16px / 2) calc((16px * 1) - (16px / 4));
-  padding: calc(16px / 2) calc(calc(16px * 1) - calc(16px / 4));
-  padding: var(--space-small) calc(var(--space-base) - var(--space-smaller));
+  --button--size: 32px;
+  padding: calc(16px / 4) calc((16px * 1) - (16px / 4));
+  padding: calc(16px / 4) calc(calc(16px * 1) - calc(16px / 4));
+  padding: var(--space-smaller) calc(var(--space-base) - var(--space-smaller));
 }
 
 .amIh7vPETfo- {
@@ -1285,7 +1285,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
   border: none;
   border-radius: 100%;
   border-radius: var(--radius-circle);
-  background-color: rgb(241, 239, 233);
+  background-color: hsl(53, 21%, 93%);
   background-color: var(--color-surface--background);
   cursor: pointer;
   -ms-flex-pack: center;
@@ -1303,13 +1303,13 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 .t1fFX8kDJh8-:hover,
 .t1fFX8kDJh8-:focus-visible {
   outline: none;
-  background-color: rgb(241, 239, 233);
+  background-color: hsl(53, 21%, 93%);
   background-color: var(--color-surface--background);
 }
 
 .t1fFX8kDJh8-:focus-visible {
   box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),
-    0px 0px 0px calc(16px / 4) rgb(131, 151, 160);
+    0px 0px 0px calc(16px / 4) hsl(198, 12%, 57%);
   box-shadow: var(--shadow-focus);
 }
 
@@ -1339,7 +1339,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 
 .xybhC5Y6mk4-:focus {
   box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),
-    0px 0px 0px calc(16px / 4) rgb(131, 151, 160);
+    0px 0px 0px calc(16px / 4) hsl(198, 12%, 57%);
   box-shadow: var(--shadow-focus);
   outline: none;
 }
@@ -1350,7 +1350,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
   height: calc(16px * 2);
   height: var(--space-larger);
   box-shadow: 0px 0px 4px 2px rgba(1, 41, 57, 0.4);
-  border: solid rgb(78, 105, 116);
+  border: solid hsl(198, 25%, 33%);
   border: solid var(--color-blue--light);
   border-top-color: rgba(255, 255, 255, 1);
   border-top-color: var(--color-white);
@@ -1359,7 +1359,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
   border-width: calc(var(--space-small) * 0.75);
   border-radius: 100%;
   border-radius: var(--radius-circle);
-  background-color: rgb(218, 224, 226);
+  background-color: hsl(200, 13%, 87%);
   background-color: var(--color-blue--lightest);
   -webkit-animation-duration: calc(500ms * 2);
   -webkit-animation-duration: calc(var(--timing-slowest) * 2);
@@ -1437,19 +1437,19 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
   min-height: var(--avatar-size);
   border-radius: 100%;
   border-radius: var(--radius-circle);
-  color: rgb(1, 40, 55);
+  color: hsl(197, 90%, 12%);
   color: var(--color-heading);
   font-size: calc(16px * 2);
   font-size: var(--avatar-size);
   -webkit-font-smoothing: antialiased;
-  background: no-repeat center center rgba(101, 120, 132, 1);
+  background: no-repeat center center hsl(197, 15%, 45%);
   background: no-repeat center center var(--color-greyBlue);
   background-size: cover;
 }
 
 .WniTNadEyPk-:focus {
   box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),
-    0px 0px 0px calc(16px / 4) rgb(131, 151, 160);
+    0px 0px 0px calc(16px / 4) hsl(198, 12%, 57%);
   box-shadow: var(--shadow-focus);
   outline: none;
 }
@@ -1506,11 +1506,11 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
   padding: calc((16px * 1) - (16px / 4)) calc(16px * 1);
   padding: calc(calc(16px * 1) - calc(16px / 4)) calc(16px * 1);
   padding: calc(var(--space-base) - var(--space-smaller)) var(--space-base);
-  border: calc(16px / 16) solid rgb(218, 224, 226);
+  border: calc(16px / 16) solid hsl(200, 13%, 87%);
   border: var(--border-base) solid var(--color-border);
   border-radius: 8px;
   border-radius: var(--radius-base);
-  color: rgb(66, 78, 86);
+  color: hsl(198, 35%, 21%);
   color: var(--color-text);
   background-color: rgba(255, 255, 255, 1);
   background-color: var(--color-surface);
@@ -1521,12 +1521,12 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 }
 
 .y4BapyZr-fo- > a {
-  color: rgb(66, 78, 86);
+  color: hsl(198, 35%, 21%);
   color: var(--color-text);
 }
 
 .y4BapyZr-fo- > a:hover {
-  color: rgb(1, 40, 55);
+  color: hsl(197, 90%, 12%);
   color: var(--color-blue);
 }
 
@@ -1635,7 +1635,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
   padding: var(--space-smaller);
   border-radius: 100%;
   border-radius: var(--radius-circle);
-  background-color: rgb(241, 239, 233);
+  background-color: hsl(53, 21%, 93%);
   background-color: var(--color-surface--background);
 }
 
@@ -1645,22 +1645,22 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 }
 
 ._5-B0X5vn0eA- {
-  background-color: rgb(50, 130, 28);
+  background-color: hsl(107, 58%, 33%);
   background-color: var(--color-success);
 }
 
 .r3hqur-vxwI- {
-  background-color: rgb(199, 20, 0);
+  background-color: hsl(6, 64%, 51%);
   background-color: var(--color-destructive);
 }
 
 .-c8TbjyV5YU- {
-  background-color: rgb(209, 185, 46);
+  background-color: hsl(51, 64%, 49%);
   background-color: var(--color-warning);
 }
 
 .bMc69fYWngM- {
-  background-color: rgb(60, 162, 224);
+  background-color: hsl(207, 79%, 57%);
   background-color: var(--color-informative);
 }
 
@@ -1673,11 +1673,11 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 ._2wxPdv7kELk- {
   display: block;
   width: 100%;
-  border: calc(16px / 16) solid rgb(218, 224, 226);
+  border: calc(16px / 16) solid hsl(200, 13%, 87%);
   border: var(--card--border);
   border-radius: 8px;
   border-radius: var(--radius-base);
-  outline-color: rgb(131, 151, 160);
+  outline-color: hsl(198, 12%, 57%);
   outline-color: var(--color-focus);
   background-color: rgba(255, 255, 255, 1);
   background-color: var(--color-surface);
@@ -1709,7 +1709,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
   margin: 0 calc(-1 * (16px / 16));
   margin: 0 calc(-1 * calc(16px / 16));
   margin: 0 calc(-1 * var(--border-base));
-  border-top: 0.375rem solid rgb(181, 181, 181);
+  border-top: 0.375rem solid hsl(0, 0%, 72%);
   border-top: 0.375rem solid var(--card--accent-color);
   border-radius: 8px 8px 0 0;
   border-radius: var(--radius-base) var(--radius-base) 0 0;
@@ -1732,7 +1732,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 
 .tRfpysqqk8s-:hover,
 .tRfpysqqk8s-:focus {
-  background-color: rgb(241, 239, 233);
+  background-color: hsl(53, 21%, 93%);
   background-color: var(--color-surface--hover);
 }
 
@@ -2131,7 +2131,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
     width: calc(16px * 12.5);
     width: calc(var(--base-unit) * 12.5);
     padding: var(--menu-space);
-    border: calc(16px / 16) solid rgb(218, 224, 226);
+    border: calc(16px / 16) solid hsl(200, 13%, 87%);
     border: var(--border-base) solid var(--color-border);
     border-radius: 8px;
     border-radius: var(--radius-base);
@@ -2147,7 +2147,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
     width: calc(16px * 12.5);
     width: calc(var(--base-unit) * 12.5);
     padding: var(--menu-space);
-    border: calc(16px / 16) solid rgb(218, 224, 226);
+    border: calc(16px / 16) solid hsl(200, 13%, 87%);
     border: var(--border-base) solid var(--color-border);
     border-radius: 8px;
     border-radius: var(--radius-base);
@@ -2223,7 +2223,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 
 .LaKFjYCLHZc- {
   padding: var(--menu-space) 0;
-  border-bottom: calc(16px / 16) solid rgb(218, 224, 226);
+  border-bottom: calc(16px / 16) solid hsl(200, 13%, 87%);
   border-bottom: var(--border-base) solid var(--color-border);
 }
 
@@ -2261,9 +2261,9 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 
 .ZuceCiefKqw-:hover,
 .ZuceCiefKqw-:focus-visible {
-  background-color: rgb(241, 239, 233);
+  background-color: hsl(53, 21%, 93%);
   background-color: var(--color-surface--hover);
-  outline-color: rgb(131, 151, 160);
+  outline-color: hsl(198, 12%, 57%);
   outline-color: var(--color-focus);
 }
 
@@ -2382,18 +2382,18 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 .rup0RBe4DNU-.Njn2CQDXwVA- + .lOQVnJA7zPM-,
 .rup0RBe4DNU-:checked + .lOQVnJA7zPM- {
   border-color: var(--checkbox--border--checked);
-  background-color: rgb(50, 130, 28);
+  background-color: hsl(107, 58%, 33%);
   background-color: var(--color-interactive);
 }
 
 .rup0RBe4DNU-:focus-visible + .lOQVnJA7zPM- {
   box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),
-    0px 0px 0px calc(16px / 4) rgb(131, 151, 160);
+    0px 0px 0px calc(16px / 4) hsl(198, 12%, 57%);
   box-shadow: var(--shadow-focus);
 }
 
 .HRrf3AZlpHc- p {
-  color: rgb(181, 181, 181);
+  color: hsl(0, 0%, 72%);
   color: var(--color-disabled);
 }
 
@@ -2403,7 +2403,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 
 .HRrf3AZlpHc- .rup0RBe4DNU-.Njn2CQDXwVA- + .lOQVnJA7zPM-,
 .HRrf3AZlpHc- .rup0RBe4DNU-:checked + .lOQVnJA7zPM- {
-  background-color: rgb(225, 225, 225);
+  background-color: hsl(0, 0%, 93%);
   background-color: var(--color-disabled--secondary);
 }
 
@@ -2449,7 +2449,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
   border: var(--border-base) solid transparent;
   border-radius: 20px;
   border-radius: var(--chip-radius);
-  color: rgb(1, 40, 55);
+  color: hsl(197, 90%, 12%);
   color: var(--color-heading);
   text-align: left;
   cursor: pointer;
@@ -2466,7 +2466,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 
 .af7U8MvcbHE-:focus-visible {
   box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),
-    0px 0px 0px calc(16px / 4) rgb(131, 151, 160);
+    0px 0px 0px calc(16px / 4) hsl(198, 12%, 57%);
   box-shadow: var(--shadow-focus);
 }
 
@@ -2518,7 +2518,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
   height: var(--base-unit);
   margin: 0 calc(16px / 2);
   margin: 0 var(--space-small);
-  background-color: rgb(78, 105, 116);
+  background-color: hsl(197, 15%, 45%);
   background-color: var(--color-text--secondary);
 }
 
@@ -2532,7 +2532,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 .wSI5L-5rODg- {
   border: calc(16px / 16) solid transparent;
   border: var(--border-base) solid transparent;
-  color: rgb(1, 40, 55);
+  color: hsl(197, 90%, 12%);
   color: var(--color-heading);
   background-color: var(--chip-base-bg);
   --chip--gradient-color-variation: var(--chip-base-bg);
@@ -2550,9 +2550,9 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 .Mux23dmZSuw-.SmUxkzpIC84-,
 .Mux23dmZSuw-.SmUxkzpIC84-:hover,
 .Mux23dmZSuw-.SmUxkzpIC84-:focus-visible {
-  border: calc(16px / 16) solid rgb(199, 20, 0);
+  border: calc(16px / 16) solid hsl(6, 64%, 51%);
   border: var(--border-base) solid var(--color-critical);
-  background-color: rgb(250, 237, 234);
+  background-color: hsl(7, 63%, 95%);
   background-color: var(--color-critical--surface);
   --chip--gradient-color-variation: var(--color-critical--surface);
   --chip--gradient-color-variation--hover: var(--color-critical--surface);
@@ -2562,7 +2562,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 .SmUxkzpIC84-:focus-visible,
 .Mux23dmZSuw-.SmUxkzpIC84-:hover,
 .Mux23dmZSuw-.SmUxkzpIC84-:focus-visible {
-  background-color: rgb(231, 229, 217);
+  background-color: hsl(49, 7%, 70%);
   background-color: var(--color-surface--background--hover);
   --chip--gradient-color-variation: var(--color-surface--background--hover);
   --chip--gradient-color-variation--hover: var(
@@ -2571,7 +2571,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 }
 
 .Mux23dmZSuw- {
-  border: calc(16px / 16) solid rgb(218, 224, 226);
+  border: calc(16px / 16) solid hsl(200, 13%, 87%);
   border: var(--border-base) solid var(--color-border);
   background-color: rgba(255, 255, 255, 1);
   background-color: var(--color-surface);
@@ -2597,7 +2597,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 .SmUxkzpIC84-.MbRItb9vKhc-,
 .SmUxkzpIC84-.MbRItb9vKhc-:hover,
 .SmUxkzpIC84-.MbRItb9vKhc-:focus-visible {
-  background-color: rgb(225, 225, 225);
+  background-color: hsl(0, 0%, 93%);
   background-color: var(--color-disabled--secondary);
   cursor: auto;
 }
@@ -2605,11 +2605,11 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 .MbRItb9vKhc-,
 .MbRItb9vKhc-:hover,
 .MbRItb9vKhc-:focus-visible {
-  border: calc(16px / 16) solid rgb(225, 225, 225);
+  border: calc(16px / 16) solid hsl(0, 0%, 93%);
   border: var(--border-base) solid var(--color-disabled--secondary);
-  color: rgb(181, 181, 181);
+  color: hsl(0, 0%, 72%);
   color: var(--color-disabled);
-  background-color: rgb(225, 225, 225);
+  background-color: hsl(0, 0%, 93%);
   background-color: var(--color-disabled--secondary);
   cursor: auto;
   --chip--gradient-color-variation: var(--color-disabled--secondary);
@@ -2617,17 +2617,17 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 }
 
 .MbRItb9vKhc- .dg1-Izy1eQA- {
-  background-color: rgb(181, 181, 181);
+  background-color: hsl(0, 0%, 72%);
   background-color: var(--color-disabled);
 }
 
 .af7U8MvcbHE-.MbRItb9vKhc- .ySADfZ0FckM- {
-  background-color: rgb(225, 225, 225);
+  background-color: hsl(0, 0%, 93%);
   background-color: var(--color-disabled--secondary);
 }
 
 .af7U8MvcbHE-.MbRItb9vKhc- .ySADfZ0FckM- path {
-  fill: rgb(181, 181, 181);
+  fill: hsl(0, 0%, 72%);
   fill: var(--color-disabled);
 }
 
@@ -2716,7 +2716,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
   padding: calc(var(--space-base) - var(--space-smallest)) var(--space-base);
   border-radius: 8px;
   border-radius: var(--radius-base);
-  background-color: rgb(1, 40, 55);
+  background-color: hsl(198, 35%, 21%);
   background-color: var(--tooltip--surface);
 }
 
@@ -2733,7 +2733,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
   content: "";
   display: block;
   position: absolute;
-  background-color: rgb(1, 40, 55);
+  background-color: hsl(198, 35%, 21%);
   background-color: var(--tooltip--surface);
   -webkit-transform: rotate(45deg);
           transform: rotate(45deg);
@@ -2839,11 +2839,11 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
   box-sizing: border-box;
   padding: calc(16px / 2);
   padding: var(--space-small);
-  border: calc(16px / 16) solid rgb(218, 224, 226);
+  border: calc(16px / 16) solid hsl(200, 13%, 87%);
   border: var(--border-base) solid var(--color-border);
   border-radius: calc(8px * 3);
   border-radius: var(--radius-larger);
-  color: rgb(78, 105, 116);
+  color: hsl(197, 15%, 45%);
   color: var(--color-text--secondary);
   text-align: left;
   vertical-align: middle;
@@ -2900,7 +2900,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 .PEnZzMEgbhU-:focus,
 .W4D98cvEth4-:focus ~ .PEnZzMEgbhU- {
   box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),
-    0px 0px 0px calc(16px / 4) rgb(131, 151, 160);
+    0px 0px 0px calc(16px / 4) hsl(198, 12%, 57%);
   box-shadow: var(--shadow-focus);
   outline: none;
 }
@@ -2908,7 +2908,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 .SNT7gGV-h-o-:hover,
 .W4D98cvEth4- ~ .PEnZzMEgbhU-:not(._0hEzaTXK9M0-):hover,
 .W4D98cvEth4-:focus ~ .PEnZzMEgbhU-:not(._0hEzaTXK9M0-) {
-  background-color: rgb(241, 239, 233);
+  background-color: hsl(53, 21%, 93%);
   background-color: var(--color-surface--hover);
 }
 
@@ -2917,43 +2917,43 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
  */
 
 .PEnZzMEgbhU-._0hEzaTXK9M0- {
-  border-color: rgb(1, 40, 55);
+  border-color: hsl(198, 35%, 21%);
   border-color: var(--color-surface--reverse);
   color: rgba(255, 255, 255, 1);
   color: var(--color-text--reverse);
-  background-color: rgb(1, 40, 55);
+  background-color: hsl(198, 35%, 21%);
   background-color: var(--color-surface--reverse);
 }
 
 .PEnZzMEgbhU-.JApS2787BU8- {
-  border-color: rgb(87, 9, 0);
+  border-color: hsl(6, 100%, 24%);
   border-color: var(--color-critical--onSurface);
-  color: rgb(87, 9, 0);
+  color: hsl(6, 100%, 24%);
   color: var(--color-critical--onSurface);
-  background-color: rgb(250, 237, 234);
+  background-color: hsl(7, 63%, 95%);
   background-color: var(--color-critical--surface);
 }
 
 .PEnZzMEgbhU-.Kg0c8WVgMpg- {
-  border-color: rgb(225, 225, 225);
+  border-color: hsl(0, 0%, 93%);
   border-color: var(--color-disabled--secondary);
-  color: rgb(181, 181, 181);
+  color: hsl(0, 0%, 72%);
   color: var(--color-disabled);
-  background-color: rgb(225, 225, 225);
+  background-color: hsl(0, 0%, 93%);
   background-color: var(--color-disabled--secondary);
 }
 
 ._0hEzaTXK9M0-.Kg0c8WVgMpg- {
-  border-color: rgb(181, 181, 181);
+  border-color: hsl(0, 0%, 72%);
   border-color: var(--color-disabled);
   color: rgba(255, 255, 255, 1);
   color: var(--color-white);
-  background-color: rgb(181, 181, 181);
+  background-color: hsl(0, 0%, 72%);
   background-color: var(--color-disabled);
 }
 
 .JApS2787BU8-.Kg0c8WVgMpg- {
-  border-color: rgb(199, 20, 0);
+  border-color: hsl(6, 64%, 51%);
   border-color: var(--color-critical);
 }
 
@@ -2989,14 +2989,14 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 
 ._0-ZWexS4Gfg-:hover,
 ._0-ZWexS4Gfg-:focus {
-  background-color: rgb(241, 239, 233);
+  background-color: hsl(53, 21%, 93%);
   background-color: var(--color-surface--hover);
 }
 
 ._0-ZWexS4Gfg-:focus,
 .SNT7gGV-h-o- ._0-ZWexS4Gfg-:hover {
   box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),
-    0px 0px 0px calc(16px / 4) rgb(131, 151, 160);
+    0px 0px 0px calc(16px / 4) hsl(198, 12%, 57%);
   box-shadow: var(--shadow-focus);
   outline: none;
 }
@@ -3010,7 +3010,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
  */
 
 .DQPnZP4UZpw- > svg {
-  fill: rgb(1, 40, 55);
+  fill: hsl(198, 35%, 21%);
   fill: var(--color-interactive--subtle);
 }
 
@@ -3104,14 +3104,14 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 
 .y7Cz2u8BuNE-:focus {
   box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),
-    0px 0px 0px calc(16px / 4) rgb(131, 151, 160);
+    0px 0px 0px calc(16px / 4) hsl(198, 12%, 57%);
   box-shadow: var(--shadow-focus);
 }
 
 .y7Cz2u8BuNE-:focus,
 .iCwWdcmtInc- {
   outline: none;
-  background-color: rgb(241, 239, 233);
+  background-color: hsl(53, 21%, 93%);
   background-color: var(--color-surface--hover);
 }
 
@@ -3132,7 +3132,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
   box-shadow: var(--shadow-base);
   margin-top: calc(16px / 2);
   margin-top: var(--space-small);
-  border: calc(16px / 16) solid rgb(218, 224, 226);
+  border: calc(16px / 16) solid hsl(200, 13%, 87%);
   border: var(--border-base) solid var(--color-border);
   border-radius: 8px;
   border-radius: var(--radius-base);
@@ -3157,7 +3157,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 
 .m1w5vdUZ6rQ-:focus-visible {
   box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),
-    0px 0px 0px calc(16px / 4) rgb(131, 151, 160);
+    0px 0px 0px calc(16px / 4) hsl(198, 12%, 57%);
   box-shadow: var(--shadow-focus);
 }
 
@@ -3192,7 +3192,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
   padding-right: calc(calc(16px * 1.5) * 2.25);
   padding-right: calc(var(--space-large) * 2.25);
   border: none;
-  border-bottom: calc(16px / 16) solid rgb(218, 224, 226);
+  border-bottom: calc(16px / 16) solid hsl(200, 13%, 87%);
   border-bottom: var(--border-base) solid var(--color-border);
   font-family: "Inter", Helvetica, Arial, sans-serif;
   font-family: var(--typography--fontFamily-normal);
@@ -3229,7 +3229,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
   border: none;
   border-radius: 100%;
   border-radius: var(--radius-circle);
-  background-color: rgb(241, 239, 233);
+  background-color: hsl(53, 21%, 93%);
   background-color: var(--color-surface--background);
   cursor: pointer;
   -webkit-transform: translateY(-50%);
@@ -3246,7 +3246,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 
 ._7loHrVUe-Rk-:focus-visible {
   box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),
-    0px 0px 0px calc(16px / 4) rgb(131, 151, 160);
+    0px 0px 0px calc(16px / 4) hsl(198, 12%, 57%);
   box-shadow: var(--shadow-focus);
 }
 
@@ -3627,7 +3627,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
   padding: var(--space-small);
   border-radius: 8px;
   border-radius: var(--radius-base);
-  color: rgb(1, 40, 55);
+  color: hsl(197, 90%, 12%);
   color: var(--color-heading);
   font-weight: 500;
   cursor: pointer;
@@ -3641,7 +3641,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 
 ._5QdRGmaNHvc-:hover,
 ._5QdRGmaNHvc-:focus-visible {
-  background-color: rgb(241, 239, 233);
+  background-color: hsl(53, 21%, 93%);
   background-color: var(--color-surface--hover);
 }
 
@@ -3652,7 +3652,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 
 ._5QdRGmaNHvc-:focus-visible {
   box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),
-    0px 0px 0px calc(16px / 4) rgb(131, 151, 160);
+    0px 0px 0px calc(16px / 4) hsl(198, 12%, 57%);
   box-shadow: var(--shadow-focus);
 }
 
@@ -3712,13 +3712,13 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 .ncp0nKHQ7d8-:hover,
 .ncp0nKHQ7d8-:focus-visible {
   outline: none;
-  background-color: rgb(241, 239, 233);
+  background-color: hsl(53, 21%, 93%);
   background-color: var(--color-surface--hover);
 }
 
 .ncp0nKHQ7d8-:focus-visible {
   box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),
-    0px 0px 0px calc(16px / 4) rgb(131, 151, 160);
+    0px 0px 0px calc(16px / 4) hsl(198, 12%, 57%);
   box-shadow: var(--shadow-focus);
 }
 
@@ -3808,7 +3808,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
     0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);
   box-shadow: var(--modal--shadow);
   margin: auto;
-  border: calc(16px / 16) solid rgb(218, 224, 226);
+  border: calc(16px / 16) solid hsl(200, 13%, 87%);
   border: var(--border-base) solid var(--color-border);
   border-radius: 8px;
   border-radius: var(--radius-base);
@@ -3816,7 +3816,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
   background-color: var(--color-surface);
   -ms-flex: 0 0 auto;
       flex: 0 0 auto;
-  outline-color: rgb(131, 151, 160);
+  outline-color: hsl(198, 12%, 57%);
   outline-color: var(--color-focus);
 }
 
@@ -3984,7 +3984,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
   min-height: var(--space-largest);
   padding: calc(16px / 2);
   padding: var(--space-small);
-  border-bottom: calc(16px / 8) solid rgb(218, 224, 226);
+  border-bottom: calc(16px / 8) solid hsl(200, 13%, 87%);
   border-bottom: var(--border-thick) solid var(--color-border);
 }
 
@@ -4038,7 +4038,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
   position: relative;
   padding: calc(16px / 2);
   padding: var(--space-small);
-  border-bottom: calc(16px / 16) solid rgb(218, 224, 226);
+  border-bottom: calc(16px / 16) solid hsl(200, 13%, 87%);
   border-bottom: var(--border-base) solid var(--color-border);
   transition: all 200ms;
   transition: all var(--timing-base);
@@ -4057,7 +4057,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 .ise8kHCfhCY-:hover,
 .ise8kHCfhCY-:focus-within {
   --data-list-item-active-color: var(--color-surface--hover);
-  background-color: rgb(241, 239, 233);
+  background-color: hsl(53, 21%, 93%);
   background-color: var(--data-list-item-active-color);
 }
 
@@ -4292,7 +4292,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
   box-shadow: var(--shadow-base);
   padding: calc(16px / 4);
   padding: var(--space-smaller);
-  border: calc(16px / 16) solid rgb(218, 224, 226);
+  border: calc(16px / 16) solid hsl(200, 13%, 87%);
   border: var(--border-base) solid var(--color-border);
   border-radius: 8px;
   border-radius: var(--radius-base);
@@ -4485,72 +4485,72 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 }
 
 ._8RuKvOhj-Ro- {
-  color: rgb(66, 78, 86);
+  color: hsl(198, 35%, 21%);
   color: var(--color-greyBlue--dark);
-  background-color: rgb(238, 240, 242);
+  background-color: hsl(195, 12%, 94%);
   background-color: var(--color-greyBlue--lightest);
 }
 
 ._2vEF1nvVWm8- {
-  color: rgb(87, 9, 0);
+  color: hsl(6, 100%, 24%);
   color: var(--color-red--dark);
-  background-color: rgb(250, 237, 234);
+  background-color: hsl(7, 63%, 95%);
   background-color: var(--color-red--lightest);
 }
 
 .Wt305sIAeoE- {
-  color: rgb(158, 98, 23);
+  color: hsl(33, 71%, 38%);
   color: var(--color-orange--dark);
-  background-color: rgb(253, 239, 222);
+  background-color: hsl(34, 76%, 92%);
   background-color: var(--color-orange--lightest);
 }
 
 .F8KkNxz8W3A- {
-  color: rgb(14, 78, 26);
+  color: hsl(107, 64%, 16%);
   color: var(--color-green--dark);
-  background-color: rgb(241, 247, 238);
+  background-color: hsl(109, 28%, 92%);
   background-color: var(--color-green--lightest);
 }
 
 .URZZoKSX4So- {
-  color: rgb(1, 25, 35);
+  color: hsl(198, 96%, 9%);
   color: var(--color-blue--dark);
-  background-color: rgb(218, 224, 226);
+  background-color: hsl(200, 13%, 87%);
   background-color: var(--color-blue--lightest);
 }
 
 .OeLBV-9i0Rs- {
-  color: rgb(49, 69, 98);
+  color: hsl(206, 61%, 23%);
   color: var(--color-navy--dark);
-  background-color: rgb(228, 233, 239);
+  background-color: hsl(195, 12%, 94%);
   background-color: var(--color-navy--lightest);
 }
 
 ._2Xwx5tarf1w- {
-  color: rgb(91, 79, 6);
+  color: hsl(51, 64%, 32%);
   color: var(--color-yellow--dark);
-  background-color: rgb(250, 248, 234);
+  background-color: hsl(49, 67%, 95%);
   background-color: var(--color-yellow--lightest);
 }
 
 .iCqIjI7GkEk- {
-  color: rgb(99, 125, 46);
+  color: hsl(79, 85%, 21%);
   color: var(--color-lime--dark);
-  background-color: rgb(240, 246, 227);
+  background-color: hsl(79, 49%, 90%);
   background-color: var(--color-lime--lightest);
 }
 
 ._4iEIjiZj9oA- {
-  color: rgb(88, 73, 127);
+  color: hsl(347, 41%, 18%);
   color: var(--color-purple--dark);
   background-color: rgb(237, 234, 246);
   background-color: var(--color-purple--lightest);
 }
 
 .JRW9QFSjLTA- {
-  color: rgb(116, 62, 98);
+  color: hsl(348, 40%, 27%);
   color: var(--color-pink--dark);
-  background-color: rgb(244, 231, 239);
+  background-color: hsl(347, 33%, 95%);
   background-color: var(--color-pink--lightest);
 }
 
@@ -4562,23 +4562,23 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 }
 
 .yrF9aZSaTdw- {
-  color: rgb(122, 128, 21);
+  color: hsl(79, 86%, 27%);
   color: var(--color-yellowGreen--dark);
-  background-color: rgb(245, 246, 222);
+  background-color: hsl(79, 49%, 90%);
   background-color: var(--color-yellowGreen--lightest);
 }
 
 .RPvjah0FdjI- {
   color: rgba(255, 255, 255, 1);
   color: var(--color-white);
-  background-color: rgb(78, 105, 116);
+  background-color: hsl(198, 25%, 33%);
   background-color: var(--color-blue--light);
 }
 
 .apwauWJ6ITc- {
-  color: rgb(17, 66, 85);
+  color: hsl(207, 61%, 45%);
   color: var(--color-lightBlue--dark);
-  background-color: rgb(239, 246, 251);
+  background-color: hsl(207, 87%, 94%);
   background-color: var(--color-lightBlue--lightest);
 }
 
@@ -4607,7 +4607,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 
 .fLmJZJJqMcE-:focus-visible {
   box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),
-    0px 0px 0px calc(16px / 4) rgb(131, 151, 160);
+    0px 0px 0px calc(16px / 4) hsl(198, 12%, 57%);
   box-shadow: var(--shadow-focus);
 }
 
@@ -4625,24 +4625,24 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 }
 
 .AN5egORYy-0- path {
-  fill: rgb(1, 40, 55);
+  fill: hsl(198, 35%, 21%);
   fill: var(--color-interactive--subtle);
   transition: all 200ms ease;
   transition: all var(--timing-base) ease;
 }
 
 .AN5egORYy-0- path.F1uTDCK0Sb0- {
-  fill: rgb(1, 40, 55);
+  fill: hsl(197, 90%, 12%);
   fill: var(--color-heading);
 }
 
 .AN5egORYy-0- path._6KYeQXWXLQ8- {
-  fill: rgb(238, 240, 242);
+  fill: hsl(195, 12%, 94%);
   fill: var(--color-inactive--surface);
 }
 
 .AN5egORYy-0-:hover path {
-  fill: rgb(1, 40, 55);
+  fill: hsl(198, 35%, 21%);
   fill: var(--color-interactive--subtle);
   transition: all 200ms ease;
   transition: all var(--timing-base) ease;
@@ -4661,7 +4661,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
   margin-top: var(--space-smaller);
   padding: calc(16px / 2);
   padding: var(--space-small);
-  border: calc(16px / 16) solid rgb(218, 224, 226);
+  border: calc(16px / 16) solid hsl(200, 13%, 87%);
   border: var(--border-base) solid var(--color-border);
   border-radius: 8px;
   border-radius: var(--radius-base);
@@ -4700,13 +4700,13 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 
 .QaXuqbVjG04-:hover,
 .QaXuqbVjG04-:focus {
-  background-color: rgb(241, 239, 233);
+  background-color: hsl(53, 21%, 93%);
   background-color: var(--color-surface--hover);
 }
 
 .QaXuqbVjG04-:focus-visible {
   box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),
-    0px 0px 0px calc(16px / 4) rgb(131, 151, 160);
+    0px 0px 0px calc(16px / 4) hsl(198, 12%, 57%);
   box-shadow: var(--shadow-focus);
 }
 
@@ -4725,7 +4725,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
   box-shadow: var(--shadow-base);
   padding: calc(16px / 4);
   padding: var(--space-smaller);
-  border: calc(16px / 16) solid rgb(218, 224, 226);
+  border: calc(16px / 16) solid hsl(200, 13%, 87%);
   border: var(--border-base) solid var(--color-border);
   border-radius: 8px;
   border-radius: var(--radius-base);
@@ -4784,7 +4784,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
   z-index: -1;
   width: 0;
   height: 0;
-  background-color: rgb(218, 224, 226);
+  background-color: hsl(200, 13%, 87%);
   background-color: var(--color-border);
   -webkit-transform: translateX(-50%);
           transform: translateX(-50%);
@@ -5022,7 +5022,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 
 .iyg43v-S9yU-:hover,
 .iyg43v-S9yU-:focus {
-  background-color: rgb(241, 239, 233);
+  background-color: hsl(53, 21%, 93%);
   background-color: var(--color-surface--hover);
 }
 
@@ -5033,7 +5033,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 
 .iyg43v-S9yU-:focus-visible {
   box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),
-    0px 0px 0px calc(16px / 4) rgb(131, 151, 160);
+    0px 0px 0px calc(16px / 4) hsl(198, 12%, 57%);
   box-shadow: var(--shadow-focus);
 }
 
@@ -5047,7 +5047,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 
 .m5A5oeRFaMs- {
   position: relative;
-  border: calc(16px / 16) solid rgb(218, 224, 226);
+  border: calc(16px / 16) solid hsl(200, 13%, 87%);
   border: var(--border-base) solid var(--color-border);
   border-radius: 8px;
   border-radius: var(--radius-base);
@@ -5067,9 +5067,9 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 .y8xnHe7fwrI- thead tr th {
   padding: calc(16px * 1);
   padding: var(--space-base);
-  border-bottom: calc(16px / 16) solid rgb(218, 224, 226);
+  border-bottom: calc(16px / 16) solid hsl(200, 13%, 87%);
   border-bottom: var(--border-base) solid var(--color-border);
-  color: rgb(1, 40, 55);
+  color: hsl(197, 90%, 12%);
   color: var(--color-heading);
   white-space: nowrap;
 }
@@ -5080,7 +5080,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 }
 
 .y8xnHe7fwrI- tbody tr {
-  border-bottom: calc(16px / 16) solid rgb(218, 224, 226);
+  border-bottom: calc(16px / 16) solid hsl(200, 13%, 87%);
   border-bottom: var(--border-base) solid var(--color-border);
 }
 
@@ -5101,7 +5101,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
       rgba(0, 0, 0, 0.1),
     0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);
   box-shadow: var(--shadow-base);
-  border-top: calc(16px / 8) solid rgb(218, 224, 226);
+  border-top: calc(16px / 8) solid hsl(200, 13%, 87%);
   border-top: var(--border-thick) solid var(--color-border);
   background-color: rgba(255, 255, 255, 1);
   background-color: var(--color-surface);
@@ -5169,20 +5169,20 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 }
 
 .PJEX8dlqCMA-:first-child:hover {
-  background: rgb(241, 239, 233);
+  background: hsl(53, 21%, 93%);
   background: var(--color-surface--hover);
   cursor: pointer;
 }
 
 ._9ps4aWGs8W0-:hover {
-  background: rgb(241, 239, 233);
+  background: hsl(53, 21%, 93%);
   background: var(--color-surface--hover);
   cursor: pointer;
 }
 
 ._59XEEB8l5pI-:hover,
 ._59XEEB8l5pI-:hover :first-child {
-  background: rgb(241, 239, 233);
+  background: hsl(53, 21%, 93%);
   background: var(--color-surface--background);
   cursor: pointer;
 }
@@ -5218,7 +5218,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
   min-height: calc(var(--space-smaller) + var(--space-largest));
   padding: calc(16px / 2) calc(16px * 1);
   padding: var(--space-small) var(--space-base);
-  border-top: calc(16px / 16) solid rgb(218, 224, 226);
+  border-top: calc(16px / 16) solid hsl(200, 13%, 87%);
   border-top: var(--border-base) solid var(--color-border);
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
@@ -5300,7 +5300,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 ._0FexNr-lIgA- {
   padding: calc(16px * 1);
   padding: var(--space-base);
-  border-top: calc(16px / 8) solid rgb(218, 224, 226);
+  border-top: calc(16px / 8) solid hsl(200, 13%, 87%);
   border-top: var(--border-thick) solid var(--color-border);
 }
 
@@ -5332,15 +5332,15 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
   padding-right: var(--space-small);
 }
 .wtb8keLFxgc- path {
-  fill: rgba(101, 120, 132, 1);
+  fill: hsl(197, 15%, 45%);
   fill: var(--color-greyBlue);
 }
 .wtb8keLFxgc- path.TUkZiGiR6hc- {
-  fill: rgb(1, 40, 55);
+  fill: hsl(197, 90%, 12%);
   fill: var(--color-blue);
 }
 .wtb8keLFxgc- path.HkPlMeyz3rM- {
-  fill: rgb(193, 201, 206);
+  fill: hsl(196, 12%, 70%);
   fill: var(--color-greyBlue--lighter);
 }
 
@@ -5959,7 +5959,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
       rgba(0, 0, 0, 0.1),
     0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);
   box-shadow: var(--shadow-base);
-  border-color: rgb(218, 224, 226);
+  border-color: hsl(200, 13%, 87%);
   border-color: var(--color-border);
   border-radius: 8px;
   border-radius: var(--radius-base);
@@ -5979,7 +5979,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 }
 ._8kgzU28z2Eo- .react-datepicker__header {
   padding: 0;
-  border-bottom: calc(16px / 16) solid rgb(218, 224, 226);
+  border-bottom: calc(16px / 16) solid hsl(200, 13%, 87%);
   border-bottom: var(--border-base) solid var(--color-border);
   background: rgba(255, 255, 255, 1);
   background: var(--color-surface);
@@ -6000,7 +6000,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
   margin: 0;
   border-radius: 8px;
   border-radius: var(--radius-base);
-  color: rgb(1, 40, 55);
+  color: hsl(197, 90%, 12%);
   color: var(--color-heading);
   font-size: calc((16px * 1) * 0.875);
   font-size: calc(calc(16px * 1) * 0.875);
@@ -6014,18 +6014,18 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
       justify-content: center;
 }
 ._8kgzU28z2Eo- .react-datepicker__day--highlighted {
-  background: rgb(218, 224, 226);
+  background: hsl(51, 17%, 85%);
   background: var(--color-surface--active);
 }
 ._8kgzU28z2Eo- .react-datepicker__day--outside-month {
   border-radius: 0;
-  color: rgb(66, 78, 86);
+  color: hsl(198, 35%, 21%);
   color: var(--color-text);
-  background: rgb(241, 239, 233);
+  background: hsl(53, 21%, 93%);
   background: var(--color-surface--background);
 }
 ._8kgzU28z2Eo- .react-datepicker__day--disabled {
-  color: rgb(181, 181, 181);
+  color: hsl(0, 0%, 72%);
   color: var(--color-disabled);
   cursor: default;
 }
@@ -6035,7 +6035,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 ._8kgzU28z2Eo- .react-datepicker__day--selected {
   color: rgba(255, 255, 255, 1);
   color: var(--color-text--reverse);
-  background: rgb(50, 130, 28);
+  background: hsl(107, 58%, 33%);
   background: var(--color-interactive);
 }
 ._8kgzU28z2Eo- .react-datepicker__day-names {
@@ -6044,7 +6044,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
   margin: 0;
   padding: calc(16px / 8) 0 0;
   padding: var(--space-smallest) 0 0;
-  color: rgb(66, 78, 86);
+  color: hsl(198, 35%, 21%);
   color: var(--color-text);
   font-size: calc((16px * 1) * 0.75);
   font-size: calc(calc(16px * 1) * 0.75);
@@ -6055,31 +6055,31 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 }
 ._8kgzU28z2Eo- .react-datepicker__day-name {
   width: auto;
-  color: rgb(66, 78, 86);
+  color: hsl(198, 35%, 21%);
   color: var(--color-text);
   -ms-flex: 1;
       flex: 1;
 }
 ._8kgzU28z2Eo- .react-datepicker__day:hover,
 ._8kgzU28z2Eo- .react-datepicker__day:focus {
-  background: rgb(241, 239, 233);
+  background: hsl(53, 21%, 93%);
   background: var(--color-surface--hover);
 }
 ._8kgzU28z2Eo- .react-datepicker__day--outside-month:hover,
 ._8kgzU28z2Eo- .react-datepicker__day--outside-month:focus {
-  background: rgb(231, 229, 217);
+  background: hsl(49, 7%, 70%);
   background: var(--color-surface--background--hover);
 }
 ._8kgzU28z2Eo- .react-datepicker__day:focus {
   position: relative;
   box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),
-    0px 0px 0px calc(16px / 4) rgb(131, 151, 160);
+    0px 0px 0px calc(16px / 4) hsl(198, 12%, 57%);
   box-shadow: var(--shadow-focus);
   outline: none;
 }
 ._8kgzU28z2Eo- .react-datepicker__day--selected:hover,
 ._8kgzU28z2Eo- .react-datepicker__day--selected:focus {
-  background: rgb(14, 78, 26);
+  background: hsl(107, 65%, 24%);
   background: var(--color-interactive--hover);
 }
 ._8kgzU28z2Eo- .react-datepicker__day--disabled:hover,
@@ -6092,13 +6092,13 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 ._8kgzU28z2Eo-
   .react-datepicker__day--disabled.react-datepicker__day--outside-month:focus {
   box-shadow: none;
-  background: rgb(225, 225, 225);
+  background: hsl(0, 0%, 93%);
   background: var(--color-disabled--secondary);
 }
 .D3kDqTSFScU- {
   margin-top: calc(16px / 16);
   margin-top: var(--space-minuscule);
-  color: rgb(1, 40, 55);
+  color: hsl(197, 90%, 12%);
   color: var(--color-heading);
 }
 
@@ -6113,7 +6113,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
       flex-wrap: wrap;
   padding: calc(16px / 2) 0;
   padding: var(--space-small) 0;
-  border-bottom: calc(16px / 16) solid rgb(218, 224, 226);
+  border-bottom: calc(16px / 16) solid hsl(200, 13%, 87%);
   border-bottom: var(--border-base) solid var(--color-border);
 }
 
@@ -6178,14 +6178,14 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 
 .PMjHZZhHiUY-:hover,
 .PMjHZZhHiUY-:focus {
-  background: rgb(241, 239, 233);
+  background: hsl(53, 21%, 93%);
   background: var(--color-surface--hover);
 }
 
 .PMjHZZhHiUY-:focus,
 .PMjHZZhHiUY-:active {
   box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),
-    0px 0px 0px calc(16px / 4) rgb(131, 151, 160);
+    0px 0px 0px calc(16px / 4) hsl(198, 12%, 57%);
   box-shadow: var(--shadow-focus);
   border: none;
   outline: none;
@@ -6318,7 +6318,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
     z-index: auto;
     width: 280px;
     width: var(--drawer-width);
-    border: calc(16px / 16) solid rgb(218, 224, 226);
+    border: calc(16px / 16) solid hsl(200, 13%, 87%);
     border: var(--border-base) solid var(--color-border);
     border-bottom-left-radius: 8px;
     border-bottom-left-radius: var(--radius-base);
@@ -6468,7 +6468,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
   height: calc(48px / 2);
   height: calc(var(--switch--width) / 2);
   padding: 0;
-  border: calc(16px / 8) solid rgb(218, 224, 226);
+  border: calc(16px / 8) solid hsl(200, 13%, 87%);
   border: var(--border-thick) solid var(--color-border);
   border-radius: 16px;
   border-radius: var(--switch--pipSize);
@@ -6485,21 +6485,21 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 
 .NaSI2jsLI0c-:focus-visible {
   box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),
-    0px 0px 0px calc(16px / 4) rgb(131, 151, 160);
+    0px 0px 0px calc(16px / 4) hsl(198, 12%, 57%);
   box-shadow: var(--shadow-focus);
   outline: none;
 }
 
 .NaSI2jsLI0c-:hover,
 .NaSI2jsLI0c-:focus-visible {
-  border-color: rgb(50, 130, 28);
+  border-color: hsl(107, 58%, 33%);
   border-color: var(--color-interactive);
 }
 
 .HbAoDMJhkwY- {
-  border-color: rgb(50, 130, 28);
+  border-color: hsl(107, 58%, 33%);
   border-color: var(--color-interactive);
-  background-color: rgb(50, 130, 28);
+  background-color: hsl(107, 58%, 33%);
   background-color: var(--color-interactive);
 }
 
@@ -6559,28 +6559,28 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
   border: none;
   border-radius: 100%;
   border-radius: var(--radius-circle);
-  background-color: rgb(1, 40, 55);
+  background-color: hsl(198, 35%, 21%);
   background-color: var(--color-interactive--subtle);
   transition: all 100ms ease-out;
   transition: all var(--timing-quick) ease-out;
 }
 
 .HbAoDMJhkwY- ._2hxova2FHpM- {
-  border-color: rgb(50, 130, 28);
+  border-color: hsl(107, 58%, 33%);
   border-color: var(--color-interactive);
   background-color: rgba(255, 255, 255, 1);
   background-color: var(--color-surface);
 }
 
 ._6hWvJHjyLlk- ._2hxova2FHpM- {
-  border-color: rgb(225, 225, 225);
+  border-color: hsl(0, 0%, 93%);
   border-color: var(--color-disabled--secondary);
-  background-color: rgb(181, 181, 181);
+  background-color: hsl(0, 0%, 72%);
   background-color: var(--color-disabled);
 }
 
 ._6hWvJHjyLlk- {
-  border-color: rgb(181, 181, 181);
+  border-color: hsl(0, 0%, 72%);
   border-color: var(--color-disabled);
   background-color: rgba(255, 255, 255, 1);
   background-color: var(--color-surface);
@@ -6588,7 +6588,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 }
 
 .HbAoDMJhkwY-._6hWvJHjyLlk- {
-  background-color: rgb(181, 181, 181);
+  background-color: hsl(0, 0%, 72%);
   background-color: var(--color-disabled);
 }
 
@@ -6598,7 +6598,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 }
 
 ._6hWvJHjyLlk-:hover {
-  border-color: rgb(181, 181, 181);
+  border-color: hsl(0, 0%, 72%);
   border-color: var(--color-disabled);
 }
 
@@ -6628,7 +6628,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
       align-items: center;
   padding-right: calc(16px / 2);
   padding-right: var(--space-small);
-  border: calc(16px / 16) solid rgb(218, 224, 226);
+  border: calc(16px / 16) solid hsl(200, 13%, 87%);
   border: var(--border-base) solid var(--file-card--border-color);
   border-radius: 8px;
   border-radius: var(--radius-base);
@@ -6674,7 +6674,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
   box-sizing: border-box;
   padding: 0;
   overflow: hidden;
-  background-color: rgb(241, 239, 233);
+  background-color: hsl(53, 21%, 93%);
   background-color: var(--color-surface--background);
   -ms-flex-negative: 0;
       flex-shrink: 0;
@@ -6690,13 +6690,13 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 
 .nSaog7-7Jn0- ._9jVt97W52JY-:focus {
   box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),
-    0px 0px 0px calc(16px / 4) rgb(131, 151, 160);
+    0px 0px 0px calc(16px / 4) hsl(198, 12%, 57%);
   box-shadow: var(--shadow-focus);
   outline: none;
 }
 
 .nSaog7-7Jn0- .il9-MCeoBts- {
-  border: calc(16px / 16) solid rgb(218, 224, 226);
+  border: calc(16px / 16) solid hsl(200, 13%, 87%);
   border: var(--border-base) solid var(--color-border);
   border-radius: 8px;
   border-radius: var(--radius-base);
@@ -6711,7 +6711,7 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
   width: 100%;
   height: 100%;
   box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),
-    0px 0px 0px calc(16px / 4) rgb(131, 151, 160);
+    0px 0px 0px calc(16px / 4) hsl(198, 12%, 57%);
   box-shadow: var(--shadow-focus);
 }
 
@@ -6895,7 +6895,7 @@ progress.S1cioqW7loo-[value]::-webkit-progress-bar {
 }
 
 progress.S1cioqW7loo-[value]::-webkit-progress-bar {
-  background-color: rgb(241, 239, 233);
+  background-color: hsl(53, 21%, 93%);
   background-color: var(--color-surface--background);
 }
 
@@ -6903,7 +6903,7 @@ progress.S1cioqW7loo-[value]::-webkit-progress-value {
   border-radius: calc((16px * 1) / 2);
   border-radius: calc(calc(16px * 1) / 2);
   border-radius: calc(var(--progress-bar--height) / 2);
-  background-color: rgb(50, 130, 28);
+  background-color: hsl(107, 58%, 33%);
   background-color: var(--color-interactive);
   -webkit-transition: all 300ms ease-out;
   transition: all 300ms ease-out;
@@ -6915,7 +6915,7 @@ progress.S1cioqW7loo-[value]::-moz-progress-bar {
   border-radius: calc((16px * 1) / 2);
   border-radius: calc(calc(16px * 1) / 2);
   border-radius: calc(var(--progress-bar--height) / 2);
-  background-color: rgb(50, 130, 28);
+  background-color: hsl(107, 58%, 33%);
   background-color: var(--color-interactive);
   -moz-transition: all 300ms ease-out;
   transition: all 300ms ease-out;
@@ -7031,11 +7031,11 @@ progress.nv5fejwjHzo-[value]::-webkit-progress-value {
   z-index: var(--elevation-base);
   padding: calc(16px / 2) calc(16px * 1);
   padding: var(--space-small) var(--space-base);
-  color: rgb(78, 105, 116);
+  color: hsl(197, 15%, 45%);
   color: var(--color-text--secondary);
   font-size: calc(16px * 1);
   font-size: var(--typography--fontSize-large);
-  background-color: rgb(241, 239, 233);
+  background-color: hsl(53, 21%, 93%);
   background-color: var(--color-surface--background);
   -ms-flex-pack: justify;
       justify-content: space-between;
@@ -7195,7 +7195,7 @@ progress.nv5fejwjHzo-[value]::-webkit-progress-value {
   left: 0;
   border-radius: 100%;
   border-radius: var(--radius-circle);
-  background-color: rgb(1, 25, 35);
+  background-color: hsl(198, 96%, 9%);
   background-color: var(--color-blue--dark);
   opacity: 0.3;
   mix-blend-mode: multiply;
@@ -7212,7 +7212,7 @@ progress.nv5fejwjHzo-[value]::-webkit-progress-value {
 
 .grljXfTWj84-:focus,
 .grljXfTWj84-:focus-within {
-  border-color: rgb(131, 151, 160);
+  border-color: hsl(198, 12%, 57%);
   border-color: var(--color-focus);
   outline: none;
 }
@@ -7220,7 +7220,7 @@ progress.nv5fejwjHzo-[value]::-webkit-progress-value {
 .WHhHWgaoXk4- {
   padding: calc(16px * 1);
   padding: var(--space-base);
-  border: rgb(218, 224, 226) dashed calc(16px / 8);
+  border: hsl(200, 13%, 87%) dashed calc(16px / 8);
   border: var(--color-border) dashed var(--border-thick);
   border-radius: calc(8px * 3);
   border-radius: var(--radius-larger);
@@ -7228,14 +7228,14 @@ progress.nv5fejwjHzo-[value]::-webkit-progress-value {
 }
 
 .WHhHWgaoXk4-.n1h-T2metRA- {
-  border-color: rgb(131, 151, 160);
+  border-color: hsl(198, 12%, 57%);
   border-color: var(--color-focus);
-  background-color: rgb(241, 239, 233);
+  background-color: hsl(53, 21%, 93%);
   background-color: var(--color-surface--hover);
 }
 
 .WHhHWgaoXk4-.MRRclAp51-w- {
-  border-color: rgb(199, 20, 0);
+  border-color: hsl(6, 64%, 51%);
   border-color: var(--color-critical);
 }
 
@@ -7315,7 +7315,7 @@ progress.nv5fejwjHzo-[value]::-webkit-progress-value {
   padding-bottom: var(--field--padding-bottom);
   padding-left: var(--field--padding-left);
   padding-right: var(--field--padding-right);
-  color: rgb(181, 181, 181);
+  color: hsl(0, 0%, 72%);
   color: var(--color-grey);
   font-family: inherit;
   font-size: inherit;
@@ -7335,7 +7335,7 @@ progress.nv5fejwjHzo-[value]::-webkit-progress-value {
 }
 
 .ig9l6LfEgwo-:not(:last-child) {
-  border-bottom: calc(16px / 16) solid rgb(218, 224, 226);
+  border-bottom: calc(16px / 16) solid hsl(200, 13%, 87%);
   border-bottom: var(--border-base) solid var(--color-border);
 }
 
@@ -7353,45 +7353,45 @@ progress.nv5fejwjHzo-[value]::-webkit-progress-value {
   top: 0;
   padding: calc(16px / 2) calc(16px * 1);
   padding: var(--space-small) var(--space-base);
-  border-bottom: 1px solid rgb(1, 40, 55);
+  border-bottom: 1px solid hsl(197, 90%, 12%);
   border-bottom: 1px solid var(--color-border--section);
   background-color: rgba(255, 255, 255, 1);
   background-color: var(--color-surface);
 }
 
 ._4LVpgNq-SLM- {
-  border-bottom-color: rgb(147, 161, 169);
+  border-bottom-color: hsl(198, 12%, 57%);
   border-bottom-color: var(--color-greyBlue--light);
-  color: rgb(147, 161, 169);
+  color: hsl(198, 12%, 57%);
   color: var(--color-greyBlue--light);
 }
 
 ._0QhWokyE9PY- {
-  border-bottom-color: rgb(50, 130, 28);
+  border-bottom-color: hsl(107, 58%, 33%);
   border-bottom-color: var(--color-green);
-  color: rgb(50, 130, 28);
+  color: hsl(107, 58%, 33%);
   color: var(--color-green);
 }
 
 .J8wB3qqOlBc-,
 .Ujqj17pKDIE- {
-  border-bottom-color: rgb(1, 40, 55);
+  border-bottom-color: hsl(197, 90%, 12%);
   border-bottom-color: var(--color-blue);
-  color: rgb(1, 40, 55);
+  color: hsl(197, 90%, 12%);
   color: var(--color-blue);
 }
 
 ._0lNxLGXhrfY- {
-  border-bottom-color: rgb(227, 142, 38);
+  border-bottom-color: hsl(33, 71%, 48%);
   border-bottom-color: var(--color-orange);
-  color: rgb(227, 142, 38);
+  color: hsl(33, 71%, 48%);
   color: var(--color-orange);
 }
 
 ._4qPymF0CAAE- {
-  border-bottom-color: rgb(199, 20, 0);
+  border-bottom-color: hsl(6, 64%, 51%);
   border-bottom-color: var(--color-red);
-  color: rgb(199, 20, 0);
+  color: hsl(6, 64%, 51%);
   color: var(--color-red);
 }
 
@@ -7434,7 +7434,7 @@ progress.nv5fejwjHzo-[value]::-webkit-progress-value {
 .RseHYbVm4MA-:hover,
 .RseHYbVm4MA-:focus {
   outline: none;
-  background-color: rgb(241, 239, 233);
+  background-color: hsl(53, 21%, 93%);
   background-color: var(--color-surface--hover);
 }
 
@@ -7467,13 +7467,13 @@ progress.nv5fejwjHzo-[value]::-webkit-progress-value {
 /* States */
 
 .C4DznaxLKiw- {
-  background-color: rgb(241, 239, 233);
+  background-color: hsl(53, 21%, 93%);
   background-color: var(--color-surface--background);
 }
 
 .C4DznaxLKiw-:hover,
 .C4DznaxLKiw-:focus {
-  background-color: rgb(231, 229, 217);
+  background-color: hsl(49, 7%, 70%);
   background-color: var(--color-surface--background--hover);
 }
 
@@ -7526,7 +7526,7 @@ progress.nv5fejwjHzo-[value]::-webkit-progress-value {
   padding-left: var(--field--padding-left);
   padding-right: calc(16px * 1);
   padding-right: var(--field--padding-right);
-  border: calc(16px / 16) solid rgb(218, 224, 226);
+  border: calc(16px / 16) solid hsl(200, 13%, 87%);
   border: var(--border-base) solid var(--color-border);
   border-radius: 8px;
   border-radius: var(--radius-base);
@@ -7547,7 +7547,7 @@ progress.nv5fejwjHzo-[value]::-webkit-progress-value {
 .EzNdHgwsT40-:focus,
 .EzNdHgwsT40-.bu7HWKRu6HI- {
   box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),
-    0px 0px 0px calc(16px / 4) rgb(131, 151, 160);
+    0px 0px 0px calc(16px / 4) hsl(198, 12%, 57%);
   box-shadow: var(--shadow-focus);
   outline: none;
 }
@@ -7580,7 +7580,7 @@ progress.nv5fejwjHzo-[value]::-webkit-progress-value {
   box-shadow: var(--shadow-base);
   margin: 0;
   padding: 0;
-  border: calc(16px / 16) solid rgb(218, 224, 226);
+  border: calc(16px / 16) solid hsl(200, 13%, 87%);
   border: var(--border-base) solid var(--color-border);
   border-radius: calc(8px * 2);
   border-radius: var(--radius-large);
@@ -7609,9 +7609,9 @@ progress.nv5fejwjHzo-[value]::-webkit-progress-value {
 
 .mFSgwOQZJm0-:focus,
 .mFSgwOQZJm0-.SepF4gvOxq8- {
-  background-color: rgb(241, 239, 233);
+  background-color: hsl(53, 21%, 93%);
   background-color: var(--color-surface--hover);
-  outline-color: rgb(131, 151, 160);
+  outline-color: hsl(198, 12%, 57%);
   outline-color: var(--color-focus);
 }
 
@@ -7775,7 +7775,7 @@ progress.nv5fejwjHzo-[value]::-webkit-progress-value {
       rgba(0, 0, 0, 0.1),
     0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);
   box-shadow: var(--shadow-base);
-  border: calc(16px / 16) solid rgb(218, 224, 226);
+  border: calc(16px / 16) solid hsl(200, 13%, 87%);
   border: var(--border-base) solid var(--color-border);
   border-radius: 8px;
   border-radius: var(--radius-base);
@@ -7808,7 +7808,7 @@ progress.nv5fejwjHzo-[value]::-webkit-progress-value {
 .LJCpn0zf1e8-::before {
   content: "";
   visibility: visible;
-  border: calc(16px / 16) solid rgb(218, 224, 226);
+  border: calc(16px / 16) solid hsl(200, 13%, 87%);
   border: var(--border-base) solid var(--color-border);
   -webkit-transform: rotate(45deg);
           transform: rotate(45deg);
@@ -7884,7 +7884,7 @@ progress.nv5fejwjHzo-[value]::-webkit-progress-value {
   box-sizing: border-box;
   margin-right: calc(16px / 2);
   margin-right: var(--space-small);
-  border: calc(16px / 8) solid rgb(218, 224, 226);
+  border: calc(16px / 8) solid hsl(200, 13%, 87%);
   border: var(--border-thick) solid var(--color-border);
   border-radius: 100%;
   background-color: rgba(255, 255, 255, 1);
@@ -7896,12 +7896,12 @@ progress.nv5fejwjHzo-[value]::-webkit-progress-value {
 }
 
 ._08ZPdlE98Ko-:hover + .-PUoLXltVlQ-::before {
-  border-color: rgb(50, 130, 28);
+  border-color: hsl(107, 58%, 33%);
   border-color: var(--color-interactive);
 }
 
 ._08ZPdlE98Ko-:checked + .-PUoLXltVlQ-::before {
-  border-color: rgb(50, 130, 28);
+  border-color: hsl(107, 58%, 33%);
   border-color: var(--color-interactive);
   border-width: var(--radio--checked-thickness);
   background-color: rgba(255, 255, 255, 1);
@@ -7910,25 +7910,25 @@ progress.nv5fejwjHzo-[value]::-webkit-progress-value {
 
 ._08ZPdlE98Ko-:focus-visible:checked + .-PUoLXltVlQ-:before {
   box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),
-    0px 0px 0px calc(16px / 4) rgb(131, 151, 160);
+    0px 0px 0px calc(16px / 4) hsl(198, 12%, 57%);
   box-shadow: var(--shadow-focus);
 }
 
 ._08ZPdlE98Ko-[disabled] + .-PUoLXltVlQ- {
-  color: rgb(181, 181, 181);
+  color: hsl(0, 0%, 72%);
   color: var(--color-disabled);
   cursor: not-allowed;
 }
 
 ._08ZPdlE98Ko-[disabled] + .-PUoLXltVlQ-::before {
-  border-color: rgb(225, 225, 225);
+  border-color: hsl(0, 0%, 93%);
   border-color: var(--color-disabled--secondary);
 }
 
 ._08ZPdlE98Ko-[disabled]:checked + .-PUoLXltVlQ-::before {
   --radio--checked-shadow: 0px 0px 0px var(--space-minuscule)
     var(--color-disabled);
-  border-color: rgb(181, 181, 181);
+  border-color: hsl(0, 0%, 72%);
   border-color: var(--color-disabled);
 }
 
@@ -7945,7 +7945,7 @@ progress.nv5fejwjHzo-[value]::-webkit-progress-value {
 }
 
 ._08ZPdlE98Ko-[disabled] + .-PUoLXltVlQ- + ._8r6qT-6S9EI- > p {
-  color: rgb(181, 181, 181);
+  color: hsl(0, 0%, 72%);
   color: var(--color-disabled);
 }
 
@@ -7954,7 +7954,7 @@ progress.nv5fejwjHzo-[value]::-webkit-progress-value {
   width: 100%;
   padding: calc(16px / 4);
   padding: var(--space-smaller);
-  border: calc(16px / 16) solid rgb(218, 224, 226);
+  border: calc(16px / 16) solid hsl(200, 13%, 87%);
   border: var(--border-base) solid var(--color-border);
   border-radius: calc(8px * 2);
   border-radius: var(--radius-large);
@@ -8025,29 +8025,29 @@ progress.nv5fejwjHzo-[value]::-webkit-progress-value {
 }
 
 .VPZ0Os9TY5k-:hover {
-  background: rgb(241, 239, 233);
+  background: hsl(53, 21%, 93%);
   background: var(--color-surface--hover);
 }
 
 .PtlN3SI-Atc-:focus + .VPZ0Os9TY5k- {
   box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),
-    0px 0px 0px calc(16px / 4) rgb(131, 151, 160);
+    0px 0px 0px calc(16px / 4) hsl(198, 12%, 57%);
   box-shadow: var(--shadow-focus);
-  background: rgb(241, 239, 233);
+  background: hsl(53, 21%, 93%);
   background: var(--color-surface--hover);
 }
 
 .PtlN3SI-Atc-:checked + .VPZ0Os9TY5k- {
   color: rgba(255, 255, 255, 1);
   color: var(--color-text--reverse);
-  background: rgb(50, 130, 28);
+  background: hsl(107, 58%, 33%);
   background: var(--color-interactive);
 }
 
 .PtlN3SI-Atc-:disabled + .VPZ0Os9TY5k- {
-  color: rgb(181, 181, 181);
+  color: hsl(0, 0%, 72%);
   color: var(--color-disabled);
-  background: rgb(241, 239, 233);
+  background: hsl(53, 21%, 93%);
   background: var(--color-surface--background);
   cursor: default;
 }
@@ -8057,19 +8057,19 @@ progress.nv5fejwjHzo-[value]::-webkit-progress-value {
 }
 
 .PtlN3SI-Atc-:checked:focus + .VPZ0Os9TY5k- {
-  background: rgb(14, 78, 26);
+  background: hsl(107, 65%, 24%);
   background: var(--color-interactive--hover);
 }
 
 .PtlN3SI-Atc-:checked + .VPZ0Os9TY5k-:hover {
-  background: rgb(14, 78, 26);
+  background: hsl(107, 65%, 24%);
   background: var(--color-interactive--hover);
 }
 
 .PtlN3SI-Atc-:disabled:checked + .VPZ0Os9TY5k- {
-  color: rgb(225, 225, 225);
+  color: hsl(0, 0%, 93%);
   color: var(--color-disabled--secondary);
-  background: rgb(181, 181, 181);
+  background: hsl(0, 0%, 72%);
   background: var(--color-disabled);
 }
 
@@ -8129,7 +8129,7 @@ progress.nv5fejwjHzo-[value]::-webkit-progress-value {
   width: 100%;
   padding: calc(16px / 4);
   padding: var(--space-smaller);
-  border: calc(16px / 16) solid rgb(218, 224, 226);
+  border: calc(16px / 16) solid hsl(200, 13%, 87%);
   border: var(--border-base) solid var(--color-border);
   border-radius: calc(8px * 2);
   border-radius: var(--radius-large);
@@ -8197,7 +8197,7 @@ progress.nv5fejwjHzo-[value]::-webkit-progress-value {
   height: 8px;
   height: var(--statusLabel-icon-diameter);
   border-radius: 50%;
-  background-color: rgb(50, 130, 28);
+  background-color: hsl(107, 58%, 33%);
   background-color: var(--color-success);
   -ms-flex-negative: 0;
       flex-shrink: 0;
@@ -8240,7 +8240,7 @@ progress.nv5fejwjHzo-[value]::-webkit-progress-value {
   -ms-flex-wrap: nowrap;
       flex-wrap: nowrap;
   gap: 0.375rem;
-  background-color: rgb(241, 247, 238);
+  background-color: hsl(109, 28%, 92%);
   background-color: var(--labelBackgroundColor);
 }
 
@@ -8345,7 +8345,7 @@ progress.nv5fejwjHzo-[value]::-webkit-progress-value {
 
 .qI4lWMSNH40- {
   position: relative;
-  border-bottom: solid calc(16px / 16) rgb(218, 224, 226);
+  border-bottom: solid calc(16px / 16) hsl(200, 13%, 87%);
   border-bottom: solid var(--border-base) var(--color-border);
 }
 
@@ -8403,7 +8403,7 @@ ul.wdW31G8Trag- {
   padding-left: var(--public-tab--inset);
   padding-right: calc(16px * 1);
   padding-right: var(--public-tab--inset);
-  border: solid calc(16px / 16) rgb(218, 224, 226);
+  border: solid calc(16px / 16) hsl(200, 13%, 87%);
   border: solid var(--border-base) var(--color-border);
   border-left-width: 0;
   outline: none;
@@ -8416,18 +8416,18 @@ ul.wdW31G8Trag- {
 
 .MO7CXQ8xJXo-:hover,
 .MO7CXQ8xJXo-:focus {
-  background-color: rgb(241, 239, 233);
+  background-color: hsl(53, 21%, 93%);
   background-color: var(--color-surface--hover);
 }
 
 .MO7CXQ8xJXo-:focus span {
   box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),
-    0px 0px 0px calc(16px / 4) rgb(131, 151, 160);
+    0px 0px 0px calc(16px / 4) hsl(198, 12%, 57%);
   box-shadow: var(--shadow-focus);
 }
 
 .kqof65gyv7g- {
-  border-top-color: rgb(50, 130, 28);
+  border-top-color: hsl(107, 58%, 33%);
   border-top-color: var(--color-interactive);
   border-bottom-color: rgba(255, 255, 255, 1);
   border-bottom-color: var(--color-surface);