diff --git a/src/components/Avatar/Avatar.stories.tsx b/src/components/Avatar/Avatar.stories.tsx
index d79c66daa..ea9eebd2f 100644
--- a/src/components/Avatar/Avatar.stories.tsx
+++ b/src/components/Avatar/Avatar.stories.tsx
@@ -102,17 +102,15 @@ const Avatar_StatusItem_Story: ComponentStory<typeof Avatar> = (args) => {
       hashingFunction: () => 0,
       size: '32px',
       outline: {
-        // outlineColor: 'var(--green-color-60)',
         outlineOffset: '1px',
-        // outlineStyle: 'solid',
         outlineWidth: '2px',
       },
       statusItems: {
         [StatusItemsPosition.Bottom]: {
           ...statusItemProps,
           ariaLabel: 'Clock icon',
-          backgroundColor: 'var(--green-color-20)',
-          color: 'var(--green-color-70)',
+          backgroundColor: 'var(--green-background2-color)',
+          color: 'var(--green-secondary-color)',
           wrapperStyle: { padding: '2px' },
           path: IconName.mdiHome,
           size: '6px',
@@ -120,8 +118,8 @@ const Avatar_StatusItem_Story: ComponentStory<typeof Avatar> = (args) => {
         [StatusItemsPosition.TopRight]: {
           ...statusItemProps,
           ariaLabel: 'Pencil icon',
-          backgroundColor: 'var(--green-color-20)',
-          color: 'var(--green-color-70)',
+          backgroundColor: 'var(--green-background2-color)',
+          color: 'var(--green-secondary-color)',
           wrapperStyle: { padding: '2px' },
           path: IconName.mdiPencil,
           size: '6px',
@@ -134,7 +132,7 @@ const Avatar_StatusItem_Story: ComponentStory<typeof Avatar> = (args) => {
       fontSize: '48px',
       hashingFunction: () => 0,
       outline: {
-        outlineColor: 'var(--blue-color-60)',
+        outlineColor: 'var(--blue-tertiary-color)',
         outlineOffset: '2px',
         outlineStyle: 'solid',
         outlineWidth: '4px',
@@ -143,11 +141,11 @@ const Avatar_StatusItem_Story: ComponentStory<typeof Avatar> = (args) => {
         [StatusItemsPosition.TopRight]: {
           ...statusItemProps,
           ariaLabel: 'Pencil icon',
-          backgroundColor: 'var(--red-color-20)',
-          color: 'var(--red-color-70)',
+          backgroundColor: 'var(--red-background2-color)',
+          color: 'var(--red-secondary-color)',
           onClick: () => alert('Clicked pencil icon'),
           outline: {
-            outlineColor: 'var(--red-color-60)',
+            outlineColor: 'var(--red-tertiary-color)',
             outlineOffset: '0px',
             outlineStyle: 'solid',
             outlineWidth: '2px',
@@ -156,8 +154,8 @@ const Avatar_StatusItem_Story: ComponentStory<typeof Avatar> = (args) => {
         [StatusItemsPosition.Bottom]: {
           ...statusItemProps,
           ariaLabel: 'Clock icon',
-          backgroundColor: 'var(--grey-color-10)',
-          color: 'var(--grey-color-70)',
+          backgroundColor: 'var(--grey-background1-color)',
+          color: 'var(--grey-secondary-color)',
           onClick: () => alert('Clicked clock icon'),
           outline: {},
           path: IconName.mdiClock,
@@ -193,28 +191,28 @@ const Avatar_StatusItem_Story: ComponentStory<typeof Avatar> = (args) => {
         [StatusItemsPosition.Left]: {
           ...statusItemProps,
           ariaLabel: 'Magnify icon',
-          backgroundColor: 'var(--blue-color-20)',
+          backgroundColor: 'var(--blue-background2-color)',
           onClick: () => alert('Clicked magnify icon'),
           path: IconName.mdiMagnify,
         },
         [StatusItemsPosition.TopLeft]: {
           ...statusItemProps,
           ariaLabel: 'Clock icon',
-          backgroundColor: 'var(--red-color-30)',
+          backgroundColor: 'var(--red-background3-color)',
           onClick: () => alert('Clicked clock icon'),
           path: IconName.mdiClock,
           text: '3000',
         },
         [StatusItemsPosition.Top]: {
           ...statusItemProps,
-          backgroundColor: 'var(--red-color-30)',
+          backgroundColor: 'var(--red-background3-color)',
           path: IconName.mdiBell,
           text: '4',
           textMaxLength: 2,
         },
         [StatusItemsPosition.Right]: {
           ...statusItemProps,
-          backgroundColor: 'var(--blue-color-20)',
+          backgroundColor: 'var(--blue-background2-color)',
           path: IconName.mdiCalendar,
           text: '20',
           alignIcon: StatusItemIconAlign.Left,
@@ -267,7 +265,7 @@ Avatar_Icon.args = {
     path: IconName.mdiBell,
   },
   style: {
-    backgroundColor: 'var(--accent-color-20)',
+    backgroundColor: 'var(--accent-background2-color)',
   },
 };
 
@@ -284,7 +282,7 @@ Avatar_Round_Icon.args = {
     path: IconName.mdiBell,
   },
   style: {
-    backgroundColor: 'var(--accent-color-20)',
+    backgroundColor: 'var(--accent-background2-color)',
   },
   type: 'round',
 };
diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
index e5758efb4..b5e524679 100644
--- a/src/components/Avatar/Avatar.tsx
+++ b/src/components/Avatar/Avatar.tsx
@@ -47,14 +47,14 @@ const MinStatusItemFontSize: number = 12;
 const StatusItemFontDiff: string = '2px';
 
 const StatusItemOutlineDefaults: React.CSSProperties = {
-  outlineColor: 'var(--grey-color-80)',
+  outlineColor: 'var(--grey-color)',
   outlineOffset: '0px',
   outlineStyle: 'solid',
   outlineWidth: '2px',
 };
 
 const AvatarOutlineDefaults: React.CSSProperties = {
-  outlineColor: 'var(--green-color-60)',
+  outlineColor: 'var(--green-tertiary-color)',
   outlineOffset: '2px',
   outlineStyle: 'solid',
   outlineWidth: '4px',
diff --git a/src/components/Avatar/Avatar.types.ts b/src/components/Avatar/Avatar.types.ts
index a2c8ff446..3516b63cd 100644
--- a/src/components/Avatar/Avatar.types.ts
+++ b/src/components/Avatar/Avatar.types.ts
@@ -64,7 +64,7 @@ export interface StatusItemsProps extends IconProps {
   /**
    * Status item outline
    *
-   * Defaults when `outline` is truthy are `{ outlineColor: 'var(--grey-color-80)', outlineOffset: '0px', outlineStyle: 'solid', outlineWidth: '2px' }`
+   * Defaults when `outline` is truthy are `{ outlineColor: 'var(--grey-color)', outlineOffset: '0px', outlineStyle: 'solid', outlineWidth: '2px' }`
    */
   outline?: AvatarOutlineProps;
   /**
@@ -124,7 +124,7 @@ export interface BaseAvatarProps extends OcBaseProps<HTMLDivElement> {
   /**
    * Avatar outline
    *
-   * Defaults when `outline` is truthy are `{ outlineColor: 'var(--green-color-60)', outlineOffset: '2px', outlineStyle: 'solid', outlineWidth: '4px' }`
+   * Defaults when `outline` is truthy are `{ outlineColor: 'var(--green-tertiary-color)', outlineOffset: '2px', outlineStyle: 'solid', outlineWidth: '4px' }`
    */
   outline?: AvatarOutlineProps;
   /**
diff --git a/src/components/Avatar/Styles/group.scss b/src/components/Avatar/Styles/group.scss
index b1cc9c838..bb86f9e15 100644
--- a/src/components/Avatar/Styles/group.scss
+++ b/src/components/Avatar/Styles/group.scss
@@ -40,7 +40,7 @@
   }
 
   &-max-count {
-    background-color: var(--grey-color-20);
+    background-color: var(--grey-background2-color);
     color: var(--text-secondary-color);
   }
 }
diff --git a/src/components/Avatar/avatar.module.scss b/src/components/Avatar/avatar.module.scss
index c19323789..2cf58dde5 100644
--- a/src/components/Avatar/avatar.module.scss
+++ b/src/components/Avatar/avatar.module.scss
@@ -11,51 +11,51 @@
   justify-content: center;
 
   &.red {
-    background-color: var(--red-color-60);
+    background-color: var(--red-tertiary-color);
   }
 
   &.orange {
-    background-color: var(--orange-color-60);
+    background-color: var(--orange-tertiary-color);
   }
 
   &.red-orange {
-    background-color: var(--redorange-color-60);
+    background-color: var(--redorange-tertiary-color);
   }
 
   &.yellow {
-    background-color: var(--yellow-color-60);
+    background-color: var(--yellow-tertiary-color);
   }
 
   &.yellow-green {
-    background-color: var(--yellowgreen-color-60);
+    background-color: var(--yellowgreen-tertiary-color);
   }
 
   &.green {
-    background-color: var(--green-color-60);
+    background-color: var(--green-tertiary-color);
   }
 
   &.blue-green {
-    background-color: var(--bluegreen-color-60);
+    background-color: var(--bluegreen-tertiary-color);
   }
 
   &.blue {
-    background-color: var(--blue-color-60);
+    background-color: var(--blue-tertiary-color);
   }
 
   &.blue-violet {
-    background-color: var(--blueviolet-color-60);
+    background-color: var(--blueviolet-tertiary-color);
   }
 
   &.violet {
-    background-color: var(--violet-color-60);
+    background-color: var(--violet-tertiary-color);
   }
 
   &.violet-red {
-    background-color: var(--violetred-color-60);
+    background-color: var(--violetred-tertiary-color);
   }
 
   &.grey {
-    background-color: var(--grey-color-60);
+    background-color: var(--grey-tertiary-color);
   }
 }
 
diff --git a/src/components/Button/button.module.scss b/src/components/Button/button.module.scss
index 6de673321..e6f984fbc 100644
--- a/src/components/Button/button.module.scss
+++ b/src/components/Button/button.module.scss
@@ -242,7 +242,7 @@
       &:after {
         animation: $motion-duration-fast $motion-easing-easeinout 1
           nudgeRingMedium;
-        border: $space-xxs solid var(--primary-color-20);
+        border: $space-xxs solid var(--primary-background2-color);
         border-radius: 100%;
         content: '';
         height: 14px;
@@ -484,11 +484,11 @@
 }
 
 .button-primary {
-  --button-counter-default-background-color: var(--accent-color-10);
-  --button-counter-hover-background-color: var(--accent-color-20);
-  --button-counter-checked-background-color: var(--accent-color-10);
-  --button-counter-focus-background-color: var(--accent-color-10);
-  --button-counter-active-background-color: var(--accent-color-10);
+  --button-counter-default-background-color: var(--accent-background1-color);
+  --button-counter-hover-background-color: var(--accent-background2-color);
+  --button-counter-checked-background-color: var(--accent-background1-color);
+  --button-counter-focus-background-color: var(--accent-background1-color);
+  --button-counter-active-background-color: var(--accent-background1-color);
 
   color: var(--button-primary-text-color);
   background-color: var(--button-primary-background-color);
@@ -528,11 +528,11 @@
 }
 
 .button-secondary {
-  --button-counter-default-background-color: var(--primary-color-20);
-  --button-counter-hover-background-color: var(--primary-color-20);
-  --button-counter-checked-background-color: var(--primary-color-10);
-  --button-counter-focus-background-color: var(--primary-color-20);
-  --button-counter-active-background-color: var(--primary-color-10);
+  --button-counter-default-background-color: var(--primary-background2-color);
+  --button-counter-hover-background-color: var(--primary-background2-color);
+  --button-counter-checked-background-color: var(--primary-background1-color);
+  --button-counter-focus-background-color: var(--primary-background2-color);
+  --button-counter-active-background-color: var(--primary-background1-color);
 
   color: var(--button-secondary-text-color);
   background-color: var(--button-secondary-background-color);
@@ -606,12 +606,16 @@
 }
 
 .button-primary-disruptive {
-  --button-counter-default-background-color: var(--disruptive-color-10);
-  --button-counter-hover-background-color: var(--disruptive-color-20);
-  --button-counter-checked-background-color: var(--disruptive-color-10);
-  --button-counter-focus-background-color: var(--disruptive-color-10);
-  --button-counter-active-background-color: var(--disruptive-color-10);
-  --button-counter-default-text-color: var(--disruptive-color-80);
+  --button-counter-default-background-color: var(
+    --disruptive-background1-color
+  );
+  --button-counter-hover-background-color: var(--disruptive-background2-color);
+  --button-counter-checked-background-color: var(
+    --disruptive-background1-color
+  );
+  --button-counter-focus-background-color: var(--disruptive-background1-color);
+  --button-counter-active-background-color: var(--disruptive-background1-color);
+  --button-counter-default-text-color: var(--disruptive-color);
 
   color: var(--button-primary-disruptive-text-color);
   background-color: var(--button-primary-disruptive-background-color);
@@ -637,12 +641,16 @@
 }
 
 .button-secondary-disruptive {
-  --button-counter-default-background-color: var(--disruptive-color-20);
-  --button-counter-hover-background-color: var(--disruptive-color-20);
-  --button-counter-checked-background-color: var(--disruptive-color-10);
-  --button-counter-focus-background-color: var(--disruptive-color-20);
-  --button-counter-active-background-color: var(--disruptive-color-10);
-  --button-counter-default-text-color: var(--disruptive-color-80);
+  --button-counter-default-background-color: var(
+    --disruptive-background2-color
+  );
+  --button-counter-hover-background-color: var(--disruptive-background2-color);
+  --button-counter-checked-background-color: var(
+    --disruptive-background1-color
+  );
+  --button-counter-focus-background-color: var(--disruptive-background2-color);
+  --button-counter-active-background-color: var(--disruptive-background1-color);
+  --button-counter-default-text-color: var(--disruptive-color);
 
   color: var(--button-secondary-disruptive-text-color);
   background-color: var(--button-secondary-disruptive-background-color);
@@ -670,11 +678,11 @@
 }
 
 .button-default {
-  --button-counter-default-background-color: var(--primary-color-20);
-  --button-counter-hover-background-color: var(--primary-color-20);
-  --button-counter-checked-background-color: var(--primary-color-10);
-  --button-counter-focus-background-color: var(--primary-color-20);
-  --button-counter-active-background-color: var(--primary-color-10);
+  --button-counter-default-background-color: var(--primary-background2-color);
+  --button-counter-hover-background-color: var(--primary-background2-color);
+  --button-counter-checked-background-color: var(--primary-background1-color);
+  --button-counter-focus-background-color: var(--primary-background2-color);
+  --button-counter-active-background-color: var(--primary-background1-color);
 
   color: var(--button-default-text-color);
   background-color: var(--button-default-background-color);
@@ -714,12 +722,16 @@
 }
 
 .button-disruptive {
-  --button-counter-default-background-color: var(--disruptive-color-20);
-  --button-counter-hover-background-color: var(--disruptive-color-20);
-  --button-counter-checked-background-color: var(--disruptive-color-10);
-  --button-counter-focus-background-color: var(--disruptive-color-20);
-  --button-counter-active-background-color: var(--disruptive-color-10);
-  --button-counter-default-text-color: var(--disruptive-color-80);
+  --button-counter-default-background-color: var(
+    --disruptive-background2-color
+  );
+  --button-counter-hover-background-color: var(--disruptive-background2-color);
+  --button-counter-checked-background-color: var(
+    --disruptive-background1-color
+  );
+  --button-counter-focus-background-color: var(--disruptive-background2-color);
+  --button-counter-active-background-color: var(--disruptive-background1-color);
+  --button-counter-default-text-color: var(--disruptive-color);
 
   color: var(--button-default-disruptive-text-color);
   background-color: var(--button-default-disruptive-background-color);
@@ -1289,15 +1301,15 @@
     &.button-secondary-disruptive {
       &.focus-visible,
       &:focus-visible {
-        color: var(--disruptive-color-80);
+        color: var(--disruptive-color);
       }
     }
 
     &.button-disruptive {
       &.focus-visible,
       &:focus-visible {
-        background-color: var(--disruptive-color-10);
-        color: var(--disruptive-color-80);
+        background-color: var(--disruptive-background1-color);
+        color: var(--disruptive-color);
       }
     }
 
diff --git a/src/components/Carousel/Carousel.stories.tsx b/src/components/Carousel/Carousel.stories.tsx
index d22b0f4ea..187498471 100644
--- a/src/components/Carousel/Carousel.stories.tsx
+++ b/src/components/Carousel/Carousel.stories.tsx
@@ -41,7 +41,7 @@ const Slide_Story: ComponentStory<typeof Carousel> = (args) => (
     <Slide>
       <div
         style={{
-          background: 'var(--grey-color-20)',
+          background: 'var(--grey-background2-color)',
           height: 400,
           width: '100%',
         }}
@@ -50,7 +50,7 @@ const Slide_Story: ComponentStory<typeof Carousel> = (args) => (
     <Slide>
       <div
         style={{
-          background: 'var(--green-color-20)',
+          background: 'var(--green-background2-color)',
           height: 400,
           width: '100%',
         }}
@@ -59,7 +59,7 @@ const Slide_Story: ComponentStory<typeof Carousel> = (args) => (
     <Slide>
       <div
         style={{
-          background: 'var(--violet-color-20)',
+          background: 'var(--violet-background2-color)',
           height: 400,
           width: '100%',
         }}
@@ -68,7 +68,7 @@ const Slide_Story: ComponentStory<typeof Carousel> = (args) => (
     <Slide>
       <div
         style={{
-          background: 'var(--blue-color-20)',
+          background: 'var(--blue-background2-color)',
           height: 400,
           width: '100%',
         }}
@@ -126,7 +126,7 @@ Scroller.args = {
         key={item.key}
         style={{
           alignItems: 'center',
-          background: 'var(--grey-color-20)',
+          background: 'var(--grey-background2-color)',
           boxShadow:
             '0px 1px 2px rgba(15, 20, 31, 0.12), 0px 2px 8px rgba(15, 20, 31, 0.16)',
           display: 'flex',
@@ -154,7 +154,7 @@ Scroller_Single.args = {
         key={item.key}
         style={{
           alignItems: 'center',
-          background: 'var(--grey-color-20)',
+          background: 'var(--grey-background2-color)',
           boxShadow:
             '0px 1px 2px rgba(15, 20, 31, 0.12), 0px 2px 8px rgba(15, 20, 31, 0.16)',
           display: 'flex',
diff --git a/src/components/CheckBox/checkbox.module.scss b/src/components/CheckBox/checkbox.module.scss
index 0d34959ae..11899f8e8 100644
--- a/src/components/CheckBox/checkbox.module.scss
+++ b/src/components/CheckBox/checkbox.module.scss
@@ -37,7 +37,7 @@
       }
 
       .checkmark {
-        border: $space-xxxs solid var(--grey-color-70);
+        border: $space-xxxs solid var(--grey-secondary-color);
         border-radius: $border-radius-xs;
         height: $checkmark-medium-height;
         width: $checkmark-medium-width;
@@ -66,7 +66,7 @@
         }
 
         &.toggle {
-          border: $space-xxxs solid var(--grey-color-70);
+          border: $space-xxxs solid var(--grey-secondary-color);
           border-radius: $toggle-medium-height;
           min-height: $toggle-medium-height;
           height: $toggle-medium-height;
@@ -79,8 +79,8 @@
           width: $toggle-medium-width;
 
           &:after {
-            background-color: var(--grey-color-70);
-            border: solid var(--grey-color-70);
+            background-color: var(--grey-secondary-color);
+            border: solid var(--grey-secondary-color);
             border-radius: 50%;
             border-width: $space-xxxs;
             content: '';
@@ -101,16 +101,16 @@
 
     &:not(.disabled):not([disabled]):active + label {
       .checkmark {
-        border: $space-xxxs solid var(--primary-color-70);
-        background-color: var(--accent-color-30);
+        border: $space-xxxs solid var(--primary-secondary-color);
+        background-color: var(--accent-background3-color);
 
         &.toggle {
-          border: $space-xxxs solid var(--primary-color-70);
-          background-color: var(--accent-color-30);
+          border: $space-xxxs solid var(--primary-secondary-color);
+          background-color: var(--accent-background3-color);
 
           &:after {
-            background-color: var(--primary-color-70);
-            border-color: var(--primary-color-70);
+            background-color: var(--primary-secondary-color);
+            border-color: var(--primary-secondary-color);
           }
         }
       }
@@ -118,16 +118,16 @@
 
     &:not(.disabled):not([disabled]):hover + label {
       .checkmark {
-        border: $space-xxxs solid var(--primary-color-70);
-        background-color: var(--accent-color-10);
+        border: $space-xxxs solid var(--primary-secondary-color);
+        background-color: var(--accent-background1-color);
 
         &.toggle {
-          border: $space-xxxs solid var(--primary-color-70);
-          background-color: var(--accent-color-10);
+          border: $space-xxxs solid var(--primary-secondary-color);
+          background-color: var(--accent-background1-color);
 
           &:after {
-            background-color: var(--primary-color-70);
-            border-color: var(--primary-color-70);
+            background-color: var(--primary-secondary-color);
+            border-color: var(--primary-secondary-color);
           }
         }
       }
@@ -144,23 +144,23 @@
         $motion-delay-s;
 
       .checkmark {
-        background-color: var(--accent-color-30);
-        border: $space-xxxs solid var(--primary-color-70);
+        background-color: var(--accent-background3-color);
+        border: $space-xxxs solid var(--primary-secondary-color);
 
         &.toggle {
-          background-color: var(--accent-color-30);
-          border: $space-xxxs solid var(--primary-color-70);
+          background-color: var(--accent-background3-color);
+          border: $space-xxxs solid var(--primary-secondary-color);
 
           &:after {
-            background-color: var(--primary-color-70);
-            border-color: var(--primary-color-70);
+            background-color: var(--primary-secondary-color);
+            border-color: var(--primary-secondary-color);
           }
         }
       }
 
       .checkmark {
         &:after {
-          border-color: var(--primary-color-70);
+          border-color: var(--primary-secondary-color);
           opacity: 1;
           transform: rotate(45deg) scale(0.7);
           transition: all $motion-duration-extra-fast $motion-ease-out-back
@@ -169,8 +169,8 @@
 
         &.toggle {
           &:after {
-            background-color: var(--primary-color-70);
-            border-color: var(--primary-color-70);
+            background-color: var(--primary-secondary-color);
+            border-color: var(--primary-secondary-color);
             left: $toggle-medium-after-left-checked;
             opacity: 1;
             transform: none;
@@ -184,17 +184,17 @@
     &:not(.disabled):not([disabled]):active + label {
       .checkmark {
         transform: scale(0.98);
-        background-color: var(--accent-color-10);
-        border: $space-xxxs solid var(--primary-color-70);
+        background-color: var(--accent-background1-color);
+        border: $space-xxxs solid var(--primary-secondary-color);
 
         &.toggle {
           transform: scale(0.98);
-          background-color: var(--accent-color-10);
-          border: $space-xxxs solid var(--primary-color-70);
+          background-color: var(--accent-background1-color);
+          border: $space-xxxs solid var(--primary-secondary-color);
 
           &:after {
-            background-color: var(--primary-color-70);
-            border-color: var(--primary-color-70);
+            background-color: var(--primary-secondary-color);
+            border-color: var(--primary-secondary-color);
           }
         }
       }
@@ -202,16 +202,16 @@
 
     &:not(.disabled):not([disabled]):hover + label {
       .checkmark {
-        background-color: var(--accent-color-20);
-        border: $space-xxxs solid var(--primary-color-70);
+        background-color: var(--accent-background2-color);
+        border: $space-xxxs solid var(--primary-secondary-color);
 
         &.toggle {
-          background-color: var(--accent-color-20);
-          border: $space-xxxs solid var(--primary-color-70);
+          background-color: var(--accent-background2-color);
+          border: $space-xxxs solid var(--primary-secondary-color);
 
           &:after {
-            background-color: var(--primary-color-70);
-            border-color: var(--primary-color-70);
+            background-color: var(--primary-secondary-color);
+            border-color: var(--primary-secondary-color);
           }
         }
       }
@@ -550,15 +550,15 @@
       &:focus-visible + label {
         .checkmark {
           outline: none;
-          border: $space-xxxs solid var(--grey-color-70);
+          border: $space-xxxs solid var(--grey-secondary-color);
 
           &.toggle {
             outline: none;
-            border: $space-xxxs solid var(--grey-color-70);
+            border: $space-xxxs solid var(--grey-secondary-color);
 
             &:after {
-              background-color: var(--primary-color-70);
-              border-color: var(--primary-color-70);
+              background-color: var(--primary-secondary-color);
+              border-color: var(--primary-secondary-color);
             }
           }
         }
@@ -584,15 +584,15 @@
         &:focus-visible + label {
           .checkmark {
             outline: none;
-            border: $space-xxxs solid var(--grey-color-70);
+            border: $space-xxxs solid var(--grey-secondary-color);
 
             &.toggle {
               outline: none;
-              border: $space-xxxs solid var(--grey-color-70);
+              border: $space-xxxs solid var(--grey-secondary-color);
 
               &:after {
-                background-color: var(--primary-color-70);
-                border-color: var(--primary-color-70);
+                background-color: var(--primary-secondary-color);
+                border-color: var(--primary-secondary-color);
               }
             }
           }
diff --git a/src/components/ConfigProvider/ConfigProvider.stories.tsx b/src/components/ConfigProvider/ConfigProvider.stories.tsx
index 32699bb10..3ea569237 100644
--- a/src/components/ConfigProvider/ConfigProvider.stories.tsx
+++ b/src/components/ConfigProvider/ConfigProvider.stories.tsx
@@ -198,7 +198,7 @@ const ThemedComponents: FC = () => {
           style={{
             textTransform: 'capitalize',
             marginLeft: '4px',
-            color: 'var(--accent-color-30)',
+            color: 'var(--accent-background3-color)',
           }}
         >
           | Accent
diff --git a/src/components/DateTimePicker/DatePicker/Generate/generateRangePicker.tsx b/src/components/DateTimePicker/DatePicker/Generate/generateRangePicker.tsx
index a1de2969e..2a8fa96b3 100644
--- a/src/components/DateTimePicker/DatePicker/Generate/generateRangePicker.tsx
+++ b/src/components/DateTimePicker/DatePicker/Generate/generateRangePicker.tsx
@@ -162,7 +162,7 @@ export default function generateRangePicker<DateType>(
     ]);
 
     const iconColor = (): string => {
-      let color: string = 'var(--grey-color-60)';
+      let color: string = 'var(--grey-tertiary-color)';
       if (mergedStatus === 'error') {
         color = 'var(--error-color)';
       } else if (mergedStatus === 'warning') {
diff --git a/src/components/DateTimePicker/DatePicker/Generate/generateSinglePicker.tsx b/src/components/DateTimePicker/DatePicker/Generate/generateSinglePicker.tsx
index 0f1f65f89..8021547bf 100644
--- a/src/components/DateTimePicker/DatePicker/Generate/generateSinglePicker.tsx
+++ b/src/components/DateTimePicker/DatePicker/Generate/generateSinglePicker.tsx
@@ -202,7 +202,7 @@ export default function generatePicker<DateType>(
       ]);
 
       const iconColor = (): string => {
-        let color: string = 'var(--grey-color-60)';
+        let color: string = 'var(--grey-tertiary-color)';
         if (mergedStatus === 'error') {
           color = 'var(--error-color)';
         } else if (mergedStatus === 'warning') {
diff --git a/src/components/DateTimePicker/DatePicker/Styles/partial.scss b/src/components/DateTimePicker/DatePicker/Styles/partial.scss
index 9a73ec525..217a4a093 100644
--- a/src/components/DateTimePicker/DatePicker/Styles/partial.scss
+++ b/src/components/DateTimePicker/DatePicker/Styles/partial.scss
@@ -3,10 +3,10 @@
 $picker-partial-width: $picker-partial-cell-width * 7 + $space-s * 2 + 4;
 $disabled-color: rgba(0, 0, 0, 0.25);
 $picker-partial-cell-height: 24px;
-$picker-basic-cell-hover-color: var(--grey-color-10);
+$picker-basic-cell-hover-color: var(--grey-background1-color);
 $picker-basic-cell-active-with-range-color: var(--primary-color-40);
 $picker-date-hover-range-border-color: var(--primary-color-40);
-$picker-date-hover-range-color: var(--primary-color-30);
+$picker-date-hover-range-color: var(--primary-background3-color);
 $picker-partial-without-time-cell-height: 64px;
 $picker-time-partial-column-height: 224px;
 $picker-time-partial-column-width: 56px;
@@ -334,11 +334,11 @@ $picker-time-partial-cell-height: 28px;
     color: var(--primary-color);
 
     &:hover {
-      color: var(--primary-color-70);
+      color: var(--primary-secondary-color);
     }
 
     &:active {
-      color: var(--primary-color-80);
+      color: var(--primary-color);
     }
 
     &-disabled {
diff --git a/src/components/DateTimePicker/DatePicker/Styles/status.scss b/src/components/DateTimePicker/DatePicker/Styles/status.scss
index 3c0989d1a..6d2a52aa6 100644
--- a/src/components/DateTimePicker/DatePicker/Styles/status.scss
+++ b/src/components/DateTimePicker/DatePicker/Styles/status.scss
@@ -3,11 +3,11 @@
 .picker {
   &-status-error {
     input {
-      @include placeholder(var(--disruptive-color-80));
+      @include placeholder(var(--disruptive-color));
     }
 
-    border-color: var(--disruptive-color-80);
-    color: var(--disruptive-color-80);
+    border-color: var(--disruptive-color);
+    color: var(--disruptive-color);
   }
 
   &-status-warning {
diff --git a/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/DatePicker.date.shot b/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/DatePicker.date.shot
index ea7dfa653..a3b5ba236 100644
--- a/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/DatePicker.date.shot
+++ b/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/DatePicker.date.shot
@@ -46,7 +46,7 @@ LoadedCheerio {
                         Node {
                           "attribs": Object {
                             "d": "M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z",
-                            "style": "fill: var(--grey-color-60);",
+                            "style": "fill: var(--grey-tertiary-color);",
                           },
                           "children": Array [],
                           "name": "path",
@@ -251,7 +251,7 @@ LoadedCheerio {
                       Node {
                         "attribs": Object {
                           "d": "M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z",
-                          "style": "fill: var(--grey-color-60);",
+                          "style": "fill: var(--grey-tertiary-color);",
                         },
                         "children": Array [],
                         "name": "path",
@@ -551,7 +551,7 @@ LoadedCheerio {
                         Node {
                           "attribs": Object {
                             "d": "M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z",
-                            "style": "fill: var(--grey-color-60);",
+                            "style": "fill: var(--grey-tertiary-color);",
                           },
                           "children": Array [],
                           "name": "path",
diff --git a/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/DatePicker.dateTime.shot b/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/DatePicker.dateTime.shot
index c9f88f877..17c53fb87 100644
--- a/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/DatePicker.dateTime.shot
+++ b/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/DatePicker.dateTime.shot
@@ -46,7 +46,7 @@ LoadedCheerio {
                         Node {
                           "attribs": Object {
                             "d": "M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z",
-                            "style": "fill: var(--grey-color-60);",
+                            "style": "fill: var(--grey-tertiary-color);",
                           },
                           "children": Array [],
                           "name": "path",
@@ -251,7 +251,7 @@ LoadedCheerio {
                       Node {
                         "attribs": Object {
                           "d": "M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z",
-                          "style": "fill: var(--grey-color-60);",
+                          "style": "fill: var(--grey-tertiary-color);",
                         },
                         "children": Array [],
                         "name": "path",
@@ -551,7 +551,7 @@ LoadedCheerio {
                         Node {
                           "attribs": Object {
                             "d": "M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z",
-                            "style": "fill: var(--grey-color-60);",
+                            "style": "fill: var(--grey-tertiary-color);",
                           },
                           "children": Array [],
                           "name": "path",
diff --git a/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/DatePicker.disableddate.shot b/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/DatePicker.disableddate.shot
index be1003549..5b54b58be 100644
--- a/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/DatePicker.disableddate.shot
+++ b/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/DatePicker.disableddate.shot
@@ -46,7 +46,7 @@ LoadedCheerio {
                         Node {
                           "attribs": Object {
                             "d": "M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z",
-                            "style": "fill: var(--grey-color-60);",
+                            "style": "fill: var(--grey-tertiary-color);",
                           },
                           "children": Array [],
                           "name": "path",
@@ -156,7 +156,7 @@ LoadedCheerio {
                       Node {
                         "attribs": Object {
                           "d": "M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z",
-                          "style": "fill: var(--grey-color-60);",
+                          "style": "fill: var(--grey-tertiary-color);",
                         },
                         "children": Array [],
                         "name": "path",
diff --git a/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/DatePicker.locale.shot b/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/DatePicker.locale.shot
index 025253c20..7f9f3cdef 100644
--- a/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/DatePicker.locale.shot
+++ b/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/DatePicker.locale.shot
@@ -46,7 +46,7 @@ LoadedCheerio {
                         Node {
                           "attribs": Object {
                             "d": "M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z",
-                            "style": "fill: var(--grey-color-60);",
+                            "style": "fill: var(--grey-tertiary-color);",
                           },
                           "children": Array [],
                           "name": "path",
@@ -251,7 +251,7 @@ LoadedCheerio {
                       Node {
                         "attribs": Object {
                           "d": "M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z",
-                          "style": "fill: var(--grey-color-60);",
+                          "style": "fill: var(--grey-tertiary-color);",
                         },
                         "children": Array [],
                         "name": "path",
@@ -551,7 +551,7 @@ LoadedCheerio {
                         Node {
                           "attribs": Object {
                             "d": "M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z",
-                            "style": "fill: var(--grey-color-60);",
+                            "style": "fill: var(--grey-tertiary-color);",
                           },
                           "children": Array [],
                           "name": "path",
diff --git a/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/DatePicker.month.shot b/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/DatePicker.month.shot
index 5a3c10245..2a7c94066 100644
--- a/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/DatePicker.month.shot
+++ b/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/DatePicker.month.shot
@@ -46,7 +46,7 @@ LoadedCheerio {
                         Node {
                           "attribs": Object {
                             "d": "M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z",
-                            "style": "fill: var(--grey-color-60);",
+                            "style": "fill: var(--grey-tertiary-color);",
                           },
                           "children": Array [],
                           "name": "path",
@@ -251,7 +251,7 @@ LoadedCheerio {
                       Node {
                         "attribs": Object {
                           "d": "M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z",
-                          "style": "fill: var(--grey-color-60);",
+                          "style": "fill: var(--grey-tertiary-color);",
                         },
                         "children": Array [],
                         "name": "path",
@@ -551,7 +551,7 @@ LoadedCheerio {
                         Node {
                           "attribs": Object {
                             "d": "M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z",
-                            "style": "fill: var(--grey-color-60);",
+                            "style": "fill: var(--grey-tertiary-color);",
                           },
                           "children": Array [],
                           "name": "path",
diff --git a/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/DatePicker.week.shot b/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/DatePicker.week.shot
index 1e2b78d03..74ae7314c 100644
--- a/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/DatePicker.week.shot
+++ b/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/DatePicker.week.shot
@@ -46,7 +46,7 @@ LoadedCheerio {
                         Node {
                           "attribs": Object {
                             "d": "M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z",
-                            "style": "fill: var(--grey-color-60);",
+                            "style": "fill: var(--grey-tertiary-color);",
                           },
                           "children": Array [],
                           "name": "path",
@@ -251,7 +251,7 @@ LoadedCheerio {
                       Node {
                         "attribs": Object {
                           "d": "M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z",
-                          "style": "fill: var(--grey-color-60);",
+                          "style": "fill: var(--grey-tertiary-color);",
                         },
                         "children": Array [],
                         "name": "path",
@@ -551,7 +551,7 @@ LoadedCheerio {
                         Node {
                           "attribs": Object {
                             "d": "M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z",
-                            "style": "fill: var(--grey-color-60);",
+                            "style": "fill: var(--grey-tertiary-color);",
                           },
                           "children": Array [],
                           "name": "path",
diff --git a/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/QuarterPicker.test.js.snap b/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/QuarterPicker.test.js.snap
index 1822b94cd..a6c540f29 100644
--- a/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/QuarterPicker.test.js.snap
+++ b/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/QuarterPicker.test.js.snap
@@ -47,7 +47,7 @@ LoadedCheerio {
                         Node {
                           "attribs": Object {
                             "d": "M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z",
-                            "style": "fill: var(--grey-color-60);",
+                            "style": "fill: var(--grey-tertiary-color);",
                           },
                           "children": Array [],
                           "name": "path",
@@ -157,7 +157,7 @@ LoadedCheerio {
                       Node {
                         "attribs": Object {
                           "d": "M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z",
-                          "style": "fill: var(--grey-color-60);",
+                          "style": "fill: var(--grey-tertiary-color);",
                         },
                         "children": Array [],
                         "name": "path",
diff --git a/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/RangePicker.test.js.snap b/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/RangePicker.test.js.snap
index a70d3acbb..5248e3bf1 100644
--- a/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/RangePicker.test.js.snap
+++ b/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/RangePicker.test.js.snap
@@ -128,7 +128,7 @@ LoadedCheerio {
                           Node {
                             "attribs": Object {
                               "d": "M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z",
-                              "style": "fill: var(--grey-color-60);",
+                              "style": "fill: var(--grey-tertiary-color);",
                             },
                             "children": Array [],
                             "name": "path",
@@ -321,7 +321,7 @@ LoadedCheerio {
                         Node {
                           "attribs": Object {
                             "d": "M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z",
-                            "style": "fill: var(--grey-color-60);",
+                            "style": "fill: var(--grey-tertiary-color);",
                           },
                           "children": Array [],
                           "name": "path",
@@ -537,7 +537,7 @@ LoadedCheerio {
                       Node {
                         "attribs": Object {
                           "d": "M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z",
-                          "style": "fill: var(--grey-color-60);",
+                          "style": "fill: var(--grey-tertiary-color);",
                         },
                         "children": Array [],
                         "name": "path",
@@ -730,7 +730,7 @@ LoadedCheerio {
                     Node {
                       "attribs": Object {
                         "d": "M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z",
-                        "style": "fill: var(--grey-color-60);",
+                        "style": "fill: var(--grey-tertiary-color);",
                       },
                       "children": Array [],
                       "name": "path",
@@ -953,7 +953,7 @@ LoadedCheerio {
                   Node {
                     "attribs": Object {
                       "d": "M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z",
-                      "style": "fill: var(--grey-color-60);",
+                      "style": "fill: var(--grey-tertiary-color);",
                     },
                     "children": Array [],
                     "name": "path",
diff --git a/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/WeekPicker.test.js.snap b/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/WeekPicker.test.js.snap
index 56a2feb46..8df1f8758 100644
--- a/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/WeekPicker.test.js.snap
+++ b/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/WeekPicker.test.js.snap
@@ -47,7 +47,7 @@ LoadedCheerio {
                         Node {
                           "attribs": Object {
                             "d": "M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z",
-                            "style": "fill: var(--grey-color-60);",
+                            "style": "fill: var(--grey-tertiary-color);",
                           },
                           "children": Array [],
                           "name": "path",
@@ -157,7 +157,7 @@ LoadedCheerio {
                       Node {
                         "attribs": Object {
                           "d": "M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z",
-                          "style": "fill: var(--grey-color-60);",
+                          "style": "fill: var(--grey-tertiary-color);",
                         },
                         "children": Array [],
                         "name": "path",
diff --git a/src/components/DateTimePicker/Internal/ocpicker.module.scss b/src/components/DateTimePicker/Internal/ocpicker.module.scss
index 4918218d7..02a8045f7 100644
--- a/src/components/DateTimePicker/Internal/ocpicker.module.scss
+++ b/src/components/DateTimePicker/Internal/ocpicker.module.scss
@@ -111,7 +111,7 @@
   }
 
   &-header {
-    border-bottom: 1px solid var(--grey-color-20);
+    border-bottom: 1px solid var(--grey-background2-color);
     display: flex;
     margin: 0 $space-m $space-m $space-m;
     padding: $space-m 0 $space-s 0;
@@ -1079,7 +1079,7 @@
 
   &-status-error &-input {
     input {
-      color: var(--disruptive-color-80);
+      color: var(--disruptive-color);
     }
   }
 
diff --git a/src/components/DateTimePicker/TimePicker/Tests/__snapshots__/index.test.js.snap b/src/components/DateTimePicker/TimePicker/Tests/__snapshots__/index.test.js.snap
index 776f6d94e..e08f56f6f 100644
--- a/src/components/DateTimePicker/TimePicker/Tests/__snapshots__/index.test.js.snap
+++ b/src/components/DateTimePicker/TimePicker/Tests/__snapshots__/index.test.js.snap
@@ -46,7 +46,7 @@ LoadedCheerio {
                         Node {
                           "attribs": Object {
                             "d": "M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z",
-                            "style": "fill: var(--grey-color-60);",
+                            "style": "fill: var(--grey-tertiary-color);",
                           },
                           "children": Array [],
                           "name": "path",
@@ -156,7 +156,7 @@ LoadedCheerio {
                       Node {
                         "attribs": Object {
                           "d": "M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z",
-                          "style": "fill: var(--grey-color-60);",
+                          "style": "fill: var(--grey-tertiary-color);",
                         },
                         "children": Array [],
                         "name": "path",
@@ -424,7 +424,7 @@ LoadedCheerio {
                         Node {
                           "attribs": Object {
                             "d": "M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z",
-                            "style": "fill: var(--grey-color-60);",
+                            "style": "fill: var(--grey-tertiary-color);",
                           },
                           "children": Array [],
                           "name": "path",
@@ -629,7 +629,7 @@ LoadedCheerio {
                       Node {
                         "attribs": Object {
                           "d": "M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z",
-                          "style": "fill: var(--grey-color-60);",
+                          "style": "fill: var(--grey-tertiary-color);",
                         },
                         "children": Array [],
                         "name": "path",
@@ -929,7 +929,7 @@ LoadedCheerio {
                         Node {
                           "attribs": Object {
                             "d": "M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z",
-                            "style": "fill: var(--grey-color-60);",
+                            "style": "fill: var(--grey-tertiary-color);",
                           },
                           "children": Array [],
                           "name": "path",
diff --git a/src/components/Dialog/BaseDialog/base-dialog.module.scss b/src/components/Dialog/BaseDialog/base-dialog.module.scss
index bb35e6c1f..ec040a279 100644
--- a/src/components/Dialog/BaseDialog/base-dialog.module.scss
+++ b/src/components/Dialog/BaseDialog/base-dialog.module.scss
@@ -1,5 +1,6 @@
-$dialog-body-top-shadow: inset 0 11px 8px -10px var(--grey-color-20);
-$dialog-body-bottom-shadow: inset 0 -11px 8px -10px var(--grey-color-20);
+$dialog-body-top-shadow: inset 0 11px 8px -10px var(--grey-background2-color);
+$dialog-body-bottom-shadow: inset 0 -11px 8px -10px
+  var(--grey-background2-color);
 
 .dialog-backdrop {
   &:not(.modeless) {
diff --git a/src/components/Dropdown/dropdown.module.scss b/src/components/Dropdown/dropdown.module.scss
index a5e8ec262..6887e5f7e 100644
--- a/src/components/Dropdown/dropdown.module.scss
+++ b/src/components/Dropdown/dropdown.module.scss
@@ -9,7 +9,7 @@
     padding: $space-xs;
 
     &:focus-visible {
-      outline: $space-xxxs solid var(--primary-color-80);
+      outline: $space-xxxs solid var(--primary-color);
     }
 
     &.disabled {
diff --git a/src/components/Form/Styles/status.scss b/src/components/Form/Styles/status.scss
index b7b2237ae..a65794fc0 100644
--- a/src/components/Form/Styles/status.scss
+++ b/src/components/Form/Styles/status.scss
@@ -28,7 +28,7 @@
     }
 
     &:hover {
-      border-color: var(--grey-color-60);
+      border-color: var(--grey-tertiary-color);
     }
   }
 
diff --git a/src/components/Grid/Grid.stories.tsx b/src/components/Grid/Grid.stories.tsx
index dfb303edf..8a8039f10 100644
--- a/src/components/Grid/Grid.stories.tsx
+++ b/src/components/Grid/Grid.stories.tsx
@@ -39,7 +39,7 @@ export default {
 } as ComponentMeta<typeof Row>;
 
 const Basic_Story: ComponentStory<typeof Row> = (args) => (
-  <div style={{ border: '1px solid var(--primary-color-70)' }}>
+  <div style={{ border: '1px solid var(--primary-secondary-color)' }}>
     <Row>
       <Col {...args} span={6} push={6}>
         col-6 1
@@ -124,7 +124,7 @@ export const Basic = Basic_Story.bind({});
 
 const style: React.CSSProperties = {
   background: 'var(--primary-color-40)',
-  border: '2px solid var(--primary-color-70)',
+  border: '2px solid var(--primary-secondary-color)',
   padding: '8px 0',
 };
 
@@ -198,7 +198,7 @@ const Vertical_Gutter_Story: ComponentStory<typeof Row> = (args) => (
 export const Vertical_Gutter = Vertical_Gutter_Story.bind({});
 
 const Column_Offset_Story: ComponentStory<typeof Row> = (args) => (
-  <div style={{ border: '1px solid var(--primary-color-70)' }}>
+  <div style={{ border: '1px solid var(--primary-secondary-color)' }}>
     <Row>
       <Col {...args} span={4}>
         col-4
@@ -226,7 +226,7 @@ const Column_Offset_Story: ComponentStory<typeof Row> = (args) => (
 export const Column_Offset = Column_Offset_Story.bind({});
 
 const Grid_Sort_Story: ComponentStory<typeof Row> = (args) => (
-  <div style={{ border: '1px solid var(--primary-color-70)' }}>
+  <div style={{ border: '1px solid var(--primary-secondary-color)' }}>
     <Row>
       <Col {...args} span={8} push={4}>
         col-8 col-push-4
@@ -241,7 +241,7 @@ const Grid_Sort_Story: ComponentStory<typeof Row> = (args) => (
 export const Grid_Sort = Grid_Sort_Story.bind({});
 
 const Typesetting_Story: ComponentStory<typeof Row> = (args) => (
-  <div style={{ border: '1px solid var(--primary-color-70)' }}>
+  <div style={{ border: '1px solid var(--primary-secondary-color)' }}>
     <Row justify="start">
       <Col {...args} span={2}>
         col-2
@@ -337,7 +337,7 @@ const DemoBox: React.FC<{ children: React.ReactNode; value: number }> = (
   <p
     style={{
       background: 'var(--primary-color-40)',
-      border: '2px solid var(--primary-color-70)',
+      border: '2px solid var(--primary-secondary-color)',
       height: `${props.value}px`,
     }}
   >
@@ -649,7 +649,7 @@ export const Playground = Playground_Story.bind({});
 const basicArgs: Object = {
   style: {
     background: 'var(--primary-color-40)',
-    border: '1px solid var(--primary-color-70)',
+    border: '1px solid var(--primary-secondary-color)',
     padding: '16px 0',
     textAlign: 'center',
   },
diff --git a/src/components/Inputs/input.module.scss b/src/components/Inputs/input.module.scss
index e0f99d08b..1dd037de1 100644
--- a/src/components/Inputs/input.module.scss
+++ b/src/components/Inputs/input.module.scss
@@ -125,7 +125,7 @@
       border-color: transparent;
 
       svg {
-        color: var(--grey-color-80);
+        color: var(--grey-color);
       }
     }
 
@@ -134,7 +134,7 @@
       border-color: transparent;
 
       svg {
-        color: var(--grey-color-80);
+        color: var(--grey-color);
       }
     }
 
@@ -153,7 +153,7 @@
       border-color: transparent;
 
       svg {
-        color: var(--grey-color-80);
+        color: var(--grey-color);
       }
     }
 
@@ -874,13 +874,13 @@
     }
 
     svg {
-      color: var(--grey-color-60);
+      color: var(--grey-tertiary-color);
     }
   }
 
   .icon-button {
     bottom: 1px;
-    color: var(--grey-color-60);
+    color: var(--grey-tertiary-color);
     height: $input-small-size;
     padding: $space-xxs;
     position: absolute;
@@ -895,7 +895,7 @@
     }
 
     svg {
-      color: var(--grey-color-60);
+      color: var(--grey-tertiary-color);
     }
 
     &:active,
@@ -903,7 +903,7 @@
       background-color: transparent;
 
       svg {
-        color: var(--grey-color-60);
+        color: var(--grey-tertiary-color);
       }
     }
 
@@ -912,14 +912,14 @@
       outline-color: transparent;
 
       svg {
-        color: var(--grey-color-80);
+        color: var(--grey-color);
       }
     }
   }
 
   .clear-icon-button {
     bottom: 1px;
-    color: var(--grey-color-60);
+    color: var(--grey-tertiary-color);
     height: 35px;
     position: absolute;
     right: $space-xxxs;
@@ -937,11 +937,11 @@
     &:active,
     &:hover {
       background-color: transparent;
-      color: var(--grey-color-80);
+      color: var(--grey-color);
       outline-color: transparent;
 
       svg {
-        color: var(--grey-color-80);
+        color: var(--grey-color);
       }
     }
 
@@ -1567,7 +1567,7 @@
         background-color: transparent;
 
         svg {
-          color: var(--grey-color-60);
+          color: var(--grey-tertiary-color);
         }
       }
     }
@@ -1579,7 +1579,7 @@
         box-shadow: var(--focus-visible-box-shadow);
 
         svg {
-          color: var(--grey-color-80);
+          color: var(--grey-color);
         }
       }
     }
diff --git a/src/components/LinkButton/linkbutton.module.scss b/src/components/LinkButton/linkbutton.module.scss
index 78feff774..7602fe5ec 100644
--- a/src/components/LinkButton/linkbutton.module.scss
+++ b/src/components/LinkButton/linkbutton.module.scss
@@ -218,7 +218,7 @@
       &:after {
         animation: $motion-duration-fast $motion-easing-easeinout 1
           nudgeRingMedium;
-        border: $space-xxs solid var(--primary-color-20);
+        border: $space-xxs solid var(--primary-background2-color);
         border-radius: 100%;
         content: '';
         height: 14px;
@@ -433,11 +433,11 @@
 }
 
 .link-button-primary {
-  --button-counter-default-background-color: var(--accent-color-10);
-  --button-counter-hover-background-color: var(--accent-color-20);
-  --button-counter-checked-background-color: var(--accent-color-10);
-  --button-counter-focus-background-color: var(--accent-color-10);
-  --button-counter-active-background-color: var(--accent-color-10);
+  --button-counter-default-background-color: var(--accent-background1-color);
+  --button-counter-hover-background-color: var(--accent-background2-color);
+  --button-counter-checked-background-color: var(--accent-background1-color);
+  --button-counter-focus-background-color: var(--accent-background1-color);
+  --button-counter-active-background-color: var(--accent-background1-color);
 
   color: var(--button-primary-text-color);
   background-color: var(--button-primary-background-color);
@@ -477,11 +477,11 @@
 }
 
 .link-button-secondary {
-  --button-counter-default-background-color: var(--primary-color-20);
-  --button-counter-hover-background-color: var(--primary-color-20);
-  --button-counter-checked-background-color: var(--primary-color-10);
-  --button-counter-focus-background-color: var(--primary-color-20);
-  --button-counter-active-background-color: var(--primary-color-10);
+  --button-counter-default-background-color: var(--primary-background2-color);
+  --button-counter-hover-background-color: var(--primary-background2-color);
+  --button-counter-checked-background-color: var(--primary-background1-color);
+  --button-counter-focus-background-color: var(--primary-background2-color);
+  --button-counter-active-background-color: var(--primary-background1-color);
 
   color: var(--button-secondary-text-color);
   background-color: var(--button-secondary-background-color);
@@ -555,12 +555,16 @@
 }
 
 .link-button-primary-disruptive {
-  --button-counter-default-background-color: var(--disruptive-color-10);
-  --button-counter-hover-background-color: var(--disruptive-color-20);
-  --button-counter-checked-background-color: var(--disruptive-color-10);
-  --button-counter-focus-background-color: var(--disruptive-color-10);
-  --button-counter-active-background-color: var(--disruptive-color-10);
-  --button-counter-default-text-color: var(--disruptive-color-80);
+  --button-counter-default-background-color: var(
+    --disruptive-background1-color
+  );
+  --button-counter-hover-background-color: var(--disruptive-background2-color);
+  --button-counter-checked-background-color: var(
+    --disruptive-background1-color
+  );
+  --button-counter-focus-background-color: var(--disruptive-background1-color);
+  --button-counter-active-background-color: var(--disruptive-background1-color);
+  --button-counter-default-text-color: var(--disruptive-color);
 
   color: var(--button-primary-disruptive-text-color);
   background-color: var(--button-primary-disruptive-background-color);
@@ -586,12 +590,16 @@
 }
 
 .link-button-secondary-disruptive {
-  --button-counter-default-background-color: var(--disruptive-color-20);
-  --button-counter-hover-background-color: var(--disruptive-color-20);
-  --button-counter-checked-background-color: var(--disruptive-color-10);
-  --button-counter-focus-background-color: var(--disruptive-color-20);
-  --button-counter-active-background-color: var(--disruptive-color-10);
-  --button-counter-default-text-color: var(--disruptive-color-80);
+  --button-counter-default-background-color: var(
+    --disruptive-background2-color
+  );
+  --button-counter-hover-background-color: var(--disruptive-background2-color);
+  --button-counter-checked-background-color: var(
+    --disruptive-background1-color
+  );
+  --button-counter-focus-background-color: var(--disruptive-background2-color);
+  --button-counter-active-background-color: var(--disruptive-background1-color);
+  --button-counter-default-text-color: var(--disruptive-color);
 
   color: var(--button-secondary-disruptive-text-color);
   background-color: var(--button-secondary-disruptive-background-color);
@@ -619,11 +627,11 @@
 }
 
 .link-button-default {
-  --button-counter-default-background-color: var(--primary-color-20);
-  --button-counter-hover-background-color: var(--primary-color-20);
-  --button-counter-checked-background-color: var(--primary-color-10);
-  --button-counter-focus-background-color: var(--primary-color-20);
-  --button-counter-active-background-color: var(--primary-color-10);
+  --button-counter-default-background-color: var(--primary-background2-color);
+  --button-counter-hover-background-color: var(--primary-background2-color);
+  --button-counter-checked-background-color: var(--primary-background1-color);
+  --button-counter-focus-background-color: var(--primary-background2-color);
+  --button-counter-active-background-color: var(--primary-background1-color);
 
   color: var(--button-default-text-color);
   background-color: var(--button-default-background-color);
@@ -663,12 +671,16 @@
 }
 
 .link-button-disruptive {
-  --button-counter-default-background-color: var(--disruptive-color-20);
-  --button-counter-hover-background-color: var(--disruptive-color-20);
-  --button-counter-checked-background-color: var(--disruptive-color-10);
-  --button-counter-focus-background-color: var(--disruptive-color-20);
-  --button-counter-active-background-color: var(--disruptive-color-10);
-  --button-counter-default-text-color: var(--disruptive-color-80);
+  --button-counter-default-background-color: var(
+    --disruptive-background2-color
+  );
+  --button-counter-hover-background-color: var(--disruptive-background2-color);
+  --button-counter-checked-background-color: var(
+    --disruptive-background1-color
+  );
+  --button-counter-focus-background-color: var(--disruptive-background2-color);
+  --button-counter-active-background-color: var(--disruptive-background1-color);
+  --button-counter-default-text-color: var(--disruptive-color);
 
   color: var(--button-default-disruptive-text-color);
   background-color: var(--button-default-disruptive-background-color);
@@ -938,15 +950,15 @@
     &.link-button-secondary-disruptive {
       &.focus-visible,
       &:focus-visible {
-        color: var(--disruptive-color-80);
+        color: var(--disruptive-color);
       }
     }
 
     &.link-button-disruptive {
       &.focus-visible,
       &:focus-visible {
-        background-color: var(--disruptive-color-10);
-        color: var(--disruptive-color-80);
+        background-color: var(--disruptive-background1-color);
+        color: var(--disruptive-color);
       }
     }
 
diff --git a/src/components/MatchScore/matchScore.module.scss b/src/components/MatchScore/matchScore.module.scss
index 63d7c9004..ebc7ea7c6 100644
--- a/src/components/MatchScore/matchScore.module.scss
+++ b/src/components/MatchScore/matchScore.module.scss
@@ -5,7 +5,7 @@ $indicator-size: 12px;
   align-items: center;
 
   .label {
-    color: var(--primary-color-70);
+    color: var(--primary-secondary-color);
     font-family: $octuple-font-family;
     font-size: $text-font-size-3;
     margin: 0;
@@ -16,7 +16,7 @@ $indicator-size: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
-    border: 1px solid var(--primary-color-60);
+    border: 1px solid var(--primary-tertiary-color);
     box-sizing: border-box;
     height: $indicator-size;
     width: $indicator-size;
@@ -24,14 +24,14 @@ $indicator-size: 12px;
     margin-right: $space-xxs;
 
     &.full {
-      background: var(--accent-color-30);
+      background: var(--accent-background3-color);
     }
 
     &.half {
-      background: var(--accent-color-30);
+      background: var(--accent-background3-color);
       background: linear-gradient(
         to right,
-        var(--accent-color-30) 50%,
+        var(--accent-background3-color) 50%,
         transparent 50%
       );
 
@@ -39,7 +39,7 @@ $indicator-size: 12px;
         content: '';
         height: $indicator-size;
         width: 1px;
-        background: var(--primary-color-60);
+        background: var(--primary-tertiary-color);
       }
     }
   }
@@ -57,7 +57,7 @@ $indicator-size: 12px;
       &.half {
         background: linear-gradient(
           to left,
-          var(--accent-color-30) 50%,
+          var(--accent-background3-color) 50%,
           transparent 50%
         );
       }
diff --git a/src/components/Menu/MenuItem/menuItem.module.scss b/src/components/Menu/MenuItem/menuItem.module.scss
index d2599b656..d9eb1cecb 100644
--- a/src/components/Menu/MenuItem/menuItem.module.scss
+++ b/src/components/Menu/MenuItem/menuItem.module.scss
@@ -71,7 +71,7 @@
 
   .item-sub-text {
     text-align: left;
-    color: var(--grey-color-60);
+    color: var(--grey-tertiary-color);
     @each $size-name, $size-value in $text-font-size-map {
       &.#{$size-name} {
         font-size: $size-value;
@@ -119,15 +119,15 @@
   }
 
   &.primary {
-    --label: var(--primary-color-70);
+    --label: var(--primary-secondary-color);
 
     &:hover {
-      --background: var(--accent-color-10);
+      --background: var(--accent-background1-color);
     }
 
     &.active,
     &:active {
-      --background: var(--accent-color-20);
+      --background: var(--accent-background2-color);
     }
   }
 
@@ -135,26 +135,26 @@
     --label: var(--disruptive-color);
 
     &:hover {
-      --background: var(--disruptive-color-10);
+      --background: var(--disruptive-background1-color);
     }
 
     &.active,
     &:active {
-      --background: var(--disruptive-color-20);
+      --background: var(--disruptive-background2-color);
     }
   }
 
   &.neutral {
-    --active-background: var(--grey-color-10);
+    --active-background: var(--grey-background1-color);
     --label: var(--grey-color-90);
 
     &:hover {
-      --background: var(--grey-color-10);
+      --background: var(--grey-background1-color);
     }
 
     &.active,
     &:active {
-      --background: var(--grey-color-20);
+      --background: var(--grey-background2-color);
     }
   }
 
@@ -214,7 +214,7 @@
 }
 
 .menu-item-sub-header {
-  color: var(--grey-color-60);
+  color: var(--grey-tertiary-color);
   padding: $space-s $space-xxs $space-s;
   border-bottom: solid 1px var(--border-color);
   margin: 0 $space-m $space-m;
@@ -270,9 +270,9 @@
     &.disruptive {
       &:focus-visible,
       &:focus-within {
-        background-color: var(--disruptive-color-10);
+        background-color: var(--disruptive-background1-color);
         box-shadow: 0 0 0 var(--focus-visible-shadow-width)
-          var(--disruptive-color-80);
+          var(--disruptive-color);
       }
     }
 
diff --git a/src/components/Pagination/pagination.module.scss b/src/components/Pagination/pagination.module.scss
index 194719fab..6482e864b 100644
--- a/src/components/Pagination/pagination.module.scss
+++ b/src/components/Pagination/pagination.module.scss
@@ -1,7 +1,7 @@
 .pagination {
-  --pager-button-active-foreground-color: var(--primary-color-70);
-  --pager-button-active-outline-color: var(--primary-color-60);
-  --pager-button-active-background-color: var(--accent-color-20);
+  --pager-button-active-foreground-color: var(--primary-secondary-color);
+  --pager-button-active-outline-color: var(--primary-tertiary-color);
+  --pager-button-active-background-color: var(--accent-background2-color);
 
   align-items: center;
   display: flex;
@@ -17,7 +17,7 @@
 
   .pagination-button {
     &:hover {
-      background: var(--accent-color-10);
+      background: var(--accent-background1-color);
     }
 
     &:active,
@@ -110,7 +110,7 @@
       padding: 0;
       width: 24px;
       vertical-align: middle;
-      outline: solid 1px var(--accent-color-60);
+      outline: solid 1px var(--accent-tertiary-color);
       outline-offset: -1px;
 
       span,
diff --git a/src/components/PersistentBar/persistentBar.module.scss b/src/components/PersistentBar/persistentBar.module.scss
index 4817521ee..2b5b7649f 100644
--- a/src/components/PersistentBar/persistentBar.module.scss
+++ b/src/components/PersistentBar/persistentBar.module.scss
@@ -1,5 +1,5 @@
 .persistent-bar {
-  --info-color: var(--grey-color-70);
+  --info-color: var(--grey-secondary-color);
   display: flex;
   border-radius: $space-xxs;
   padding: $space-m;
diff --git a/src/components/Pills/pills.module.scss b/src/components/Pills/pills.module.scss
index 50f955574..21363d2ca 100644
--- a/src/components/Pills/pills.module.scss
+++ b/src/components/Pills/pills.module.scss
@@ -1,7 +1,7 @@
 .tag-pills {
-  --bg: var(--blue-color-20);
+  --bg: var(--blue-background2-color);
   --label: var(--blue-color);
-  --hover-bg: var(--blue-color-30);
+  --hover-bg: var(--blue-background3-color);
   --hover-label: var(--text-primary-color);
   padding: $space-xxs $space-s;
   border-radius: $border-radius-m;
@@ -46,81 +46,81 @@
   }
 
   &.red {
-    --bg: var(--red-color-20);
+    --bg: var(--red-background2-color);
     --label: var(--red-color);
-    --hover-bg: var(--red-color-30);
+    --hover-bg: var(--red-background3-color);
   }
 
   &.red-orange {
-    --bg: var(--redorange-color-20);
+    --bg: var(--redorange-background2-color);
     --label: var(--redorange-color);
-    --hover-bg: var(--redorange-color-30);
+    --hover-bg: var(--redorange-background3-color);
   }
 
   &.orange {
-    --bg: var(--orange-color-20);
+    --bg: var(--orange-background2-color);
     --label: var(--orange-color);
-    --hover-bg: var(--orange-color-30);
+    --hover-bg: var(--orange-background3-color);
   }
 
   &.yellow {
-    --bg: var(--yellow-color-20);
+    --bg: var(--yellow-background2-color);
     --label: var(--yellow-color);
-    --hover-bg: var(--yellow-color-30);
+    --hover-bg: var(--yellow-background3-color);
   }
 
   &.yellow-green {
-    --bg: var(--yellowgreen-color-20);
+    --bg: var(--yellowgreen-background2-color);
     --label: var(--yellowgreen-color);
-    --hover-bg: var(--yellowgreen-color-30);
+    --hover-bg: var(--yellowgreen-background3-color);
   }
 
   &.green {
-    --bg: var(--green-color-20);
+    --bg: var(--green-background2-color);
     --label: var(--green-color);
-    --hover-bg: var(--green-color-30);
+    --hover-bg: var(--green-background3-color);
   }
 
   &.blue-green {
-    --bg: var(--bluegreen-color-20);
+    --bg: var(--bluegreen-background2-color);
     --label: var(--bluegreen-color);
-    --hover-bg: var(--bluegreen-color-30);
+    --hover-bg: var(--bluegreen-background3-color);
   }
 
   &.blue {
-    --bg: var(--blue-color-20);
+    --bg: var(--blue-background2-color);
     --label: var(--blue-color);
   }
 
   &.blue-violet {
-    --bg: var(--blueviolet-color-20);
+    --bg: var(--blueviolet-background2-color);
     --label: var(--blueviolet-color);
-    --hover-bg: var(--blueviolet-color-30);
+    --hover-bg: var(--blueviolet-background3-color);
   }
 
   &.violet {
-    --bg: var(--violet-color-20);
+    --bg: var(--violet-background2-color);
     --label: var(--violet-color);
-    --hover-bg: var(--violet-color-30);
+    --hover-bg: var(--violet-background3-color);
   }
 
   &.violet-red {
-    --bg: var(--violetred-color-20);
+    --bg: var(--violetred-background2-color);
     --label: var(--violetred-color);
-    --hover-bg: var(--violetred-color-30);
+    --hover-bg: var(--violetred-background3-color);
   }
 
   &.grey {
-    --bg: var(--grey-color-20);
+    --bg: var(--grey-background2-color);
     --label: var(--grey-color);
-    --hover-bg: var(--grey-color-30);
+    --hover-bg: var(--grey-background3-color);
   }
 
   &.white {
     --bg: var(--white-color);
-    --label: var(--grey-color-60);
-    --hover-bg: var(--grey-color-10);
-    border: 1px solid var(--grey-color-60);
+    --label: var(--grey-tertiary-color);
+    --hover-bg: var(--grey-background1-color);
+    border: 1px solid var(--grey-tertiary-color);
   }
 
   &:hover:not(.tag-pills-disabled) {
diff --git a/src/components/Progress/Internal/OcCircle.tsx b/src/components/Progress/Internal/OcCircle.tsx
index e08c1c306..48c16a9f9 100644
--- a/src/components/Progress/Internal/OcCircle.tsx
+++ b/src/components/Progress/Internal/OcCircle.tsx
@@ -78,11 +78,11 @@ const OcCircle: FC<OcProgressProps> = ({
   id,
   percent = 0,
   steps,
-  strokeColor = 'var(--primary-color-60)',
+  strokeColor = 'var(--primary-tertiary-color)',
   strokeLinecap = 'butt',
   strokeWidth = 1,
   style,
-  trailColor = 'var(--accent-color-10)',
+  trailColor = 'var(--accent-background1-color)',
   trailWidth = 1,
   ...rest
 }) => {
diff --git a/src/components/Progress/Internal/OcLine.tsx b/src/components/Progress/Internal/OcLine.tsx
index e3e1abedf..0c46f9fb6 100644
--- a/src/components/Progress/Internal/OcLine.tsx
+++ b/src/components/Progress/Internal/OcLine.tsx
@@ -8,11 +8,11 @@ import styles from '../progress.module.scss';
 const OcLine: FC<OcProgressProps> = ({
   classNames,
   percent = 0,
-  strokeColor = 'var(--primary-color-60)',
+  strokeColor = 'var(--primary-tertiary-color)',
   strokeLinecap = 'round',
   strokeWidth = 1,
   style,
-  trailColor = 'var(--accent-color-10)',
+  trailColor = 'var(--accent-background1-color)',
   trailWidth = 1,
   transition,
   ...rest
diff --git a/src/components/Progress/Internal/Tests/__snapshots__/index.test.js.snap b/src/components/Progress/Internal/Tests/__snapshots__/index.test.js.snap
index b4dab4789..4bdf2e2d0 100644
--- a/src/components/Progress/Internal/Tests/__snapshots__/index.test.js.snap
+++ b/src/components/Progress/Internal/Tests/__snapshots__/index.test.js.snap
@@ -18,7 +18,7 @@ LoadedCheerio {
               "d": "M 0,0.5
          L 100,0.5",
               "fill-opacity": "0",
-              "stroke": "var(--accent-color-10)",
+              "stroke": "var(--accent-background1-color)",
               "stroke-linecap": "butt",
               "stroke-width": "1",
             },
@@ -31,7 +31,7 @@ LoadedCheerio {
                 "d": "M 0,0.5
          L 100,0.5",
                 "fill-opacity": "0",
-                "stroke": "var(--primary-color-60)",
+                "stroke": "var(--primary-tertiary-color)",
                 "stroke-linecap": "butt",
                 "stroke-width": "1",
                 "style": "stroke-dasharray: 20px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: .3s, .3s, .3s, .06s;",
@@ -88,7 +88,7 @@ LoadedCheerio {
               "d": "M 0,0.5
          L 100,0.5",
               "fill-opacity": "0",
-              "stroke": "var(--primary-color-60)",
+              "stroke": "var(--primary-tertiary-color)",
               "stroke-linecap": "butt",
               "stroke-width": "1",
               "style": "stroke-dasharray: 20px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: .3s, .3s, .3s, .06s;",
@@ -104,7 +104,7 @@ LoadedCheerio {
                 "d": "M 0,0.5
          L 100,0.5",
                 "fill-opacity": "0",
-                "stroke": "var(--accent-color-10)",
+                "stroke": "var(--accent-background1-color)",
                 "stroke-linecap": "butt",
                 "stroke-width": "1",
               },
@@ -173,7 +173,7 @@ LoadedCheerio {
                   "d": "M 0.5,0.5
          L 99.5,0.5",
                   "fill-opacity": "0",
-                  "stroke": "var(--accent-color-10)",
+                  "stroke": "var(--accent-background1-color)",
                   "stroke-linecap": "round",
                   "stroke-width": "1",
                 },
@@ -186,7 +186,7 @@ LoadedCheerio {
                     "d": "M 0.5,0.5
          L 99.5,0.5",
                     "fill-opacity": "0",
-                    "stroke": "var(--primary-color-60)",
+                    "stroke": "var(--primary-tertiary-color)",
                     "stroke-linecap": "round",
                     "stroke-width": "1",
                     "style": "stroke-dasharray: 19.8px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: .3s, .3s, .3s, .06s;",
@@ -243,7 +243,7 @@ LoadedCheerio {
                   "d": "M 0.5,0.5
          L 99.5,0.5",
                   "fill-opacity": "0",
-                  "stroke": "var(--primary-color-60)",
+                  "stroke": "var(--primary-tertiary-color)",
                   "stroke-linecap": "round",
                   "stroke-width": "1",
                   "style": "stroke-dasharray: 19.8px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: .3s, .3s, .3s, .06s;",
@@ -259,7 +259,7 @@ LoadedCheerio {
                     "d": "M 0.5,0.5
          L 99.5,0.5",
                     "fill-opacity": "0",
-                    "stroke": "var(--accent-color-10)",
+                    "stroke": "var(--accent-background1-color)",
                     "stroke-linecap": "round",
                     "stroke-width": "1",
                   },
@@ -328,7 +328,7 @@ LoadedCheerio {
                       "d": "M 0,0.5
          L 100,0.5",
                       "fill-opacity": "0",
-                      "stroke": "var(--accent-color-10)",
+                      "stroke": "var(--accent-background1-color)",
                       "stroke-linecap": "square",
                       "stroke-width": "1",
                     },
@@ -341,7 +341,7 @@ LoadedCheerio {
                         "d": "M 0,0.5
          L 100,0.5",
                         "fill-opacity": "0",
-                        "stroke": "var(--primary-color-60)",
+                        "stroke": "var(--primary-tertiary-color)",
                         "stroke-linecap": "square",
                         "stroke-width": "1",
                         "style": "stroke-dasharray: 19.9px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: .3s, .3s, .3s, .06s;",
@@ -398,7 +398,7 @@ LoadedCheerio {
                       "d": "M 0,0.5
          L 100,0.5",
                       "fill-opacity": "0",
-                      "stroke": "var(--primary-color-60)",
+                      "stroke": "var(--primary-tertiary-color)",
                       "stroke-linecap": "square",
                       "stroke-width": "1",
                       "style": "stroke-dasharray: 19.9px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: .3s, .3s, .3s, .06s;",
@@ -414,7 +414,7 @@ LoadedCheerio {
                         "d": "M 0,0.5
          L 100,0.5",
                         "fill-opacity": "0",
-                        "stroke": "var(--accent-color-10)",
+                        "stroke": "var(--accent-background1-color)",
                         "stroke-linecap": "square",
                         "stroke-width": "1",
                       },
@@ -538,7 +538,7 @@ LoadedCheerio {
                 "d": "M 0.5,0.5
          L 99.5,0.5",
                 "fill-opacity": "0",
-                "stroke": "var(--accent-color-10)",
+                "stroke": "var(--accent-background1-color)",
                 "stroke-linecap": "round",
                 "stroke-width": "1",
               },
@@ -551,7 +551,7 @@ LoadedCheerio {
                   "d": "M 0.5,0.5
          L 99.5,0.5",
                   "fill-opacity": "0",
-                  "stroke": "var(--primary-color-60)",
+                  "stroke": "var(--primary-tertiary-color)",
                   "stroke-linecap": "round",
                   "stroke-width": "1",
                   "style": "stroke-dasharray: 19.8px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: .3s, .3s, .3s, .06s;",
@@ -608,7 +608,7 @@ LoadedCheerio {
                 "d": "M 0.5,0.5
          L 99.5,0.5",
                 "fill-opacity": "0",
-                "stroke": "var(--primary-color-60)",
+                "stroke": "var(--primary-tertiary-color)",
                 "stroke-linecap": "round",
                 "stroke-width": "1",
                 "style": "stroke-dasharray: 19.8px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: .3s, .3s, .3s, .06s;",
@@ -624,7 +624,7 @@ LoadedCheerio {
                   "d": "M 0.5,0.5
          L 99.5,0.5",
                   "fill-opacity": "0",
-                  "stroke": "var(--accent-color-10)",
+                  "stroke": "var(--accent-background1-color)",
                   "stroke-linecap": "round",
                   "stroke-width": "1",
                 },
@@ -693,7 +693,7 @@ LoadedCheerio {
                     "d": "M 0,0.5
          L 100,0.5",
                     "fill-opacity": "0",
-                    "stroke": "var(--accent-color-10)",
+                    "stroke": "var(--accent-background1-color)",
                     "stroke-linecap": "square",
                     "stroke-width": "1",
                   },
@@ -706,7 +706,7 @@ LoadedCheerio {
                       "d": "M 0,0.5
          L 100,0.5",
                       "fill-opacity": "0",
-                      "stroke": "var(--primary-color-60)",
+                      "stroke": "var(--primary-tertiary-color)",
                       "stroke-linecap": "square",
                       "stroke-width": "1",
                       "style": "stroke-dasharray: 19.9px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: .3s, .3s, .3s, .06s;",
@@ -763,7 +763,7 @@ LoadedCheerio {
                     "d": "M 0,0.5
          L 100,0.5",
                     "fill-opacity": "0",
-                    "stroke": "var(--primary-color-60)",
+                    "stroke": "var(--primary-tertiary-color)",
                     "stroke-linecap": "square",
                     "stroke-width": "1",
                     "style": "stroke-dasharray: 19.9px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: .3s, .3s, .3s, .06s;",
@@ -779,7 +779,7 @@ LoadedCheerio {
                       "d": "M 0,0.5
          L 100,0.5",
                       "fill-opacity": "0",
-                      "stroke": "var(--accent-color-10)",
+                      "stroke": "var(--accent-background1-color)",
                       "stroke-linecap": "square",
                       "stroke-width": "1",
                     },
@@ -879,7 +879,7 @@ LoadedCheerio {
                 "d": "M 0,0.5
          L 100,0.5",
                 "fill-opacity": "0",
-                "stroke": "var(--accent-color-10)",
+                "stroke": "var(--accent-background1-color)",
                 "stroke-linecap": "butt",
                 "stroke-width": "1",
               },
@@ -892,7 +892,7 @@ LoadedCheerio {
                   "d": "M 0,0.5
          L 100,0.5",
                   "fill-opacity": "0",
-                  "stroke": "var(--primary-color-60)",
+                  "stroke": "var(--primary-tertiary-color)",
                   "stroke-linecap": "butt",
                   "stroke-width": "1",
                   "style": "stroke-dasharray: 20px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: .3s, .3s, .3s, .06s;",
@@ -949,7 +949,7 @@ LoadedCheerio {
                 "d": "M 0,0.5
          L 100,0.5",
                 "fill-opacity": "0",
-                "stroke": "var(--primary-color-60)",
+                "stroke": "var(--primary-tertiary-color)",
                 "stroke-linecap": "butt",
                 "stroke-width": "1",
                 "style": "stroke-dasharray: 20px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: .3s, .3s, .3s, .06s;",
@@ -965,7 +965,7 @@ LoadedCheerio {
                   "d": "M 0,0.5
          L 100,0.5",
                   "fill-opacity": "0",
-                  "stroke": "var(--accent-color-10)",
+                  "stroke": "var(--accent-background1-color)",
                   "stroke-linecap": "butt",
                   "stroke-width": "1",
                 },
@@ -1048,7 +1048,7 @@ LoadedCheerio {
               "d": "M 0.5,0.5
          L 99.5,0.5",
               "fill-opacity": "0",
-              "stroke": "var(--accent-color-10)",
+              "stroke": "var(--accent-background1-color)",
               "stroke-linecap": "round",
               "stroke-width": "1",
             },
@@ -1061,7 +1061,7 @@ LoadedCheerio {
                 "d": "M 0.5,0.5
          L 99.5,0.5",
                 "fill-opacity": "0",
-                "stroke": "var(--primary-color-60)",
+                "stroke": "var(--primary-tertiary-color)",
                 "stroke-linecap": "round",
                 "stroke-width": "1",
                 "style": "stroke-dasharray: 19.8px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: .3s, .3s, .3s, .06s;",
@@ -1118,7 +1118,7 @@ LoadedCheerio {
               "d": "M 0.5,0.5
          L 99.5,0.5",
               "fill-opacity": "0",
-              "stroke": "var(--primary-color-60)",
+              "stroke": "var(--primary-tertiary-color)",
               "stroke-linecap": "round",
               "stroke-width": "1",
               "style": "stroke-dasharray: 19.8px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: .3s, .3s, .3s, .06s;",
@@ -1134,7 +1134,7 @@ LoadedCheerio {
                 "d": "M 0.5,0.5
          L 99.5,0.5",
                 "fill-opacity": "0",
-                "stroke": "var(--accent-color-10)",
+                "stroke": "var(--accent-background1-color)",
                 "stroke-linecap": "round",
                 "stroke-width": "1",
               },
@@ -1203,7 +1203,7 @@ LoadedCheerio {
                   "d": "M 0,0.5
          L 100,0.5",
                   "fill-opacity": "0",
-                  "stroke": "var(--accent-color-10)",
+                  "stroke": "var(--accent-background1-color)",
                   "stroke-linecap": "square",
                   "stroke-width": "1",
                 },
@@ -1216,7 +1216,7 @@ LoadedCheerio {
                     "d": "M 0,0.5
          L 100,0.5",
                     "fill-opacity": "0",
-                    "stroke": "var(--primary-color-60)",
+                    "stroke": "var(--primary-tertiary-color)",
                     "stroke-linecap": "square",
                     "stroke-width": "1",
                     "style": "stroke-dasharray: 19.9px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: .3s, .3s, .3s, .06s;",
@@ -1273,7 +1273,7 @@ LoadedCheerio {
                   "d": "M 0,0.5
          L 100,0.5",
                   "fill-opacity": "0",
-                  "stroke": "var(--primary-color-60)",
+                  "stroke": "var(--primary-tertiary-color)",
                   "stroke-linecap": "square",
                   "stroke-width": "1",
                   "style": "stroke-dasharray: 19.9px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: .3s, .3s, .3s, .06s;",
@@ -1289,7 +1289,7 @@ LoadedCheerio {
                     "d": "M 0,0.5
          L 100,0.5",
                     "fill-opacity": "0",
-                    "stroke": "var(--accent-color-10)",
+                    "stroke": "var(--accent-background1-color)",
                     "stroke-linecap": "square",
                     "stroke-width": "1",
                   },
@@ -1382,7 +1382,7 @@ LoadedCheerio {
                   "d": "M 0,0.5
          L 100,0.5",
                   "fill-opacity": "0",
-                  "stroke": "var(--accent-color-10)",
+                  "stroke": "var(--accent-background1-color)",
                   "stroke-linecap": "butt",
                   "stroke-width": "1",
                 },
@@ -1395,7 +1395,7 @@ LoadedCheerio {
                     "d": "M 0,0.5
          L 100,0.5",
                     "fill-opacity": "0",
-                    "stroke": "var(--primary-color-60)",
+                    "stroke": "var(--primary-tertiary-color)",
                     "stroke-linecap": "butt",
                     "stroke-width": "1",
                     "style": "stroke-dasharray: 20px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: .3s, .3s, .3s, .06s;",
@@ -1452,7 +1452,7 @@ LoadedCheerio {
                   "d": "M 0,0.5
          L 100,0.5",
                   "fill-opacity": "0",
-                  "stroke": "var(--primary-color-60)",
+                  "stroke": "var(--primary-tertiary-color)",
                   "stroke-linecap": "butt",
                   "stroke-width": "1",
                   "style": "stroke-dasharray: 20px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: .3s, .3s, .3s, .06s;",
@@ -1468,7 +1468,7 @@ LoadedCheerio {
                     "d": "M 0,0.5
          L 100,0.5",
                     "fill-opacity": "0",
-                    "stroke": "var(--accent-color-10)",
+                    "stroke": "var(--accent-background1-color)",
                     "stroke-linecap": "butt",
                     "stroke-width": "1",
                   },
@@ -1568,7 +1568,7 @@ LoadedCheerio {
                 "d": "M 0,0.5
          L 100,0.5",
                 "fill-opacity": "0",
-                "stroke": "var(--accent-color-10)",
+                "stroke": "var(--accent-background1-color)",
                 "stroke-linecap": "square",
                 "stroke-width": "1",
               },
@@ -1581,7 +1581,7 @@ LoadedCheerio {
                   "d": "M 0,0.5
          L 100,0.5",
                   "fill-opacity": "0",
-                  "stroke": "var(--primary-color-60)",
+                  "stroke": "var(--primary-tertiary-color)",
                   "stroke-linecap": "square",
                   "stroke-width": "1",
                   "style": "stroke-dasharray: 19.9px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: .3s, .3s, .3s, .06s;",
@@ -1638,7 +1638,7 @@ LoadedCheerio {
                 "d": "M 0,0.5
          L 100,0.5",
                 "fill-opacity": "0",
-                "stroke": "var(--primary-color-60)",
+                "stroke": "var(--primary-tertiary-color)",
                 "stroke-linecap": "square",
                 "stroke-width": "1",
                 "style": "stroke-dasharray: 19.9px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: .3s, .3s, .3s, .06s;",
@@ -1654,7 +1654,7 @@ LoadedCheerio {
                   "d": "M 0,0.5
          L 100,0.5",
                   "fill-opacity": "0",
-                  "stroke": "var(--accent-color-10)",
+                  "stroke": "var(--accent-background1-color)",
                   "stroke-linecap": "square",
                   "stroke-width": "1",
                 },
@@ -1734,7 +1734,7 @@ LoadedCheerio {
                 "d": "M 0.5,0.5
          L 99.5,0.5",
                 "fill-opacity": "0",
-                "stroke": "var(--accent-color-10)",
+                "stroke": "var(--accent-background1-color)",
                 "stroke-linecap": "round",
                 "stroke-width": "1",
               },
@@ -1747,7 +1747,7 @@ LoadedCheerio {
                   "d": "M 0.5,0.5
          L 99.5,0.5",
                   "fill-opacity": "0",
-                  "stroke": "var(--primary-color-60)",
+                  "stroke": "var(--primary-tertiary-color)",
                   "stroke-linecap": "round",
                   "stroke-width": "1",
                   "style": "stroke-dasharray: 19.8px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: .3s, .3s, .3s, .06s;",
@@ -1804,7 +1804,7 @@ LoadedCheerio {
                 "d": "M 0.5,0.5
          L 99.5,0.5",
                 "fill-opacity": "0",
-                "stroke": "var(--primary-color-60)",
+                "stroke": "var(--primary-tertiary-color)",
                 "stroke-linecap": "round",
                 "stroke-width": "1",
                 "style": "stroke-dasharray: 19.8px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: .3s, .3s, .3s, .06s;",
@@ -1820,7 +1820,7 @@ LoadedCheerio {
                   "d": "M 0.5,0.5
          L 99.5,0.5",
                   "fill-opacity": "0",
-                  "stroke": "var(--accent-color-10)",
+                  "stroke": "var(--accent-background1-color)",
                   "stroke-linecap": "round",
                   "stroke-width": "1",
                 },
@@ -1893,7 +1893,7 @@ LoadedCheerio {
                     "d": "M 0,0.5
          L 100,0.5",
                     "fill-opacity": "0",
-                    "stroke": "var(--accent-color-10)",
+                    "stroke": "var(--accent-background1-color)",
                     "stroke-linecap": "butt",
                     "stroke-width": "1",
                   },
@@ -1906,7 +1906,7 @@ LoadedCheerio {
                       "d": "M 0,0.5
          L 100,0.5",
                       "fill-opacity": "0",
-                      "stroke": "var(--primary-color-60)",
+                      "stroke": "var(--primary-tertiary-color)",
                       "stroke-linecap": "butt",
                       "stroke-width": "1",
                       "style": "stroke-dasharray: 20px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: .3s, .3s, .3s, .06s;",
@@ -1963,7 +1963,7 @@ LoadedCheerio {
                     "d": "M 0,0.5
          L 100,0.5",
                     "fill-opacity": "0",
-                    "stroke": "var(--primary-color-60)",
+                    "stroke": "var(--primary-tertiary-color)",
                     "stroke-linecap": "butt",
                     "stroke-width": "1",
                     "style": "stroke-dasharray: 20px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: .3s, .3s, .3s, .06s;",
@@ -1979,7 +1979,7 @@ LoadedCheerio {
                       "d": "M 0,0.5
          L 100,0.5",
                       "fill-opacity": "0",
-                      "stroke": "var(--accent-color-10)",
+                      "stroke": "var(--accent-background1-color)",
                       "stroke-linecap": "butt",
                       "stroke-width": "1",
                     },
@@ -2078,7 +2078,7 @@ LoadedCheerio {
               "d": "M 0,0.5
          L 100,0.5",
               "fill-opacity": "0",
-              "stroke": "var(--accent-color-10)",
+              "stroke": "var(--accent-background1-color)",
               "stroke-linecap": "square",
               "stroke-width": "1",
             },
@@ -2091,7 +2091,7 @@ LoadedCheerio {
                 "d": "M 0,0.5
          L 100,0.5",
                 "fill-opacity": "0",
-                "stroke": "var(--primary-color-60)",
+                "stroke": "var(--primary-tertiary-color)",
                 "stroke-linecap": "square",
                 "stroke-width": "1",
                 "style": "stroke-dasharray: 19.9px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: .3s, .3s, .3s, .06s;",
@@ -2148,7 +2148,7 @@ LoadedCheerio {
               "d": "M 0,0.5
          L 100,0.5",
               "fill-opacity": "0",
-              "stroke": "var(--primary-color-60)",
+              "stroke": "var(--primary-tertiary-color)",
               "stroke-linecap": "square",
               "stroke-width": "1",
               "style": "stroke-dasharray: 19.9px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: .3s, .3s, .3s, .06s;",
@@ -2164,7 +2164,7 @@ LoadedCheerio {
                 "d": "M 0,0.5
          L 100,0.5",
                 "fill-opacity": "0",
-                "stroke": "var(--accent-color-10)",
+                "stroke": "var(--accent-background1-color)",
                 "stroke-linecap": "square",
                 "stroke-width": "1",
               },
@@ -2237,7 +2237,7 @@ LoadedCheerio {
                   "d": "M 0.5,0.5
          L 99.5,0.5",
                   "fill-opacity": "0",
-                  "stroke": "var(--accent-color-10)",
+                  "stroke": "var(--accent-background1-color)",
                   "stroke-linecap": "round",
                   "stroke-width": "1",
                 },
@@ -2250,7 +2250,7 @@ LoadedCheerio {
                     "d": "M 0.5,0.5
          L 99.5,0.5",
                     "fill-opacity": "0",
-                    "stroke": "var(--primary-color-60)",
+                    "stroke": "var(--primary-tertiary-color)",
                     "stroke-linecap": "round",
                     "stroke-width": "1",
                     "style": "stroke-dasharray: 19.8px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: .3s, .3s, .3s, .06s;",
@@ -2307,7 +2307,7 @@ LoadedCheerio {
                   "d": "M 0.5,0.5
          L 99.5,0.5",
                   "fill-opacity": "0",
-                  "stroke": "var(--primary-color-60)",
+                  "stroke": "var(--primary-tertiary-color)",
                   "stroke-linecap": "round",
                   "stroke-width": "1",
                   "style": "stroke-dasharray: 19.8px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: .3s, .3s, .3s, .06s;",
@@ -2323,7 +2323,7 @@ LoadedCheerio {
                     "d": "M 0.5,0.5
          L 99.5,0.5",
                     "fill-opacity": "0",
-                    "stroke": "var(--accent-color-10)",
+                    "stroke": "var(--accent-background1-color)",
                     "stroke-linecap": "round",
                     "stroke-width": "1",
                   },
@@ -2396,7 +2396,7 @@ LoadedCheerio {
                       "d": "M 0,0.5
          L 100,0.5",
                       "fill-opacity": "0",
-                      "stroke": "var(--accent-color-10)",
+                      "stroke": "var(--accent-background1-color)",
                       "stroke-linecap": "butt",
                       "stroke-width": "1",
                     },
@@ -2409,7 +2409,7 @@ LoadedCheerio {
                         "d": "M 0,0.5
          L 100,0.5",
                         "fill-opacity": "0",
-                        "stroke": "var(--primary-color-60)",
+                        "stroke": "var(--primary-tertiary-color)",
                         "stroke-linecap": "butt",
                         "stroke-width": "1",
                         "style": "stroke-dasharray: 20px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: .3s, .3s, .3s, .06s;",
@@ -2466,7 +2466,7 @@ LoadedCheerio {
                       "d": "M 0,0.5
          L 100,0.5",
                       "fill-opacity": "0",
-                      "stroke": "var(--primary-color-60)",
+                      "stroke": "var(--primary-tertiary-color)",
                       "stroke-linecap": "butt",
                       "stroke-width": "1",
                       "style": "stroke-dasharray: 20px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: .3s, .3s, .3s, .06s;",
@@ -2482,7 +2482,7 @@ LoadedCheerio {
                         "d": "M 0,0.5
          L 100,0.5",
                         "fill-opacity": "0",
-                        "stroke": "var(--accent-color-10)",
+                        "stroke": "var(--accent-background1-color)",
                         "stroke-linecap": "butt",
                         "stroke-width": "1",
                       },
@@ -2820,10 +2820,10 @@ LoadedCheerio {
                 "cx": "50",
                 "cy": "50",
                 "r": "50",
-                "stroke": "var(--accent-color-10)",
+                "stroke": "var(--accent-background1-color)",
                 "stroke-linecap": "round",
                 "stroke-width": "1",
-                "style": "stroke: var(--accent-color-10); stroke-dasharray: 314.1592653589793px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                "style": "stroke: var(--accent-background1-color); stroke-dasharray: 314.1592653589793px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
               },
               "children": Array [],
               "name": "circle",
@@ -2906,10 +2906,10 @@ LoadedCheerio {
               "cx": "50",
               "cy": "50",
               "r": "50",
-              "stroke": "var(--accent-color-10)",
+              "stroke": "var(--accent-background1-color)",
               "stroke-linecap": "round",
               "stroke-width": "1",
-              "style": "stroke: var(--accent-color-10); stroke-dasharray: 314.1592653589793px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+              "style": "stroke: var(--accent-background1-color); stroke-dasharray: 314.1592653589793px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
             },
             "children": Array [],
             "name": "circle",
@@ -3128,10 +3128,10 @@ LoadedCheerio {
                 "cx": "50",
                 "cy": "50",
                 "r": "50",
-                "stroke": "var(--accent-color-10)",
+                "stroke": "var(--accent-background1-color)",
                 "stroke-linecap": "round",
                 "stroke-width": "1",
-                "style": "stroke: var(--accent-color-10); stroke-dasharray: 314.1592653589793px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                "style": "stroke: var(--accent-background1-color); stroke-dasharray: 314.1592653589793px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
               },
               "children": Array [],
               "name": "circle",
@@ -3444,10 +3444,10 @@ LoadedCheerio {
                   "cx": "50",
                   "cy": "50",
                   "r": "50",
-                  "stroke": "var(--accent-color-10)",
+                  "stroke": "var(--accent-background1-color)",
                   "stroke-linecap": "round",
                   "stroke-width": "1",
-                  "style": "stroke: var(--accent-color-10); stroke-dasharray: 314.1592653589793px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                  "style": "stroke: var(--accent-background1-color); stroke-dasharray: 314.1592653589793px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                 },
                 "children": Array [],
                 "name": "circle",
@@ -3530,10 +3530,10 @@ LoadedCheerio {
                 "cx": "50",
                 "cy": "50",
                 "r": "50",
-                "stroke": "var(--accent-color-10)",
+                "stroke": "var(--accent-background1-color)",
                 "stroke-linecap": "round",
                 "stroke-width": "1",
-                "style": "stroke: var(--accent-color-10); stroke-dasharray: 314.1592653589793px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                "style": "stroke: var(--accent-background1-color); stroke-dasharray: 314.1592653589793px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
               },
               "children": Array [],
               "name": "circle",
@@ -3752,10 +3752,10 @@ LoadedCheerio {
                   "cx": "50",
                   "cy": "50",
                   "r": "50",
-                  "stroke": "var(--accent-color-10)",
+                  "stroke": "var(--accent-background1-color)",
                   "stroke-linecap": "round",
                   "stroke-width": "1",
-                  "style": "stroke: var(--accent-color-10); stroke-dasharray: 314.1592653589793px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                  "style": "stroke: var(--accent-background1-color); stroke-dasharray: 314.1592653589793px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                 },
                 "children": Array [],
                 "name": "circle",
@@ -4093,10 +4093,10 @@ LoadedCheerio {
                 "cx": "50",
                 "cy": "50",
                 "r": "50",
-                "stroke": "var(--accent-color-10)",
+                "stroke": "var(--accent-background1-color)",
                 "stroke-linecap": "round",
                 "stroke-width": "1",
-                "style": "stroke: var(--accent-color-10); stroke-dasharray: 314.1592653589793px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                "style": "stroke: var(--accent-background1-color); stroke-dasharray: 314.1592653589793px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
               },
               "children": Array [],
               "name": "circle",
@@ -4179,10 +4179,10 @@ LoadedCheerio {
               "cx": "50",
               "cy": "50",
               "r": "50",
-              "stroke": "var(--accent-color-10)",
+              "stroke": "var(--accent-background1-color)",
               "stroke-linecap": "round",
               "stroke-width": "1",
-              "style": "stroke: var(--accent-color-10); stroke-dasharray: 314.1592653589793px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+              "style": "stroke: var(--accent-background1-color); stroke-dasharray: 314.1592653589793px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
             },
             "children": Array [],
             "name": "circle",
@@ -4401,10 +4401,10 @@ LoadedCheerio {
                 "cx": "50",
                 "cy": "50",
                 "r": "50",
-                "stroke": "var(--accent-color-10)",
+                "stroke": "var(--accent-background1-color)",
                 "stroke-linecap": "round",
                 "stroke-width": "1",
-                "style": "stroke: var(--accent-color-10); stroke-dasharray: 314.1592653589793px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                "style": "stroke: var(--accent-background1-color); stroke-dasharray: 314.1592653589793px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
               },
               "children": Array [],
               "name": "circle",
@@ -4719,10 +4719,10 @@ LoadedCheerio {
                   "cx": "50",
                   "cy": "50",
                   "r": "50",
-                  "stroke": "var(--accent-color-10)",
+                  "stroke": "var(--accent-background1-color)",
                   "stroke-linecap": "round",
                   "stroke-width": "1",
-                  "style": "stroke: var(--accent-color-10); stroke-dasharray: 314.1592653589793px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                  "style": "stroke: var(--accent-background1-color); stroke-dasharray: 314.1592653589793px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                 },
                 "children": Array [],
                 "name": "circle",
@@ -4805,10 +4805,10 @@ LoadedCheerio {
                 "cx": "50",
                 "cy": "50",
                 "r": "50",
-                "stroke": "var(--accent-color-10)",
+                "stroke": "var(--accent-background1-color)",
                 "stroke-linecap": "round",
                 "stroke-width": "1",
-                "style": "stroke: var(--accent-color-10); stroke-dasharray: 314.1592653589793px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                "style": "stroke: var(--accent-background1-color); stroke-dasharray: 314.1592653589793px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
               },
               "children": Array [],
               "name": "circle",
@@ -5027,10 +5027,10 @@ LoadedCheerio {
                   "cx": "50",
                   "cy": "50",
                   "r": "50",
-                  "stroke": "var(--accent-color-10)",
+                  "stroke": "var(--accent-background1-color)",
                   "stroke-linecap": "round",
                   "stroke-width": "1",
-                  "style": "stroke: var(--accent-color-10); stroke-dasharray: 314.1592653589793px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                  "style": "stroke: var(--accent-background1-color); stroke-dasharray: 314.1592653589793px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                 },
                 "children": Array [],
                 "name": "circle",
@@ -5356,10 +5356,10 @@ LoadedCheerio {
               "cx": "50",
               "cy": "50",
               "r": "50",
-              "stroke": "var(--accent-color-10)",
+              "stroke": "var(--accent-background1-color)",
               "stroke-linecap": "square",
               "stroke-width": "1",
-              "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+              "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
             },
             "children": Array [],
             "name": "circle",
@@ -5373,7 +5373,7 @@ LoadedCheerio {
                 "r": "50",
                 "stroke-linecap": "square",
                 "stroke-width": "6",
-                "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
               },
               "children": Array [],
               "name": "circle",
@@ -5436,7 +5436,7 @@ LoadedCheerio {
               "r": "50",
               "stroke-linecap": "square",
               "stroke-width": "6",
-              "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+              "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
             },
             "children": Array [],
             "name": "circle",
@@ -5449,10 +5449,10 @@ LoadedCheerio {
                 "cx": "50",
                 "cy": "50",
                 "r": "50",
-                "stroke": "var(--accent-color-10)",
+                "stroke": "var(--accent-background1-color)",
                 "stroke-linecap": "square",
                 "stroke-width": "1",
-                "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
               },
               "children": Array [],
               "name": "circle",
@@ -5519,10 +5519,10 @@ LoadedCheerio {
                 "cx": "50",
                 "cy": "50",
                 "r": "50",
-                "stroke": "var(--accent-color-10)",
+                "stroke": "var(--accent-background1-color)",
                 "stroke-linecap": "square",
                 "stroke-width": "1",
-                "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
               },
               "children": Array [],
               "name": "circle",
@@ -5536,7 +5536,7 @@ LoadedCheerio {
                   "r": "50",
                   "stroke-linecap": "square",
                   "stroke-width": "6",
-                  "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                  "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                 },
                 "children": Array [],
                 "name": "circle",
@@ -5599,7 +5599,7 @@ LoadedCheerio {
                 "r": "50",
                 "stroke-linecap": "square",
                 "stroke-width": "6",
-                "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
               },
               "children": Array [],
               "name": "circle",
@@ -5612,10 +5612,10 @@ LoadedCheerio {
                   "cx": "50",
                   "cy": "50",
                   "r": "50",
-                  "stroke": "var(--accent-color-10)",
+                  "stroke": "var(--accent-background1-color)",
                   "stroke-linecap": "square",
                   "stroke-width": "1",
-                  "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                  "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                 },
                 "children": Array [],
                 "name": "circle",
@@ -5682,10 +5682,10 @@ LoadedCheerio {
                   "cx": "50",
                   "cy": "50",
                   "r": "50",
-                  "stroke": "var(--accent-color-10)",
+                  "stroke": "var(--accent-background1-color)",
                   "stroke-linecap": "square",
                   "stroke-width": "1",
-                  "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                  "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                 },
                 "children": Array [],
                 "name": "circle",
@@ -5699,7 +5699,7 @@ LoadedCheerio {
                     "r": "50",
                     "stroke-linecap": "square",
                     "stroke-width": "6",
-                    "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                    "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                   },
                   "children": Array [],
                   "name": "circle",
@@ -5762,7 +5762,7 @@ LoadedCheerio {
                   "r": "50",
                   "stroke-linecap": "square",
                   "stroke-width": "6",
-                  "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                  "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                 },
                 "children": Array [],
                 "name": "circle",
@@ -5775,10 +5775,10 @@ LoadedCheerio {
                     "cx": "50",
                     "cy": "50",
                     "r": "50",
-                    "stroke": "var(--accent-color-10)",
+                    "stroke": "var(--accent-background1-color)",
                     "stroke-linecap": "square",
                     "stroke-width": "1",
-                    "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                    "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                   },
                   "children": Array [],
                   "name": "circle",
@@ -5845,10 +5845,10 @@ LoadedCheerio {
                     "cx": "50",
                     "cy": "50",
                     "r": "50",
-                    "stroke": "var(--accent-color-10)",
+                    "stroke": "var(--accent-background1-color)",
                     "stroke-linecap": "square",
                     "stroke-width": "1",
-                    "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                    "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                   },
                   "children": Array [],
                   "name": "circle",
@@ -5862,7 +5862,7 @@ LoadedCheerio {
                       "r": "50",
                       "stroke-linecap": "square",
                       "stroke-width": "6",
-                      "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                      "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                     },
                     "children": Array [],
                     "name": "circle",
@@ -5925,7 +5925,7 @@ LoadedCheerio {
                     "r": "50",
                     "stroke-linecap": "square",
                     "stroke-width": "6",
-                    "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                    "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                   },
                   "children": Array [],
                   "name": "circle",
@@ -5938,10 +5938,10 @@ LoadedCheerio {
                       "cx": "50",
                       "cy": "50",
                       "r": "50",
-                      "stroke": "var(--accent-color-10)",
+                      "stroke": "var(--accent-background1-color)",
                       "stroke-linecap": "square",
                       "stroke-width": "1",
-                      "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                      "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                     },
                     "children": Array [],
                     "name": "circle",
@@ -6008,10 +6008,10 @@ LoadedCheerio {
                       "cx": "50",
                       "cy": "50",
                       "r": "50",
-                      "stroke": "var(--accent-color-10)",
+                      "stroke": "var(--accent-background1-color)",
                       "stroke-linecap": "round",
                       "stroke-width": "1",
-                      "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                      "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                     },
                     "children": Array [],
                     "name": "circle",
@@ -6025,7 +6025,7 @@ LoadedCheerio {
                         "r": "50",
                         "stroke-linecap": "round",
                         "stroke-width": "6",
-                        "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 180.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                        "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 180.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                       },
                       "children": Array [],
                       "name": "circle",
@@ -6088,7 +6088,7 @@ LoadedCheerio {
                       "r": "50",
                       "stroke-linecap": "round",
                       "stroke-width": "6",
-                      "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 180.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                      "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 180.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                     },
                     "children": Array [],
                     "name": "circle",
@@ -6101,10 +6101,10 @@ LoadedCheerio {
                         "cx": "50",
                         "cy": "50",
                         "r": "50",
-                        "stroke": "var(--accent-color-10)",
+                        "stroke": "var(--accent-background1-color)",
                         "stroke-linecap": "round",
                         "stroke-width": "1",
-                        "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                        "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                       },
                       "children": Array [],
                       "name": "circle",
@@ -6171,10 +6171,10 @@ LoadedCheerio {
                         "cx": "50",
                         "cy": "50",
                         "r": "50",
-                        "stroke": "var(--accent-color-10)",
+                        "stroke": "var(--accent-background1-color)",
                         "stroke-linecap": "butt",
                         "stroke-width": "1",
-                        "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                        "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                       },
                       "children": Array [],
                       "name": "circle",
@@ -6188,7 +6188,7 @@ LoadedCheerio {
                           "r": "50",
                           "stroke-linecap": "butt",
                           "stroke-width": "6",
-                          "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                          "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                         },
                         "children": Array [],
                         "name": "circle",
@@ -6251,7 +6251,7 @@ LoadedCheerio {
                         "r": "50",
                         "stroke-linecap": "butt",
                         "stroke-width": "6",
-                        "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                        "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                       },
                       "children": Array [],
                       "name": "circle",
@@ -6264,10 +6264,10 @@ LoadedCheerio {
                           "cx": "50",
                           "cy": "50",
                           "r": "50",
-                          "stroke": "var(--accent-color-10)",
+                          "stroke": "var(--accent-background1-color)",
                           "stroke-linecap": "butt",
                           "stroke-width": "1",
-                          "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                          "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                         },
                         "children": Array [],
                         "name": "circle",
@@ -6407,10 +6407,10 @@ LoadedCheerio {
               "cx": "50",
               "cy": "50",
               "r": "50",
-              "stroke": "var(--accent-color-10)",
+              "stroke": "var(--accent-background1-color)",
               "stroke-linecap": "square",
               "stroke-width": "1",
-              "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+              "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
             },
             "children": Array [],
             "name": "circle",
@@ -6424,7 +6424,7 @@ LoadedCheerio {
                 "r": "50",
                 "stroke-linecap": "square",
                 "stroke-width": "6",
-                "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
               },
               "children": Array [],
               "name": "circle",
@@ -6487,7 +6487,7 @@ LoadedCheerio {
               "r": "50",
               "stroke-linecap": "square",
               "stroke-width": "6",
-              "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+              "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
             },
             "children": Array [],
             "name": "circle",
@@ -6500,10 +6500,10 @@ LoadedCheerio {
                 "cx": "50",
                 "cy": "50",
                 "r": "50",
-                "stroke": "var(--accent-color-10)",
+                "stroke": "var(--accent-background1-color)",
                 "stroke-linecap": "square",
                 "stroke-width": "1",
-                "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
               },
               "children": Array [],
               "name": "circle",
@@ -6570,10 +6570,10 @@ LoadedCheerio {
                 "cx": "50",
                 "cy": "50",
                 "r": "50",
-                "stroke": "var(--accent-color-10)",
+                "stroke": "var(--accent-background1-color)",
                 "stroke-linecap": "square",
                 "stroke-width": "1",
-                "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
               },
               "children": Array [],
               "name": "circle",
@@ -6587,7 +6587,7 @@ LoadedCheerio {
                   "r": "50",
                   "stroke-linecap": "square",
                   "stroke-width": "6",
-                  "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                  "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                 },
                 "children": Array [],
                 "name": "circle",
@@ -6650,7 +6650,7 @@ LoadedCheerio {
                 "r": "50",
                 "stroke-linecap": "square",
                 "stroke-width": "6",
-                "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
               },
               "children": Array [],
               "name": "circle",
@@ -6663,10 +6663,10 @@ LoadedCheerio {
                   "cx": "50",
                   "cy": "50",
                   "r": "50",
-                  "stroke": "var(--accent-color-10)",
+                  "stroke": "var(--accent-background1-color)",
                   "stroke-linecap": "square",
                   "stroke-width": "1",
-                  "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                  "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                 },
                 "children": Array [],
                 "name": "circle",
@@ -6733,10 +6733,10 @@ LoadedCheerio {
                   "cx": "50",
                   "cy": "50",
                   "r": "50",
-                  "stroke": "var(--accent-color-10)",
+                  "stroke": "var(--accent-background1-color)",
                   "stroke-linecap": "square",
                   "stroke-width": "1",
-                  "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                  "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                 },
                 "children": Array [],
                 "name": "circle",
@@ -6750,7 +6750,7 @@ LoadedCheerio {
                     "r": "50",
                     "stroke-linecap": "square",
                     "stroke-width": "6",
-                    "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                    "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                   },
                   "children": Array [],
                   "name": "circle",
@@ -6813,7 +6813,7 @@ LoadedCheerio {
                   "r": "50",
                   "stroke-linecap": "square",
                   "stroke-width": "6",
-                  "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                  "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                 },
                 "children": Array [],
                 "name": "circle",
@@ -6826,10 +6826,10 @@ LoadedCheerio {
                     "cx": "50",
                     "cy": "50",
                     "r": "50",
-                    "stroke": "var(--accent-color-10)",
+                    "stroke": "var(--accent-background1-color)",
                     "stroke-linecap": "square",
                     "stroke-width": "1",
-                    "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                    "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                   },
                   "children": Array [],
                   "name": "circle",
@@ -6896,10 +6896,10 @@ LoadedCheerio {
                     "cx": "50",
                     "cy": "50",
                     "r": "50",
-                    "stroke": "var(--accent-color-10)",
+                    "stroke": "var(--accent-background1-color)",
                     "stroke-linecap": "round",
                     "stroke-width": "1",
-                    "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                    "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                   },
                   "children": Array [],
                   "name": "circle",
@@ -6913,7 +6913,7 @@ LoadedCheerio {
                       "r": "50",
                       "stroke-linecap": "round",
                       "stroke-width": "6",
-                      "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 180.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                      "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 180.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                     },
                     "children": Array [],
                     "name": "circle",
@@ -6976,7 +6976,7 @@ LoadedCheerio {
                     "r": "50",
                     "stroke-linecap": "round",
                     "stroke-width": "6",
-                    "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 180.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                    "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 180.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                   },
                   "children": Array [],
                   "name": "circle",
@@ -6989,10 +6989,10 @@ LoadedCheerio {
                       "cx": "50",
                       "cy": "50",
                       "r": "50",
-                      "stroke": "var(--accent-color-10)",
+                      "stroke": "var(--accent-background1-color)",
                       "stroke-linecap": "round",
                       "stroke-width": "1",
-                      "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                      "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                     },
                     "children": Array [],
                     "name": "circle",
@@ -7059,10 +7059,10 @@ LoadedCheerio {
                       "cx": "50",
                       "cy": "50",
                       "r": "50",
-                      "stroke": "var(--accent-color-10)",
+                      "stroke": "var(--accent-background1-color)",
                       "stroke-linecap": "butt",
                       "stroke-width": "1",
-                      "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                      "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                     },
                     "children": Array [],
                     "name": "circle",
@@ -7076,7 +7076,7 @@ LoadedCheerio {
                         "r": "50",
                         "stroke-linecap": "butt",
                         "stroke-width": "6",
-                        "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                        "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                       },
                       "children": Array [],
                       "name": "circle",
@@ -7139,7 +7139,7 @@ LoadedCheerio {
                       "r": "50",
                       "stroke-linecap": "butt",
                       "stroke-width": "6",
-                      "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                      "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                     },
                     "children": Array [],
                     "name": "circle",
@@ -7152,10 +7152,10 @@ LoadedCheerio {
                         "cx": "50",
                         "cy": "50",
                         "r": "50",
-                        "stroke": "var(--accent-color-10)",
+                        "stroke": "var(--accent-background1-color)",
                         "stroke-linecap": "butt",
                         "stroke-width": "1",
-                        "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                        "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                       },
                       "children": Array [],
                       "name": "circle",
@@ -7272,10 +7272,10 @@ LoadedCheerio {
                 "cx": "50",
                 "cy": "50",
                 "r": "50",
-                "stroke": "var(--accent-color-10)",
+                "stroke": "var(--accent-background1-color)",
                 "stroke-linecap": "square",
                 "stroke-width": "1",
-                "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
               },
               "children": Array [],
               "name": "circle",
@@ -7289,7 +7289,7 @@ LoadedCheerio {
                   "r": "50",
                   "stroke-linecap": "square",
                   "stroke-width": "6",
-                  "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                  "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                 },
                 "children": Array [],
                 "name": "circle",
@@ -7352,7 +7352,7 @@ LoadedCheerio {
                 "r": "50",
                 "stroke-linecap": "square",
                 "stroke-width": "6",
-                "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
               },
               "children": Array [],
               "name": "circle",
@@ -7365,10 +7365,10 @@ LoadedCheerio {
                   "cx": "50",
                   "cy": "50",
                   "r": "50",
-                  "stroke": "var(--accent-color-10)",
+                  "stroke": "var(--accent-background1-color)",
                   "stroke-linecap": "square",
                   "stroke-width": "1",
-                  "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                  "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                 },
                 "children": Array [],
                 "name": "circle",
@@ -7458,10 +7458,10 @@ LoadedCheerio {
               "cx": "50",
               "cy": "50",
               "r": "50",
-              "stroke": "var(--accent-color-10)",
+              "stroke": "var(--accent-background1-color)",
               "stroke-linecap": "square",
               "stroke-width": "1",
-              "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+              "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
             },
             "children": Array [],
             "name": "circle",
@@ -7475,7 +7475,7 @@ LoadedCheerio {
                 "r": "50",
                 "stroke-linecap": "square",
                 "stroke-width": "6",
-                "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
               },
               "children": Array [],
               "name": "circle",
@@ -7538,7 +7538,7 @@ LoadedCheerio {
               "r": "50",
               "stroke-linecap": "square",
               "stroke-width": "6",
-              "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+              "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
             },
             "children": Array [],
             "name": "circle",
@@ -7551,10 +7551,10 @@ LoadedCheerio {
                 "cx": "50",
                 "cy": "50",
                 "r": "50",
-                "stroke": "var(--accent-color-10)",
+                "stroke": "var(--accent-background1-color)",
                 "stroke-linecap": "square",
                 "stroke-width": "1",
-                "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
               },
               "children": Array [],
               "name": "circle",
@@ -7621,10 +7621,10 @@ LoadedCheerio {
                 "cx": "50",
                 "cy": "50",
                 "r": "50",
-                "stroke": "var(--accent-color-10)",
+                "stroke": "var(--accent-background1-color)",
                 "stroke-linecap": "square",
                 "stroke-width": "1",
-                "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
               },
               "children": Array [],
               "name": "circle",
@@ -7638,7 +7638,7 @@ LoadedCheerio {
                   "r": "50",
                   "stroke-linecap": "square",
                   "stroke-width": "6",
-                  "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                  "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                 },
                 "children": Array [],
                 "name": "circle",
@@ -7701,7 +7701,7 @@ LoadedCheerio {
                 "r": "50",
                 "stroke-linecap": "square",
                 "stroke-width": "6",
-                "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
               },
               "children": Array [],
               "name": "circle",
@@ -7714,10 +7714,10 @@ LoadedCheerio {
                   "cx": "50",
                   "cy": "50",
                   "r": "50",
-                  "stroke": "var(--accent-color-10)",
+                  "stroke": "var(--accent-background1-color)",
                   "stroke-linecap": "square",
                   "stroke-width": "1",
-                  "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                  "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                 },
                 "children": Array [],
                 "name": "circle",
@@ -7784,10 +7784,10 @@ LoadedCheerio {
                   "cx": "50",
                   "cy": "50",
                   "r": "50",
-                  "stroke": "var(--accent-color-10)",
+                  "stroke": "var(--accent-background1-color)",
                   "stroke-linecap": "round",
                   "stroke-width": "1",
-                  "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                  "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                 },
                 "children": Array [],
                 "name": "circle",
@@ -7801,7 +7801,7 @@ LoadedCheerio {
                     "r": "50",
                     "stroke-linecap": "round",
                     "stroke-width": "6",
-                    "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 180.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                    "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 180.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                   },
                   "children": Array [],
                   "name": "circle",
@@ -7864,7 +7864,7 @@ LoadedCheerio {
                   "r": "50",
                   "stroke-linecap": "round",
                   "stroke-width": "6",
-                  "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 180.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                  "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 180.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                 },
                 "children": Array [],
                 "name": "circle",
@@ -7877,10 +7877,10 @@ LoadedCheerio {
                     "cx": "50",
                     "cy": "50",
                     "r": "50",
-                    "stroke": "var(--accent-color-10)",
+                    "stroke": "var(--accent-background1-color)",
                     "stroke-linecap": "round",
                     "stroke-width": "1",
-                    "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                    "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                   },
                   "children": Array [],
                   "name": "circle",
@@ -7947,10 +7947,10 @@ LoadedCheerio {
                     "cx": "50",
                     "cy": "50",
                     "r": "50",
-                    "stroke": "var(--accent-color-10)",
+                    "stroke": "var(--accent-background1-color)",
                     "stroke-linecap": "butt",
                     "stroke-width": "1",
-                    "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                    "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                   },
                   "children": Array [],
                   "name": "circle",
@@ -7964,7 +7964,7 @@ LoadedCheerio {
                       "r": "50",
                       "stroke-linecap": "butt",
                       "stroke-width": "6",
-                      "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                      "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                     },
                     "children": Array [],
                     "name": "circle",
@@ -8027,7 +8027,7 @@ LoadedCheerio {
                     "r": "50",
                     "stroke-linecap": "butt",
                     "stroke-width": "6",
-                    "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                    "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                   },
                   "children": Array [],
                   "name": "circle",
@@ -8040,10 +8040,10 @@ LoadedCheerio {
                       "cx": "50",
                       "cy": "50",
                       "r": "50",
-                      "stroke": "var(--accent-color-10)",
+                      "stroke": "var(--accent-background1-color)",
                       "stroke-linecap": "butt",
                       "stroke-width": "1",
-                      "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                      "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                     },
                     "children": Array [],
                     "name": "circle",
@@ -8148,10 +8148,10 @@ LoadedCheerio {
                 "cx": "50",
                 "cy": "50",
                 "r": "50",
-                "stroke": "var(--accent-color-10)",
+                "stroke": "var(--accent-background1-color)",
                 "stroke-linecap": "square",
                 "stroke-width": "1",
-                "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
               },
               "children": Array [],
               "name": "circle",
@@ -8165,7 +8165,7 @@ LoadedCheerio {
                   "r": "50",
                   "stroke-linecap": "square",
                   "stroke-width": "6",
-                  "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                  "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                 },
                 "children": Array [],
                 "name": "circle",
@@ -8228,7 +8228,7 @@ LoadedCheerio {
                 "r": "50",
                 "stroke-linecap": "square",
                 "stroke-width": "6",
-                "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
               },
               "children": Array [],
               "name": "circle",
@@ -8241,10 +8241,10 @@ LoadedCheerio {
                   "cx": "50",
                   "cy": "50",
                   "r": "50",
-                  "stroke": "var(--accent-color-10)",
+                  "stroke": "var(--accent-background1-color)",
                   "stroke-linecap": "square",
                   "stroke-width": "1",
-                  "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                  "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                 },
                 "children": Array [],
                 "name": "circle",
@@ -8313,10 +8313,10 @@ LoadedCheerio {
                   "cx": "50",
                   "cy": "50",
                   "r": "50",
-                  "stroke": "var(--accent-color-10)",
+                  "stroke": "var(--accent-background1-color)",
                   "stroke-linecap": "square",
                   "stroke-width": "1",
-                  "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                  "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                 },
                 "children": Array [],
                 "name": "circle",
@@ -8330,7 +8330,7 @@ LoadedCheerio {
                     "r": "50",
                     "stroke-linecap": "square",
                     "stroke-width": "6",
-                    "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                    "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                   },
                   "children": Array [],
                   "name": "circle",
@@ -8393,7 +8393,7 @@ LoadedCheerio {
                   "r": "50",
                   "stroke-linecap": "square",
                   "stroke-width": "6",
-                  "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                  "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                 },
                 "children": Array [],
                 "name": "circle",
@@ -8406,10 +8406,10 @@ LoadedCheerio {
                     "cx": "50",
                     "cy": "50",
                     "r": "50",
-                    "stroke": "var(--accent-color-10)",
+                    "stroke": "var(--accent-background1-color)",
                     "stroke-linecap": "square",
                     "stroke-width": "1",
-                    "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                    "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                   },
                   "children": Array [],
                   "name": "circle",
@@ -8509,10 +8509,10 @@ LoadedCheerio {
               "cx": "50",
               "cy": "50",
               "r": "50",
-              "stroke": "var(--accent-color-10)",
+              "stroke": "var(--accent-background1-color)",
               "stroke-linecap": "square",
               "stroke-width": "1",
-              "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+              "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
             },
             "children": Array [],
             "name": "circle",
@@ -8526,7 +8526,7 @@ LoadedCheerio {
                 "r": "50",
                 "stroke-linecap": "square",
                 "stroke-width": "6",
-                "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
               },
               "children": Array [],
               "name": "circle",
@@ -8589,7 +8589,7 @@ LoadedCheerio {
               "r": "50",
               "stroke-linecap": "square",
               "stroke-width": "6",
-              "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+              "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
             },
             "children": Array [],
             "name": "circle",
@@ -8602,10 +8602,10 @@ LoadedCheerio {
                 "cx": "50",
                 "cy": "50",
                 "r": "50",
-                "stroke": "var(--accent-color-10)",
+                "stroke": "var(--accent-background1-color)",
                 "stroke-linecap": "square",
                 "stroke-width": "1",
-                "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
               },
               "children": Array [],
               "name": "circle",
@@ -8672,10 +8672,10 @@ LoadedCheerio {
                 "cx": "50",
                 "cy": "50",
                 "r": "50",
-                "stroke": "var(--accent-color-10)",
+                "stroke": "var(--accent-background1-color)",
                 "stroke-linecap": "round",
                 "stroke-width": "1",
-                "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
               },
               "children": Array [],
               "name": "circle",
@@ -8689,7 +8689,7 @@ LoadedCheerio {
                   "r": "50",
                   "stroke-linecap": "round",
                   "stroke-width": "6",
-                  "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 180.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                  "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 180.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                 },
                 "children": Array [],
                 "name": "circle",
@@ -8752,7 +8752,7 @@ LoadedCheerio {
                 "r": "50",
                 "stroke-linecap": "round",
                 "stroke-width": "6",
-                "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 180.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 180.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
               },
               "children": Array [],
               "name": "circle",
@@ -8765,10 +8765,10 @@ LoadedCheerio {
                   "cx": "50",
                   "cy": "50",
                   "r": "50",
-                  "stroke": "var(--accent-color-10)",
+                  "stroke": "var(--accent-background1-color)",
                   "stroke-linecap": "round",
                   "stroke-width": "1",
-                  "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                  "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                 },
                 "children": Array [],
                 "name": "circle",
@@ -8835,10 +8835,10 @@ LoadedCheerio {
                   "cx": "50",
                   "cy": "50",
                   "r": "50",
-                  "stroke": "var(--accent-color-10)",
+                  "stroke": "var(--accent-background1-color)",
                   "stroke-linecap": "butt",
                   "stroke-width": "1",
-                  "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                  "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                 },
                 "children": Array [],
                 "name": "circle",
@@ -8852,7 +8852,7 @@ LoadedCheerio {
                     "r": "50",
                     "stroke-linecap": "butt",
                     "stroke-width": "6",
-                    "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                    "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                   },
                   "children": Array [],
                   "name": "circle",
@@ -8915,7 +8915,7 @@ LoadedCheerio {
                   "r": "50",
                   "stroke-linecap": "butt",
                   "stroke-width": "6",
-                  "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                  "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                 },
                 "children": Array [],
                 "name": "circle",
@@ -8928,10 +8928,10 @@ LoadedCheerio {
                     "cx": "50",
                     "cy": "50",
                     "r": "50",
-                    "stroke": "var(--accent-color-10)",
+                    "stroke": "var(--accent-background1-color)",
                     "stroke-linecap": "butt",
                     "stroke-width": "1",
-                    "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                    "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                   },
                   "children": Array [],
                   "name": "circle",
@@ -9024,10 +9024,10 @@ LoadedCheerio {
                 "cx": "50",
                 "cy": "50",
                 "r": "50",
-                "stroke": "var(--accent-color-10)",
+                "stroke": "var(--accent-background1-color)",
                 "stroke-linecap": "square",
                 "stroke-width": "1",
-                "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
               },
               "children": Array [],
               "name": "circle",
@@ -9041,7 +9041,7 @@ LoadedCheerio {
                   "r": "50",
                   "stroke-linecap": "square",
                   "stroke-width": "6",
-                  "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                  "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                 },
                 "children": Array [],
                 "name": "circle",
@@ -9104,7 +9104,7 @@ LoadedCheerio {
                 "r": "50",
                 "stroke-linecap": "square",
                 "stroke-width": "6",
-                "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
               },
               "children": Array [],
               "name": "circle",
@@ -9117,10 +9117,10 @@ LoadedCheerio {
                   "cx": "50",
                   "cy": "50",
                   "r": "50",
-                  "stroke": "var(--accent-color-10)",
+                  "stroke": "var(--accent-background1-color)",
                   "stroke-linecap": "square",
                   "stroke-width": "1",
-                  "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                  "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                 },
                 "children": Array [],
                 "name": "circle",
@@ -9189,10 +9189,10 @@ LoadedCheerio {
                   "cx": "50",
                   "cy": "50",
                   "r": "50",
-                  "stroke": "var(--accent-color-10)",
+                  "stroke": "var(--accent-background1-color)",
                   "stroke-linecap": "square",
                   "stroke-width": "1",
-                  "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                  "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                 },
                 "children": Array [],
                 "name": "circle",
@@ -9206,7 +9206,7 @@ LoadedCheerio {
                     "r": "50",
                     "stroke-linecap": "square",
                     "stroke-width": "6",
-                    "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                    "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                   },
                   "children": Array [],
                   "name": "circle",
@@ -9269,7 +9269,7 @@ LoadedCheerio {
                   "r": "50",
                   "stroke-linecap": "square",
                   "stroke-width": "6",
-                  "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                  "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                 },
                 "children": Array [],
                 "name": "circle",
@@ -9282,10 +9282,10 @@ LoadedCheerio {
                     "cx": "50",
                     "cy": "50",
                     "r": "50",
-                    "stroke": "var(--accent-color-10)",
+                    "stroke": "var(--accent-background1-color)",
                     "stroke-linecap": "square",
                     "stroke-width": "1",
-                    "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                    "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                   },
                   "children": Array [],
                   "name": "circle",
@@ -9354,10 +9354,10 @@ LoadedCheerio {
                     "cx": "50",
                     "cy": "50",
                     "r": "50",
-                    "stroke": "var(--accent-color-10)",
+                    "stroke": "var(--accent-background1-color)",
                     "stroke-linecap": "square",
                     "stroke-width": "1",
-                    "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                    "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                   },
                   "children": Array [],
                   "name": "circle",
@@ -9371,7 +9371,7 @@ LoadedCheerio {
                       "r": "50",
                       "stroke-linecap": "square",
                       "stroke-width": "6",
-                      "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                      "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                     },
                     "children": Array [],
                     "name": "circle",
@@ -9434,7 +9434,7 @@ LoadedCheerio {
                     "r": "50",
                     "stroke-linecap": "square",
                     "stroke-width": "6",
-                    "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                    "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                   },
                   "children": Array [],
                   "name": "circle",
@@ -9447,10 +9447,10 @@ LoadedCheerio {
                       "cx": "50",
                       "cy": "50",
                       "r": "50",
-                      "stroke": "var(--accent-color-10)",
+                      "stroke": "var(--accent-background1-color)",
                       "stroke-linecap": "square",
                       "stroke-width": "1",
-                      "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                      "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                     },
                     "children": Array [],
                     "name": "circle",
@@ -9560,10 +9560,10 @@ LoadedCheerio {
               "cx": "50",
               "cy": "50",
               "r": "50",
-              "stroke": "var(--accent-color-10)",
+              "stroke": "var(--accent-background1-color)",
               "stroke-linecap": "round",
               "stroke-width": "1",
-              "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+              "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
             },
             "children": Array [],
             "name": "circle",
@@ -9577,7 +9577,7 @@ LoadedCheerio {
                 "r": "50",
                 "stroke-linecap": "round",
                 "stroke-width": "6",
-                "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 180.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 180.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
               },
               "children": Array [],
               "name": "circle",
@@ -9640,7 +9640,7 @@ LoadedCheerio {
               "r": "50",
               "stroke-linecap": "round",
               "stroke-width": "6",
-              "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 180.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+              "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 180.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
             },
             "children": Array [],
             "name": "circle",
@@ -9653,10 +9653,10 @@ LoadedCheerio {
                 "cx": "50",
                 "cy": "50",
                 "r": "50",
-                "stroke": "var(--accent-color-10)",
+                "stroke": "var(--accent-background1-color)",
                 "stroke-linecap": "round",
                 "stroke-width": "1",
-                "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
               },
               "children": Array [],
               "name": "circle",
@@ -9723,10 +9723,10 @@ LoadedCheerio {
                 "cx": "50",
                 "cy": "50",
                 "r": "50",
-                "stroke": "var(--accent-color-10)",
+                "stroke": "var(--accent-background1-color)",
                 "stroke-linecap": "butt",
                 "stroke-width": "1",
-                "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
               },
               "children": Array [],
               "name": "circle",
@@ -9740,7 +9740,7 @@ LoadedCheerio {
                   "r": "50",
                   "stroke-linecap": "butt",
                   "stroke-width": "6",
-                  "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                  "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                 },
                 "children": Array [],
                 "name": "circle",
@@ -9803,7 +9803,7 @@ LoadedCheerio {
                 "r": "50",
                 "stroke-linecap": "butt",
                 "stroke-width": "6",
-                "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
               },
               "children": Array [],
               "name": "circle",
@@ -9816,10 +9816,10 @@ LoadedCheerio {
                   "cx": "50",
                   "cy": "50",
                   "r": "50",
-                  "stroke": "var(--accent-color-10)",
+                  "stroke": "var(--accent-background1-color)",
                   "stroke-linecap": "butt",
                   "stroke-width": "1",
-                  "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                  "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                 },
                 "children": Array [],
                 "name": "circle",
@@ -9900,10 +9900,10 @@ LoadedCheerio {
                 "cx": "50",
                 "cy": "50",
                 "r": "50",
-                "stroke": "var(--accent-color-10)",
+                "stroke": "var(--accent-background1-color)",
                 "stroke-linecap": "square",
                 "stroke-width": "1",
-                "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
               },
               "children": Array [],
               "name": "circle",
@@ -9917,7 +9917,7 @@ LoadedCheerio {
                   "r": "50",
                   "stroke-linecap": "square",
                   "stroke-width": "6",
-                  "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                  "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                 },
                 "children": Array [],
                 "name": "circle",
@@ -9980,7 +9980,7 @@ LoadedCheerio {
                 "r": "50",
                 "stroke-linecap": "square",
                 "stroke-width": "6",
-                "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
               },
               "children": Array [],
               "name": "circle",
@@ -9993,10 +9993,10 @@ LoadedCheerio {
                   "cx": "50",
                   "cy": "50",
                   "r": "50",
-                  "stroke": "var(--accent-color-10)",
+                  "stroke": "var(--accent-background1-color)",
                   "stroke-linecap": "square",
                   "stroke-width": "1",
-                  "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                  "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                 },
                 "children": Array [],
                 "name": "circle",
@@ -10065,10 +10065,10 @@ LoadedCheerio {
                   "cx": "50",
                   "cy": "50",
                   "r": "50",
-                  "stroke": "var(--accent-color-10)",
+                  "stroke": "var(--accent-background1-color)",
                   "stroke-linecap": "square",
                   "stroke-width": "1",
-                  "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                  "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                 },
                 "children": Array [],
                 "name": "circle",
@@ -10082,7 +10082,7 @@ LoadedCheerio {
                     "r": "50",
                     "stroke-linecap": "square",
                     "stroke-width": "6",
-                    "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                    "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                   },
                   "children": Array [],
                   "name": "circle",
@@ -10145,7 +10145,7 @@ LoadedCheerio {
                   "r": "50",
                   "stroke-linecap": "square",
                   "stroke-width": "6",
-                  "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                  "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                 },
                 "children": Array [],
                 "name": "circle",
@@ -10158,10 +10158,10 @@ LoadedCheerio {
                     "cx": "50",
                     "cy": "50",
                     "r": "50",
-                    "stroke": "var(--accent-color-10)",
+                    "stroke": "var(--accent-background1-color)",
                     "stroke-linecap": "square",
                     "stroke-width": "1",
-                    "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                    "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                   },
                   "children": Array [],
                   "name": "circle",
@@ -10230,10 +10230,10 @@ LoadedCheerio {
                     "cx": "50",
                     "cy": "50",
                     "r": "50",
-                    "stroke": "var(--accent-color-10)",
+                    "stroke": "var(--accent-background1-color)",
                     "stroke-linecap": "square",
                     "stroke-width": "1",
-                    "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                    "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                   },
                   "children": Array [],
                   "name": "circle",
@@ -10247,7 +10247,7 @@ LoadedCheerio {
                       "r": "50",
                       "stroke-linecap": "square",
                       "stroke-width": "6",
-                      "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                      "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                     },
                     "children": Array [],
                     "name": "circle",
@@ -10310,7 +10310,7 @@ LoadedCheerio {
                     "r": "50",
                     "stroke-linecap": "square",
                     "stroke-width": "6",
-                    "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                    "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                   },
                   "children": Array [],
                   "name": "circle",
@@ -10323,10 +10323,10 @@ LoadedCheerio {
                       "cx": "50",
                       "cy": "50",
                       "r": "50",
-                      "stroke": "var(--accent-color-10)",
+                      "stroke": "var(--accent-background1-color)",
                       "stroke-linecap": "square",
                       "stroke-width": "1",
-                      "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                      "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                     },
                     "children": Array [],
                     "name": "circle",
@@ -10395,10 +10395,10 @@ LoadedCheerio {
                       "cx": "50",
                       "cy": "50",
                       "r": "50",
-                      "stroke": "var(--accent-color-10)",
+                      "stroke": "var(--accent-background1-color)",
                       "stroke-linecap": "square",
                       "stroke-width": "1",
-                      "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                      "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                     },
                     "children": Array [],
                     "name": "circle",
@@ -10412,7 +10412,7 @@ LoadedCheerio {
                         "r": "50",
                         "stroke-linecap": "square",
                         "stroke-width": "6",
-                        "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                        "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                       },
                       "children": Array [],
                       "name": "circle",
@@ -10475,7 +10475,7 @@ LoadedCheerio {
                       "r": "50",
                       "stroke-linecap": "square",
                       "stroke-width": "6",
-                      "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                      "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                     },
                     "children": Array [],
                     "name": "circle",
@@ -10488,10 +10488,10 @@ LoadedCheerio {
                         "cx": "50",
                         "cy": "50",
                         "r": "50",
-                        "stroke": "var(--accent-color-10)",
+                        "stroke": "var(--accent-background1-color)",
                         "stroke-linecap": "square",
                         "stroke-width": "1",
-                        "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                        "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                       },
                       "children": Array [],
                       "name": "circle",
@@ -10611,10 +10611,10 @@ LoadedCheerio {
               "cx": "50",
               "cy": "50",
               "r": "50",
-              "stroke": "var(--accent-color-10)",
+              "stroke": "var(--accent-background1-color)",
               "stroke-linecap": "butt",
               "stroke-width": "1",
-              "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+              "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
             },
             "children": Array [],
             "name": "circle",
@@ -10628,7 +10628,7 @@ LoadedCheerio {
                 "r": "50",
                 "stroke-linecap": "butt",
                 "stroke-width": "6",
-                "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
               },
               "children": Array [],
               "name": "circle",
@@ -10691,7 +10691,7 @@ LoadedCheerio {
               "r": "50",
               "stroke-linecap": "butt",
               "stroke-width": "6",
-              "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+              "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
             },
             "children": Array [],
             "name": "circle",
@@ -10704,10 +10704,10 @@ LoadedCheerio {
                 "cx": "50",
                 "cy": "50",
                 "r": "50",
-                "stroke": "var(--accent-color-10)",
+                "stroke": "var(--accent-background1-color)",
                 "stroke-linecap": "butt",
                 "stroke-width": "1",
-                "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
               },
               "children": Array [],
               "name": "circle",
@@ -10776,10 +10776,10 @@ LoadedCheerio {
                 "cx": "50",
                 "cy": "50",
                 "r": "50",
-                "stroke": "var(--accent-color-10)",
+                "stroke": "var(--accent-background1-color)",
                 "stroke-linecap": "round",
                 "stroke-width": "1",
-                "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
               },
               "children": Array [],
               "name": "circle",
@@ -10793,7 +10793,7 @@ LoadedCheerio {
                   "r": "50",
                   "stroke-linecap": "round",
                   "stroke-width": "6",
-                  "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 180.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                  "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 180.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                 },
                 "children": Array [],
                 "name": "circle",
@@ -10856,7 +10856,7 @@ LoadedCheerio {
                 "r": "50",
                 "stroke-linecap": "round",
                 "stroke-width": "6",
-                "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 180.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 180.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
               },
               "children": Array [],
               "name": "circle",
@@ -10869,10 +10869,10 @@ LoadedCheerio {
                   "cx": "50",
                   "cy": "50",
                   "r": "50",
-                  "stroke": "var(--accent-color-10)",
+                  "stroke": "var(--accent-background1-color)",
                   "stroke-linecap": "round",
                   "stroke-width": "1",
-                  "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                  "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                 },
                 "children": Array [],
                 "name": "circle",
@@ -10941,10 +10941,10 @@ LoadedCheerio {
                   "cx": "50",
                   "cy": "50",
                   "r": "50",
-                  "stroke": "var(--accent-color-10)",
+                  "stroke": "var(--accent-background1-color)",
                   "stroke-linecap": "square",
                   "stroke-width": "1",
-                  "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                  "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                 },
                 "children": Array [],
                 "name": "circle",
@@ -10958,7 +10958,7 @@ LoadedCheerio {
                     "r": "50",
                     "stroke-linecap": "square",
                     "stroke-width": "6",
-                    "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                    "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                   },
                   "children": Array [],
                   "name": "circle",
@@ -11021,7 +11021,7 @@ LoadedCheerio {
                   "r": "50",
                   "stroke-linecap": "square",
                   "stroke-width": "6",
-                  "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                  "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                 },
                 "children": Array [],
                 "name": "circle",
@@ -11034,10 +11034,10 @@ LoadedCheerio {
                     "cx": "50",
                     "cy": "50",
                     "r": "50",
-                    "stroke": "var(--accent-color-10)",
+                    "stroke": "var(--accent-background1-color)",
                     "stroke-linecap": "square",
                     "stroke-width": "1",
-                    "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                    "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(35deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                   },
                   "children": Array [],
                   "name": "circle",
@@ -11106,10 +11106,10 @@ LoadedCheerio {
                     "cx": "50",
                     "cy": "50",
                     "r": "50",
-                    "stroke": "var(--accent-color-10)",
+                    "stroke": "var(--accent-background1-color)",
                     "stroke-linecap": "square",
                     "stroke-width": "1",
-                    "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                    "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                   },
                   "children": Array [],
                   "name": "circle",
@@ -11123,7 +11123,7 @@ LoadedCheerio {
                       "r": "50",
                       "stroke-linecap": "square",
                       "stroke-width": "6",
-                      "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                      "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                     },
                     "children": Array [],
                     "name": "circle",
@@ -11186,7 +11186,7 @@ LoadedCheerio {
                     "r": "50",
                     "stroke-linecap": "square",
                     "stroke-width": "6",
-                    "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                    "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                   },
                   "children": Array [],
                   "name": "circle",
@@ -11199,10 +11199,10 @@ LoadedCheerio {
                       "cx": "50",
                       "cy": "50",
                       "r": "50",
-                      "stroke": "var(--accent-color-10)",
+                      "stroke": "var(--accent-background1-color)",
                       "stroke-linecap": "square",
                       "stroke-width": "1",
-                      "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                      "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(215deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                     },
                     "children": Array [],
                     "name": "circle",
@@ -11271,10 +11271,10 @@ LoadedCheerio {
                       "cx": "50",
                       "cy": "50",
                       "r": "50",
-                      "stroke": "var(--accent-color-10)",
+                      "stroke": "var(--accent-background1-color)",
                       "stroke-linecap": "square",
                       "stroke-width": "1",
-                      "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                      "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                     },
                     "children": Array [],
                     "name": "circle",
@@ -11288,7 +11288,7 @@ LoadedCheerio {
                         "r": "50",
                         "stroke-linecap": "square",
                         "stroke-width": "6",
-                        "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                        "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                       },
                       "children": Array [],
                       "name": "circle",
@@ -11351,7 +11351,7 @@ LoadedCheerio {
                       "r": "50",
                       "stroke-linecap": "square",
                       "stroke-width": "6",
-                      "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                      "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                     },
                     "children": Array [],
                     "name": "circle",
@@ -11364,10 +11364,10 @@ LoadedCheerio {
                         "cx": "50",
                         "cy": "50",
                         "r": "50",
-                        "stroke": "var(--accent-color-10)",
+                        "stroke": "var(--accent-background1-color)",
                         "stroke-linecap": "square",
                         "stroke-width": "1",
-                        "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                        "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(125deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                       },
                       "children": Array [],
                       "name": "circle",
@@ -11436,10 +11436,10 @@ LoadedCheerio {
                         "cx": "50",
                         "cy": "50",
                         "r": "50",
-                        "stroke": "var(--accent-color-10)",
+                        "stroke": "var(--accent-background1-color)",
                         "stroke-linecap": "square",
                         "stroke-width": "1",
-                        "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                        "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                       },
                       "children": Array [],
                       "name": "circle",
@@ -11453,7 +11453,7 @@ LoadedCheerio {
                           "r": "50",
                           "stroke-linecap": "square",
                           "stroke-width": "6",
-                          "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                          "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                         },
                         "children": Array [],
                         "name": "circle",
@@ -11516,7 +11516,7 @@ LoadedCheerio {
                         "r": "50",
                         "stroke-linecap": "square",
                         "stroke-width": "6",
-                        "style": "stroke: var(--primary-color-60); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
+                        "style": "stroke: var(--primary-tertiary-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 177.15091907742445; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;",
                       },
                       "children": Array [],
                       "name": "circle",
@@ -11529,10 +11529,10 @@ LoadedCheerio {
                           "cx": "50",
                           "cy": "50",
                           "r": "50",
-                          "stroke": "var(--accent-color-10)",
+                          "stroke": "var(--accent-background1-color)",
                           "stroke-linecap": "square",
                           "stroke-width": "1",
-                          "style": "stroke: var(--accent-color-10); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
+                          "style": "stroke: var(--accent-background1-color); stroke-dasharray: 253.0727415391778px 314.1592653589793; stroke-dashoffset: 0; transform: rotate(305deg); transform-origin: 50% 50%; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;",
                         },
                         "children": Array [],
                         "name": "circle",
diff --git a/src/components/Progress/Styles/rtl.scss b/src/components/Progress/Styles/rtl.scss
index ff0d129a4..9dde2f9e5 100644
--- a/src/components/Progress/Styles/rtl.scss
+++ b/src/components/Progress/Styles/rtl.scss
@@ -5,7 +5,7 @@
     .progress-success-bg {
       border-right: unset;
       border-bottom-left-radius: 0;
-      border-left: 4px solid var(--accent-color-10);
+      border-left: 4px solid var(--accent-background1-color);
       border-top-left-radius: 0;
       left: unset;
       right: 0;
diff --git a/src/components/Progress/progress.module.scss b/src/components/Progress/progress.module.scss
index febd21b3c..8a16e2c6f 100644
--- a/src/components/Progress/progress.module.scss
+++ b/src/components/Progress/progress.module.scss
@@ -19,9 +19,9 @@
   }
 
   &-inner {
-    background-color: var(--accent-color-10);
+    background-color: var(--accent-background1-color);
     border-radius: 100px;
-    border: 1px solid var(--primary-color-60);
+    border: 1px solid var(--primary-tertiary-color);
     display: inline-block;
     overflow: hidden;
     position: relative;
@@ -36,7 +36,7 @@
   }
 
   &-circle-trail {
-    stroke: var(--accent-color-10);
+    stroke: var(--accent-background1-color);
   }
 
   &-circle-path {
@@ -45,13 +45,13 @@
 
   &-inner:not(.progress-circle-gradient) {
     .progress-circle-path {
-      stroke: var(--primary-color-60);
+      stroke: var(--primary-tertiary-color);
     }
   }
 
   &-success-bg,
   &-bg {
-    background-color: var(--primary-color-60);
+    background-color: var(--primary-tertiary-color);
     border-radius: 100px;
     position: relative;
     transition: all 0.4s $motion-easing-easeout 0s;
@@ -107,9 +107,9 @@
     }
 
     &-item {
-      background: var(--accent-color-10);
+      background: var(--accent-background1-color);
       border-radius: 100px;
-      border: 1px solid var(--primary-color-60);
+      border: 1px solid var(--primary-tertiary-color);
       flex-shrink: 0;
       margin-bottom: $space-xxs;
       margin-right: $space-xxs;
@@ -117,7 +117,7 @@
       transition: background $motion-duration-extra-fast;
 
       &-active {
-        background: var(--primary-color-60);
+        background: var(--primary-tertiary-color);
       }
     }
 
@@ -152,7 +152,7 @@
     }
 
     .progress-inner {
-      background-color: var(--disruptive-color-10);
+      background-color: var(--disruptive-background1-color);
       border-color: var(--error-color);
     }
   }
diff --git a/src/components/RadioButton/radio.module.scss b/src/components/RadioButton/radio.module.scss
index bd0b8ee5d..32a22dc97 100644
--- a/src/components/RadioButton/radio.module.scss
+++ b/src/components/RadioButton/radio.module.scss
@@ -35,7 +35,7 @@
       }
 
       .radio-button {
-        border: $space-xxxs solid var(--grey-color-70);
+        border: $space-xxxs solid var(--grey-secondary-color);
         border-radius: 50%;
         height: $radio-medium-height;
         width: $radio-medium-width;
@@ -50,9 +50,9 @@
           left: $radio-medium-after-left;
           width: $radio-medium-after-width;
           height: $radio-medium-after-height;
-          background-color: var(--primary-color-70);
+          background-color: var(--primary-secondary-color);
           border-radius: 50%;
-          border: solid 1px var(--primary-color-70);
+          border: solid 1px var(--primary-secondary-color);
           content: '';
           position: absolute;
           transform: scale(0);
@@ -68,15 +68,15 @@
 
     &:not(.disabled):not([disabled]):hover + label {
       .radio-button {
-        background-color: var(--accent-color-20);
-        border: $space-xxxs solid var(--primary-color-70);
+        background-color: var(--accent-background2-color);
+        border: $space-xxxs solid var(--primary-secondary-color);
       }
     }
 
     &:not(.disabled):not([disabled]):active + label {
       .radio-button {
-        background-color: var(--accent-color-30);
-        border: $space-xxxs solid var(--primary-color-70);
+        background-color: var(--accent-background3-color);
+        border: $space-xxxs solid var(--primary-secondary-color);
       }
     }
   }
@@ -93,8 +93,8 @@
       transition: all $motion-duration-extra-fast $motion-easing-easeinout 0s;
 
       .radio-button {
-        background-color: var(--accent-color-30);
-        border: $space-xxxs solid var(--primary-color-70);
+        background-color: var(--accent-background3-color);
+        border: $space-xxxs solid var(--primary-secondary-color);
       }
 
       .radio-button:after {
@@ -109,16 +109,16 @@
 
     &:not(.disabled):not([disabled]):hover + label {
       .radio-button {
-        background-color: var(--accent-color-20);
-        border: $space-xxxs solid var(--primary-color-70);
+        background-color: var(--accent-background2-color);
+        border: $space-xxxs solid var(--primary-secondary-color);
       }
     }
 
     &:not(.disabled):not([disabled]):active + label {
       .radio-button {
         transform: scale(0.98);
-        background-color: var(--accent-color-10);
-        border: $space-xxxs solid var(--primary-color-70);
+        background-color: var(--accent-background1-color);
+        border: $space-xxxs solid var(--primary-secondary-color);
       }
     }
   }
@@ -345,7 +345,7 @@
     &:focus-visible + label {
       .radio-button {
         outline: $space-xxxs solid var(--primary-color-50);
-        border: $space-xxxs solid var(--primary-color-70);
+        border: $space-xxxs solid var(--primary-secondary-color);
       }
     }
 
@@ -361,7 +361,7 @@
       &:focus-visible + label {
         .radio-button {
           outline: none;
-          border: $space-xxxs solid var(--grey-color-70);
+          border: $space-xxxs solid var(--grey-secondary-color);
         }
       }
     }
@@ -381,7 +381,7 @@
         &:focus-visible + label {
           .radio-button {
             outline: none;
-            border: $space-xxxs solid var(--grey-color-70);
+            border: $space-xxxs solid var(--grey-secondary-color);
           }
         }
       }
diff --git a/src/components/Select/select.module.scss b/src/components/Select/select.module.scss
index 6ec5a7471..6ee3397c4 100644
--- a/src/components/Select/select.module.scss
+++ b/src/components/Select/select.module.scss
@@ -76,8 +76,8 @@ $multi-select-count-offset: 54px;
   }
 
   .selected-option {
-    background-color: var(--primary-color-10);
-    color: var(--primary-color-80);
+    background-color: var(--primary-background1-color);
+    color: var(--primary-color);
   }
 
   &.select-large {
@@ -156,7 +156,7 @@ $multi-select-count-offset: 54px;
 }
 
 .select-menu-empty {
-  color: var(--grey-color-60);
+  color: var(--grey-tertiary-color);
   margin: $space-m;
   position: relative;
 }
diff --git a/src/components/Slider/Slider.stories.tsx b/src/components/Slider/Slider.stories.tsx
index 9e79983d2..fc826f615 100644
--- a/src/components/Slider/Slider.stories.tsx
+++ b/src/components/Slider/Slider.stories.tsx
@@ -1078,7 +1078,7 @@ Custom_Markers_Included.args = {
     37: '37%',
     100: {
       style: {
-        color: 'var(--red-color-70)',
+        color: 'var(--red-secondary-color)',
       },
       label: <strong>100%</strong>,
     },
@@ -1095,7 +1095,7 @@ Custom_Markers_Excluded.args = {
     37: '37%',
     100: {
       style: {
-        color: 'var(--red-color-70)',
+        color: 'var(--red-secondary-color)',
       },
       label: <strong>100%</strong>,
     },
@@ -1111,7 +1111,7 @@ Custom_Markers_With_Step.args = {
     30: '30%',
     100: {
       style: {
-        color: 'var(--red-color-70)',
+        color: 'var(--red-secondary-color)',
       },
       label: <strong>100%</strong>,
     },
@@ -1127,7 +1127,7 @@ Custom_Markers_Null_Step.args = {
     37: '37%',
     100: {
       style: {
-        color: 'var(--red-color-70)',
+        color: 'var(--red-secondary-color)',
       },
       label: <strong>100%</strong>,
     },
diff --git a/src/components/Stepper/stepper.module.scss b/src/components/Stepper/stepper.module.scss
index 7493fb0f6..125e1fef3 100644
--- a/src/components/Stepper/stepper.module.scss
+++ b/src/components/Stepper/stepper.module.scss
@@ -809,195 +809,265 @@
       .step .content .circle-button.circle-primary-button,
       .step .content .circle-button.circle-secondary-button {
         &.red {
-          --step-default-active-background-color: var(--red-color-20);
-          --step-default-active-border-color: var(--red-color-60);
-          --step-default-active-icon-color: var(--red-color-80);
+          --step-default-active-background-color: var(--red-background2-color);
+          --step-default-active-border-color: var(--red-tertiary-color);
+          --step-default-active-icon-color: var(--red-color);
           --step-default-background-color: var(--background-color);
-          --step-default-border-color: var(--red-color-60);
-          --step-default-icon-color: var(--red-color-70);
-          --step-default-hover-background-color: var(--red-color-10);
-          --step-default-hover-border-color: var(--red-color-60);
-          --step-default-hover-icon-color: var(--red-color-70);
-          --stepper-line-color: var(--red-color-60);
-          --step-default-complete-background-color: var(--red-color-20);
-          --step-default-complete-border-color: var(--red-color-20);
-          --step-default-complete-icon-color: var(--red-color-70);
+          --step-default-border-color: var(--red-tertiary-color);
+          --step-default-icon-color: var(--red-secondary-color);
+          --step-default-hover-background-color: var(--red-background1-color);
+          --step-default-hover-border-color: var(--red-tertiary-color);
+          --step-default-hover-icon-color: var(--red-secondary-color);
+          --stepper-line-color: var(--red-tertiary-color);
+          --step-default-complete-background-color: var(
+            --red-background2-color
+          );
+          --step-default-complete-border-color: var(--red-background2-color);
+          --step-default-complete-icon-color: var(--red-secondary-color);
         }
 
         &.red-orange {
-          --step-default-active-background-color: var(--redorange-color-20);
-          --step-default-active-border-color: var(--redorange-color-60);
-          --step-default-active-icon-color: var(--redorange-color-80);
+          --step-default-active-background-color: var(
+            --redorange-background2-color
+          );
+          --step-default-active-border-color: var(--redorange-tertiary-color);
+          --step-default-active-icon-color: var(--redorange-color);
           --step-default-background-color: var(--background-color);
-          --step-default-border-color: var(--redorange-color-60);
-          --step-default-icon-color: var(--redorange-color-70);
-          --step-default-hover-background-color: var(--redorange-color-10);
-          --step-default-hover-border-color: var(--redorange-color-60);
-          --step-default-hover-icon-color: var(--redorange-color-70);
-          --stepper-line-color: var(--redorange-color-60);
-          --step-default-complete-background-color: var(--redorange-color-20);
-          --step-default-complete-border-color: var(--redorange-color-20);
-          --step-default-complete-icon-color: var(--redorange-color-70);
+          --step-default-border-color: var(--redorange-tertiary-color);
+          --step-default-icon-color: var(--redorange-secondary-color);
+          --step-default-hover-background-color: var(
+            --redorange-background1-color
+          );
+          --step-default-hover-border-color: var(--redorange-tertiary-color);
+          --step-default-hover-icon-color: var(--redorange-secondary-color);
+          --stepper-line-color: var(--redorange-tertiary-color);
+          --step-default-complete-background-color: var(
+            --redorange-background2-color
+          );
+          --step-default-complete-border-color: var(
+            --redorange-background2-color
+          );
+          --step-default-complete-icon-color: var(--redorange-secondary-color);
         }
 
         &.orange {
-          --step-default-active-background-color: var(--orange-color-20);
-          --step-default-active-border-color: var(--orange-color-60);
-          --step-default-active-icon-color: var(--orange-color-80);
+          --step-default-active-background-color: var(
+            --orange-background2-color
+          );
+          --step-default-active-border-color: var(--orange-tertiary-color);
+          --step-default-active-icon-color: var(--orange-color);
           --step-default-background-color: var(--background-color);
-          --step-default-border-color: var(--orange-color-60);
-          --step-default-icon-color: var(--orange-color-70);
-          --step-default-hover-background-color: var(--orange-color-10);
-          --step-default-hover-border-color: var(--orange-color-60);
-          --step-default-hover-icon-color: var(--orange-color-70);
-          --stepper-line-color: var(--orange-color-60);
-          --step-default-complete-background-color: var(--orange-color-20);
-          --step-default-complete-border-color: var(--orange-color-20);
-          --step-default-complete-icon-color: var(--orange-color-70);
+          --step-default-border-color: var(--orange-tertiary-color);
+          --step-default-icon-color: var(--orange-secondary-color);
+          --step-default-hover-background-color: var(
+            --orange-background1-color
+          );
+          --step-default-hover-border-color: var(--orange-tertiary-color);
+          --step-default-hover-icon-color: var(--orange-secondary-color);
+          --stepper-line-color: var(--orange-tertiary-color);
+          --step-default-complete-background-color: var(
+            --orange-background2-color
+          );
+          --step-default-complete-border-color: var(--orange-background2-color);
+          --step-default-complete-icon-color: var(--orange-secondary-color);
         }
 
         &.yellow {
-          --step-default-active-background-color: var(--yellow-color-20);
-          --step-default-active-border-color: var(--yellow-color-60);
-          --step-default-active-icon-color: var(--yellow-color-80);
+          --step-default-active-background-color: var(
+            --yellow-background2-color
+          );
+          --step-default-active-border-color: var(--yellow-tertiary-color);
+          --step-default-active-icon-color: var(--yellow-color);
           --step-default-background-color: var(--background-color);
-          --step-default-border-color: var(--yellow-color-60);
-          --step-default-icon-color: var(--yellow-color-70);
-          --step-default-hover-background-color: var(--yellow-color-10);
-          --step-default-hover-border-color: var(--yellow-color-60);
-          --step-default-hover-icon-color: var(--yellow-color-70);
-          --stepper-line-color: var(--yellow-color-60);
-          --step-default-complete-background-color: var(--yellow-color-20);
-          --step-default-complete-border-color: var(--yellow-color-20);
-          --step-default-complete-icon-color: var(--yellow-color-70);
+          --step-default-border-color: var(--yellow-tertiary-color);
+          --step-default-icon-color: var(--yellow-secondary-color);
+          --step-default-hover-background-color: var(
+            --yellow-background1-color
+          );
+          --step-default-hover-border-color: var(--yellow-tertiary-color);
+          --step-default-hover-icon-color: var(--yellow-secondary-color);
+          --stepper-line-color: var(--yellow-tertiary-color);
+          --step-default-complete-background-color: var(
+            --yellow-background2-color
+          );
+          --step-default-complete-border-color: var(--yellow-background2-color);
+          --step-default-complete-icon-color: var(--yellow-secondary-color);
         }
 
         &.yellow-green {
-          --step-default-active-background-color: var(--yellowgreen-color-20);
-          --step-default-active-border-color: var(--yellowgreen-color-60);
-          --step-default-active-icon-color: var(--yellowgreen-color-80);
+          --step-default-active-background-color: var(
+            --yellowgreen-background2-color
+          );
+          --step-default-active-border-color: var(--yellowgreen-tertiary-color);
+          --step-default-active-icon-color: var(--yellowgreen-color);
           --step-default-background-color: var(--background-color);
-          --step-default-border-color: var(--yellowgreen-color-60);
-          --step-default-icon-color: var(--yellowgreen-color-70);
-          --step-default-hover-background-color: var(--yellowgreen-color-10);
-          --step-default-hover-border-color: var(--yellowgreen-color-60);
-          --step-default-hover-icon-color: var(--yellowgreen-color-70);
-          --stepper-line-color: var(--yellowgreen-color-60);
-          --step-default-complete-background-color: var(--yellowgreen-color-20);
-          --step-default-complete-border-color: var(--yellowgreen-color-20);
-          --step-default-complete-icon-color: var(--yellowgreen-color-70);
+          --step-default-border-color: var(--yellowgreen-tertiary-color);
+          --step-default-icon-color: var(--yellowgreen-secondary-color);
+          --step-default-hover-background-color: var(
+            --yellowgreen-background1-color
+          );
+          --step-default-hover-border-color: var(--yellowgreen-tertiary-color);
+          --step-default-hover-icon-color: var(--yellowgreen-secondary-color);
+          --stepper-line-color: var(--yellowgreen-tertiary-color);
+          --step-default-complete-background-color: var(
+            --yellowgreen-background2-color
+          );
+          --step-default-complete-border-color: var(
+            --yellowgreen-background2-color
+          );
+          --step-default-complete-icon-color: var(
+            --yellowgreen-secondary-color
+          );
         }
 
         &.green {
-          --step-default-active-background-color: var(--green-color-20);
-          --step-default-active-border-color: var(--green-color-60);
-          --step-default-active-icon-color: var(--green-color-80);
+          --step-default-active-background-color: var(
+            --green-background2-color
+          );
+          --step-default-active-border-color: var(--green-tertiary-color);
+          --step-default-active-icon-color: var(--green-color);
           --step-default-background-color: var(--background-color);
-          --step-default-border-color: var(--green-color-60);
-          --step-default-icon-color: var(--green-color-70);
-          --step-default-hover-background-color: var(--green-color-10);
-          --step-default-hover-border-color: var(--green-color-60);
-          --step-default-hover-icon-color: var(--green-color-70);
-          --stepper-line-color: var(--green-color-60);
-          --step-default-complete-background-color: var(--green-color-20);
-          --step-default-complete-border-color: var(--green-color-20);
-          --step-default-complete-icon-color: var(--green-color-70);
+          --step-default-border-color: var(--green-tertiary-color);
+          --step-default-icon-color: var(--green-secondary-color);
+          --step-default-hover-background-color: var(--green-background1-color);
+          --step-default-hover-border-color: var(--green-tertiary-color);
+          --step-default-hover-icon-color: var(--green-secondary-color);
+          --stepper-line-color: var(--green-tertiary-color);
+          --step-default-complete-background-color: var(
+            --green-background2-color
+          );
+          --step-default-complete-border-color: var(--green-background2-color);
+          --step-default-complete-icon-color: var(--green-secondary-color);
         }
 
         &.blue-green {
-          --step-default-active-background-color: var(--bluegreen-color-20);
-          --step-default-active-border-color: var(--bluegreen-color-60);
-          --step-default-active-icon-color: var(--bluegreen-color-80);
+          --step-default-active-background-color: var(
+            --bluegreen-background2-color
+          );
+          --step-default-active-border-color: var(--bluegreen-tertiary-color);
+          --step-default-active-icon-color: var(--bluegreen-color);
           --step-default-background-color: var(--background-color);
-          --step-default-border-color: var(--bluegreen-color-60);
-          --step-default-icon-color: var(--bluegreen-color-70);
-          --step-default-hover-background-color: var(--bluegreen-color-10);
-          --step-default-hover-border-color: var(--bluegreen-color-60);
-          --step-default-hover-icon-color: var(--bluegreen-color-70);
-          --stepper-line-color: var(--bluegreen-color-60);
-          --step-default-complete-background-color: var(--bluegreen-color-20);
-          --step-default-complete-border-color: var(--bluegreen-color-20);
-          --step-default-complete-icon-color: var(--bluegreen-color-70);
+          --step-default-border-color: var(--bluegreen-tertiary-color);
+          --step-default-icon-color: var(--bluegreen-secondary-color);
+          --step-default-hover-background-color: var(
+            --bluegreen-background1-color
+          );
+          --step-default-hover-border-color: var(--bluegreen-tertiary-color);
+          --step-default-hover-icon-color: var(--bluegreen-secondary-color);
+          --stepper-line-color: var(--bluegreen-tertiary-color);
+          --step-default-complete-background-color: var(
+            --bluegreen-background2-color
+          );
+          --step-default-complete-border-color: var(
+            --bluegreen-background2-color
+          );
+          --step-default-complete-icon-color: var(--bluegreen-secondary-color);
         }
 
         &.blue {
-          --step-default-active-background-color: var(--blue-color-20);
-          --step-default-active-border-color: var(--blue-color-60);
-          --step-default-active-icon-color: var(--blue-color-80);
+          --step-default-active-background-color: var(--blue-background2-color);
+          --step-default-active-border-color: var(--blue-tertiary-color);
+          --step-default-active-icon-color: var(--blue-color);
           --step-default-background-color: var(--background-color);
-          --step-default-border-color: var(--blue-color-60);
-          --step-default-icon-color: var(--blue-color-70);
-          --step-default-hover-background-color: var(--blue-color-10);
-          --step-default-hover-border-color: var(--blue-color-60);
-          --step-default-hover-icon-color: var(--blue-color-70);
-          --stepper-line-color: var(--blue-color-60);
-          --step-default-complete-background-color: var(--blue-color-20);
-          --step-default-complete-border-color: var(--blue-color-20);
-          --step-default-complete-icon-color: var(--blue-color-70);
+          --step-default-border-color: var(--blue-tertiary-color);
+          --step-default-icon-color: var(--blue-secondary-color);
+          --step-default-hover-background-color: var(--blue-background1-color);
+          --step-default-hover-border-color: var(--blue-tertiary-color);
+          --step-default-hover-icon-color: var(--blue-secondary-color);
+          --stepper-line-color: var(--blue-tertiary-color);
+          --step-default-complete-background-color: var(
+            --blue-background2-color
+          );
+          --step-default-complete-border-color: var(--blue-background2-color);
+          --step-default-complete-icon-color: var(--blue-secondary-color);
         }
 
         &.blue-violet {
-          --step-default-active-background-color: var(--blueviolet-color-20);
-          --step-default-active-border-color: var(--blueviolet-color-60);
-          --step-default-active-icon-color: var(--blueviolet-color-80);
+          --step-default-active-background-color: var(
+            --blueviolet-background2-color
+          );
+          --step-default-active-border-color: var(--blueviolet-tertiary-color);
+          --step-default-active-icon-color: var(--blueviolet-color);
           --step-default-background-color: var(--background-color);
-          --step-default-border-color: var(--blueviolet-color-60);
-          --step-default-icon-color: var(--blueviolet-color-70);
-          --step-default-hover-background-color: var(--blueviolet-color-10);
-          --step-default-hover-border-color: var(--blueviolet-color-60);
-          --step-default-hover-icon-color: var(--blueviolet-color-70);
-          --stepper-line-color: var(--blueviolet-color-60);
-          --step-default-complete-background-color: var(--blueviolet-color-20);
-          --step-default-complete-border-color: var(--blueviolet-color-20);
-          --step-default-complete-icon-color: var(--blueviolet-color-70);
+          --step-default-border-color: var(--blueviolet-tertiary-color);
+          --step-default-icon-color: var(--blueviolet-secondary-color);
+          --step-default-hover-background-color: var(
+            --blueviolet-background1-color
+          );
+          --step-default-hover-border-color: var(--blueviolet-tertiary-color);
+          --step-default-hover-icon-color: var(--blueviolet-secondary-color);
+          --stepper-line-color: var(--blueviolet-tertiary-color);
+          --step-default-complete-background-color: var(
+            --blueviolet-background2-color
+          );
+          --step-default-complete-border-color: var(
+            --blueviolet-background2-color
+          );
+          --step-default-complete-icon-color: var(--blueviolet-secondary-color);
         }
 
         &.violet {
-          --step-default-active-background-color: var(--violet-color-20);
-          --step-default-active-border-color: var(--violet-color-60);
-          --step-default-active-icon-color: var(--violet-color-80);
+          --step-default-active-background-color: var(
+            --violet-background2-color
+          );
+          --step-default-active-border-color: var(--violet-tertiary-color);
+          --step-default-active-icon-color: var(--violet-color);
           --step-default-background-color: var(--background-color);
-          --step-default-border-color: var(--violet-color-60);
-          --step-default-icon-color: var(--violet-color-70);
-          --step-default-hover-background-color: var(--violet-color-10);
-          --step-default-hover-border-color: var(--violet-color-60);
-          --step-default-hover-icon-color: var(--violet-color-70);
-          --stepper-line-color: var(--violet-color-60);
-          --step-default-complete-background-color: var(--violet-color-20);
-          --step-default-complete-border-color: var(--violet-color-20);
-          --step-default-complete-icon-color: var(--violet-color-70);
+          --step-default-border-color: var(--violet-tertiary-color);
+          --step-default-icon-color: var(--violet-secondary-color);
+          --step-default-hover-background-color: var(
+            --violet-background1-color
+          );
+          --step-default-hover-border-color: var(--violet-tertiary-color);
+          --step-default-hover-icon-color: var(--violet-secondary-color);
+          --stepper-line-color: var(--violet-tertiary-color);
+          --step-default-complete-background-color: var(
+            --violet-background2-color
+          );
+          --step-default-complete-border-color: var(--violet-background2-color);
+          --step-default-complete-icon-color: var(--violet-secondary-color);
         }
 
         &.violet-red {
-          --step-default-active-background-color: var(--violetred-color-20);
-          --step-default-active-border-color: var(--violetred-color-60);
-          --step-default-active-icon-color: var(--violetred-color-80);
+          --step-default-active-background-color: var(
+            --violetred-background2-color
+          );
+          --step-default-active-border-color: var(--violetred-tertiary-color);
+          --step-default-active-icon-color: var(--violetred-color);
           --step-default-background-color: var(--background-color);
-          --step-default-border-color: var(--violetred-color-60);
-          --step-default-icon-color: var(--violetred-color-70);
-          --step-default-hover-background-color: var(--violetred-color-10);
-          --step-default-hover-border-color: var(--violetred-color-60);
-          --step-default-hover-icon-color: var(--violetred-color-70);
-          --stepper-line-color: var(--violetred-color-60);
-          --step-default-complete-background-color: var(--violetred-color-20);
-          --step-default-complete-border-color: var(--violetred-color-20);
-          --step-default-complete-icon-color: var(--violetred-color-70);
+          --step-default-border-color: var(--violetred-tertiary-color);
+          --step-default-icon-color: var(--violetred-secondary-color);
+          --step-default-hover-background-color: var(
+            --violetred-background1-color
+          );
+          --step-default-hover-border-color: var(--violetred-tertiary-color);
+          --step-default-hover-icon-color: var(--violetred-secondary-color);
+          --stepper-line-color: var(--violetred-tertiary-color);
+          --step-default-complete-background-color: var(
+            --violetred-background2-color
+          );
+          --step-default-complete-border-color: var(
+            --violetred-background2-color
+          );
+          --step-default-complete-icon-color: var(--violetred-secondary-color);
         }
 
         &.grey {
-          --step-default-active-background-color: var(--grey-color-20);
-          --step-default-active-border-color: var(--grey-color-60);
-          --step-default-active-icon-color: var(--grey-color-80);
+          --step-default-active-background-color: var(--grey-background2-color);
+          --step-default-active-border-color: var(--grey-tertiary-color);
+          --step-default-active-icon-color: var(--grey-color);
           --step-default-background-color: var(--background-color);
-          --step-default-border-color: var(--grey-color-60);
-          --step-default-icon-color: var(--grey-color-70);
-          --step-default-hover-background-color: var(--grey-color-10);
-          --step-default-hover-border-color: var(--grey-color-60);
-          --step-default-hover-icon-color: var(--grey-color-70);
-          --stepper-line-color: var(--grey-color-60);
-          --step-default-complete-background-color: var(--grey-color-20);
-          --step-default-complete-border-color: var(--grey-color-20);
-          --step-default-complete-icon-color: var(--grey-color-70);
+          --step-default-border-color: var(--grey-tertiary-color);
+          --step-default-icon-color: var(--grey-secondary-color);
+          --step-default-hover-background-color: var(--grey-background1-color);
+          --step-default-hover-border-color: var(--grey-tertiary-color);
+          --step-default-hover-icon-color: var(--grey-secondary-color);
+          --stepper-line-color: var(--grey-tertiary-color);
+          --step-default-complete-background-color: var(
+            --grey-background2-color
+          );
+          --step-default-complete-border-color: var(--grey-background2-color);
+          --step-default-complete-icon-color: var(--grey-secondary-color);
         }
 
         &.error {
@@ -1080,195 +1150,289 @@
         .step .content .circle,
         .step .content .circle-button.circle-default-button {
           &.red {
-            --step-timeline-active-background-color: var(--red-color-20);
-            --step-timeline-active-border-color: var(--red-color-60);
-            --step-timeline-active-icon-color: var(--red-color-80);
-            --step-timeline-background-color: var(--red-color-10);
-            --step-timeline-border-color: var(--red-color-10);
-            --step-timeline-icon-color: var(--red-color-70);
+            --step-timeline-active-background-color: var(
+              --red-background2-color
+            );
+            --step-timeline-active-border-color: var(--red-tertiary-color);
+            --step-timeline-active-icon-color: var(--red-color);
+            --step-timeline-background-color: var(--red-background1-color);
+            --step-timeline-border-color: var(--red-background1-color);
+            --step-timeline-icon-color: var(--red-secondary-color);
             --step-timeline-hover-background-color: var(--background-color);
-            --step-timeline-hover-border-color: var(--red-color-60);
-            --step-timeline-hover-icon-color: var(--red-color-70);
-            --step-timeline-complete-background-color: var(--red-color-10);
-            --step-timeline-complete-border-color: var(--red-color-10);
-            --step-timeline-complete-icon-color: var(--red-color-70);
+            --step-timeline-hover-border-color: var(--red-tertiary-color);
+            --step-timeline-hover-icon-color: var(--red-secondary-color);
+            --step-timeline-complete-background-color: var(
+              --red-background1-color
+            );
+            --step-timeline-complete-border-color: var(--red-background1-color);
+            --step-timeline-complete-icon-color: var(--red-secondary-color);
           }
 
           &.red-orange {
-            --step-timeline-active-background-color: var(--redorange-color-20);
-            --step-timeline-active-border-color: var(--redorange-color-60);
-            --step-timeline-active-icon-color: var(--redorange-color-80);
-            --step-timeline-background-color: var(--redorange-color-10);
-            --step-timeline-border-color: var(--redorange-color-10);
-            --step-timeline-icon-color: var(--redorange-color-70);
+            --step-timeline-active-background-color: var(
+              --redorange-background2-color
+            );
+            --step-timeline-active-border-color: var(
+              --redorange-tertiary-color
+            );
+            --step-timeline-active-icon-color: var(--redorange-color);
+            --step-timeline-background-color: var(
+              --redorange-background1-color
+            );
+            --step-timeline-border-color: var(--redorange-background1-color);
+            --step-timeline-icon-color: var(--redorange-secondary-color);
             --step-timeline-hover-background-color: var(--background-color);
-            --step-timeline-hover-border-color: var(--redorange-color-60);
-            --step-timeline-hover-icon-color: var(--redorange-color-70);
+            --step-timeline-hover-border-color: var(--redorange-tertiary-color);
+            --step-timeline-hover-icon-color: var(--redorange-secondary-color);
             --step-timeline-complete-background-color: var(
-              --redorange-color-10
+              --redorange-background1-color
+            );
+            --step-timeline-complete-border-color: var(
+              --redorange-background1-color
+            );
+            --step-timeline-complete-icon-color: var(
+              --redorange-secondary-color
             );
-            --step-timeline-complete-border-color: var(--redorange-color-10);
-            --step-timeline-complete-icon-color: var(--redorange-color-70);
           }
 
           &.orange {
-            --step-timeline-active-background-color: var(--orange-color-20);
-            --step-timeline-active-border-color: var(--orange-color-60);
-            --step-timeline-active-icon-color: var(--orange-color-80);
-            --step-timeline-background-color: var(--orange-color-10);
-            --step-timeline-border-color: var(--orange-color-10);
-            --step-timeline-icon-color: var(--orange-color-70);
+            --step-timeline-active-background-color: var(
+              --orange-background2-color
+            );
+            --step-timeline-active-border-color: var(--orange-tertiary-color);
+            --step-timeline-active-icon-color: var(--orange-color);
+            --step-timeline-background-color: var(--orange-background1-color);
+            --step-timeline-border-color: var(--orange-background1-color);
+            --step-timeline-icon-color: var(--orange-secondary-color);
             --step-timeline-hover-background-color: var(--background-color);
-            --step-timeline-hover-border-color: var(--orange-color-60);
-            --step-timeline-hover-icon-color: var(--orange-color-70);
-            --step-timeline-complete-background-color: var(--orange-color-10);
-            --step-timeline-complete-border-color: var(--orange-color-10);
-            --step-timeline-complete-icon-color: var(--orange-color-70);
+            --step-timeline-hover-border-color: var(--orange-tertiary-color);
+            --step-timeline-hover-icon-color: var(--orange-secondary-color);
+            --step-timeline-complete-background-color: var(
+              --orange-background1-color
+            );
+            --step-timeline-complete-border-color: var(
+              --orange-background1-color
+            );
+            --step-timeline-complete-icon-color: var(--orange-secondary-color);
           }
 
           &.yellow {
-            --step-timeline-active-background-color: var(--yellow-color-20);
-            --step-timeline-active-border-color: var(--yellow-color-60);
-            --step-timeline-active-icon-color: var(--yellow-color-80);
-            --step-timeline-background-color: var(--yellow-color-10);
-            --step-timeline-border-color: var(--yellow-color-10);
-            --step-timeline-icon-color: var(--yellow-color-70);
+            --step-timeline-active-background-color: var(
+              --yellow-background2-color
+            );
+            --step-timeline-active-border-color: var(--yellow-tertiary-color);
+            --step-timeline-active-icon-color: var(--yellow-color);
+            --step-timeline-background-color: var(--yellow-background1-color);
+            --step-timeline-border-color: var(--yellow-background1-color);
+            --step-timeline-icon-color: var(--yellow-secondary-color);
             --step-timeline-hover-background-color: var(--background-color);
-            --step-timeline-hover-border-color: var(--yellow-color-60);
-            --step-timeline-hover-icon-color: var(--yellow-color-70);
-            --step-timeline-complete-background-color: var(--yellow-color-10);
-            --step-timeline-complete-border-color: var(--yellow-color-10);
-            --step-timeline-complete-icon-color: var(--yellow-color-70);
+            --step-timeline-hover-border-color: var(--yellow-tertiary-color);
+            --step-timeline-hover-icon-color: var(--yellow-secondary-color);
+            --step-timeline-complete-background-color: var(
+              --yellow-background1-color
+            );
+            --step-timeline-complete-border-color: var(
+              --yellow-background1-color
+            );
+            --step-timeline-complete-icon-color: var(--yellow-secondary-color);
           }
 
           &.yellow-green {
             --step-timeline-active-background-color: var(
-              --yellowgreen-color-20
+              --yellowgreen-background2-color
             );
-            --step-timeline-active-border-color: var(--yellowgreen-color-60);
-            --step-timeline-active-icon-color: var(--yellowgreen-color-80);
-            --step-timeline-background-color: var(--yellowgreen-color-10);
-            --step-timeline-border-color: var(--yellowgreen-color-10);
-            --step-timeline-icon-color: var(--yellowgreen-color-70);
+            --step-timeline-active-border-color: var(
+              --yellowgreen-tertiary-color
+            );
+            --step-timeline-active-icon-color: var(--yellowgreen-color);
+            --step-timeline-background-color: var(
+              --yellowgreen-background1-color
+            );
+            --step-timeline-border-color: var(--yellowgreen-background1-color);
+            --step-timeline-icon-color: var(--yellowgreen-secondary-color);
             --step-timeline-hover-background-color: var(--background-color);
-            --step-timeline-hover-border-color: var(--yellowgreen-color-60);
-            --step-timeline-hover-icon-color: var(--yellowgreen-color-70);
+            --step-timeline-hover-border-color: var(
+              --yellowgreen-tertiary-color
+            );
+            --step-timeline-hover-icon-color: var(
+              --yellowgreen-secondary-color
+            );
             --step-timeline-complete-background-color: var(
-              --yellowgreen-color-10
+              --yellowgreen-background1-color
+            );
+            --step-timeline-complete-border-color: var(
+              --yellowgreen-background1-color
+            );
+            --step-timeline-complete-icon-color: var(
+              --yellowgreen-secondary-color
             );
-            --step-timeline-complete-border-color: var(--yellowgreen-color-10);
-            --step-timeline-complete-icon-color: var(--yellowgreen-color-70);
           }
 
           &.green {
-            --step-timeline-active-background-color: var(--green-color-20);
-            --step-timeline-active-border-color: var(--green-color-60);
-            --step-timeline-active-icon-color: var(--green-color-80);
-            --step-timeline-background-color: var(--green-color-10);
-            --step-timeline-border-color: var(--green-color-10);
-            --step-timeline-icon-color: var(--green-color-70);
+            --step-timeline-active-background-color: var(
+              --green-background2-color
+            );
+            --step-timeline-active-border-color: var(--green-tertiary-color);
+            --step-timeline-active-icon-color: var(--green-color);
+            --step-timeline-background-color: var(--green-background1-color);
+            --step-timeline-border-color: var(--green-background1-color);
+            --step-timeline-icon-color: var(--green-secondary-color);
             --step-timeline-hover-background-color: var(--background-color);
-            --step-timeline-hover-border-color: var(--green-color-60);
-            --step-timeline-hover-icon-color: var(--green-color-70);
-            --step-timeline-complete-background-color: var(--green-color-10);
-            --step-timeline-complete-border-color: var(--green-color-10);
-            --step-timeline-complete-icon-color: var(--green-color-70);
+            --step-timeline-hover-border-color: var(--green-tertiary-color);
+            --step-timeline-hover-icon-color: var(--green-secondary-color);
+            --step-timeline-complete-background-color: var(
+              --green-background1-color
+            );
+            --step-timeline-complete-border-color: var(
+              --green-background1-color
+            );
+            --step-timeline-complete-icon-color: var(--green-secondary-color);
           }
 
           &.blue-green {
-            --step-timeline-active-background-color: var(--bluegreen-color-20);
-            --step-timeline-active-border-color: var(--bluegreen-color-60);
-            --step-timeline-active-icon-color: var(--bluegreen-color-80);
-            --step-timeline-background-color: var(--bluegreen-color-10);
-            --step-timeline-border-color: var(--bluegreen-color-10);
-            --step-timeline-icon-color: var(--bluegreen-color-70);
+            --step-timeline-active-background-color: var(
+              --bluegreen-background2-color
+            );
+            --step-timeline-active-border-color: var(
+              --bluegreen-tertiary-color
+            );
+            --step-timeline-active-icon-color: var(--bluegreen-color);
+            --step-timeline-background-color: var(
+              --bluegreen-background1-color
+            );
+            --step-timeline-border-color: var(--bluegreen-background1-color);
+            --step-timeline-icon-color: var(--bluegreen-secondary-color);
             --step-timeline-hover-background-color: var(--background-color);
-            --step-timeline-hover-border-color: var(--bluegreen-color-60);
-            --step-timeline-hover-icon-color: var(--bluegreen-color-70);
+            --step-timeline-hover-border-color: var(--bluegreen-tertiary-color);
+            --step-timeline-hover-icon-color: var(--bluegreen-secondary-color);
             --step-timeline-complete-background-color: var(
-              --bluegreen-color-10
+              --bluegreen-background1-color
+            );
+            --step-timeline-complete-border-color: var(
+              --bluegreen-background1-color
+            );
+            --step-timeline-complete-icon-color: var(
+              --bluegreen-secondary-color
             );
-            --step-timeline-complete-border-color: var(--bluegreen-color-10);
-            --step-timeline-complete-icon-color: var(--bluegreen-color-70);
           }
 
           &.blue {
-            --step-timeline-active-background-color: var(--blue-color-20);
-            --step-timeline-active-border-color: var(--blue-color-60);
-            --step-timeline-active-icon-color: var(--blue-color-80);
-            --step-timeline-background-color: var(--blue-color-10);
-            --step-timeline-border-color: var(--blue-color-10);
-            --step-timeline-icon-color: var(--blue-color-70);
+            --step-timeline-active-background-color: var(
+              --blue-background2-color
+            );
+            --step-timeline-active-border-color: var(--blue-tertiary-color);
+            --step-timeline-active-icon-color: var(--blue-color);
+            --step-timeline-background-color: var(--blue-background1-color);
+            --step-timeline-border-color: var(--blue-background1-color);
+            --step-timeline-icon-color: var(--blue-secondary-color);
             --step-timeline-hover-background-color: var(--background-color);
-            --step-timeline-hover-border-color: var(--blue-color-60);
-            --step-timeline-hover-icon-color: var(--blue-color-70);
-            --step-timeline-complete-background-color: var(--blue-color-10);
-            --step-timeline-complete-border-color: var(--blue-color-10);
-            --step-timeline-complete-icon-color: var(--blue-color-70);
+            --step-timeline-hover-border-color: var(--blue-tertiary-color);
+            --step-timeline-hover-icon-color: var(--blue-secondary-color);
+            --step-timeline-complete-background-color: var(
+              --blue-background1-color
+            );
+            --step-timeline-complete-border-color: var(
+              --blue-background1-color
+            );
+            --step-timeline-complete-icon-color: var(--blue-secondary-color);
           }
 
           &.blue-violet {
-            --step-timeline-active-background-color: var(--blueviolet-color-20);
-            --step-timeline-active-border-color: var(--blueviolet-color-60);
-            --step-timeline-active-icon-color: var(--blueviolet-color-80);
-            --step-timeline-background-color: var(--blueviolet-color-10);
-            --step-timeline-border-color: var(--blueviolet-color-10);
-            --step-timeline-icon-color: var(--blueviolet-color-70);
+            --step-timeline-active-background-color: var(
+              --blueviolet-background2-color
+            );
+            --step-timeline-active-border-color: var(
+              --blueviolet-tertiary-color
+            );
+            --step-timeline-active-icon-color: var(--blueviolet-color);
+            --step-timeline-background-color: var(
+              --blueviolet-background1-color
+            );
+            --step-timeline-border-color: var(--blueviolet-background1-color);
+            --step-timeline-icon-color: var(--blueviolet-secondary-color);
             --step-timeline-hover-background-color: var(--background-color);
-            --step-timeline-hover-border-color: var(--blueviolet-color-60);
-            --step-timeline-hover-icon-color: var(--blueviolet-color-70);
+            --step-timeline-hover-border-color: var(
+              --blueviolet-tertiary-color
+            );
+            --step-timeline-hover-icon-color: var(--blueviolet-secondary-color);
             --step-timeline-complete-background-color: var(
-              --blueviolet-color-10
+              --blueviolet-background1-color
+            );
+            --step-timeline-complete-border-color: var(
+              --blueviolet-background1-color
+            );
+            --step-timeline-complete-icon-color: var(
+              --blueviolet-secondary-color
             );
-            --step-timeline-complete-border-color: var(--blueviolet-color-10);
-            --step-timeline-complete-icon-color: var(--blueviolet-color-70);
           }
 
           &.violet {
-            --step-timeline-active-background-color: var(--violet-color-20);
-            --step-timeline-active-border-color: var(--violet-color-60);
-            --step-timeline-active-icon-color: var(--violet-color-80);
-            --step-timeline-background-color: var(--violet-color-10);
-            --step-timeline-border-color: var(--violet-color-10);
-            --step-timeline-icon-color: var(--violet-color-70);
+            --step-timeline-active-background-color: var(
+              --violet-background2-color
+            );
+            --step-timeline-active-border-color: var(--violet-tertiary-color);
+            --step-timeline-active-icon-color: var(--violet-color);
+            --step-timeline-background-color: var(--violet-background1-color);
+            --step-timeline-border-color: var(--violet-background1-color);
+            --step-timeline-icon-color: var(--violet-secondary-color);
             --step-timeline-hover-background-color: var(--background-color);
-            --step-timeline-hover-border-color: var(--violet-color-60);
-            --step-timeline-hover-icon-color: var(--violet-color-70);
-            --step-timeline-complete-background-color: var(--violet-color-10);
-            --step-timeline-complete-border-color: var(--violet-color-10);
-            --step-timeline-complete-icon-color: var(--violet-color-70);
+            --step-timeline-hover-border-color: var(--violet-tertiary-color);
+            --step-timeline-hover-icon-color: var(--violet-secondary-color);
+            --step-timeline-complete-background-color: var(
+              --violet-background1-color
+            );
+            --step-timeline-complete-border-color: var(
+              --violet-background1-color
+            );
+            --step-timeline-complete-icon-color: var(--violet-secondary-color);
           }
 
           &.violet-red {
-            --step-timeline-active-background-color: var(--violetred-color-20);
-            --step-timeline-active-border-color: var(--violetred-color-60);
-            --step-timeline-active-icon-color: var(--violetred-color-80);
-            --step-timeline-background-color: var(--violetred-color-10);
-            --step-timeline-border-color: var(--violetred-color-10);
-            --step-timeline-icon-color: var(--violetred-color-70);
+            --step-timeline-active-background-color: var(
+              --violetred-background2-color
+            );
+            --step-timeline-active-border-color: var(
+              --violetred-tertiary-color
+            );
+            --step-timeline-active-icon-color: var(--violetred-color);
+            --step-timeline-background-color: var(
+              --violetred-background1-color
+            );
+            --step-timeline-border-color: var(--violetred-background1-color);
+            --step-timeline-icon-color: var(--violetred-secondary-color);
             --step-timeline-hover-background-color: var(--background-color);
-            --step-timeline-hover-border-color: var(--violetred-color-60);
-            --step-timeline-hover-icon-color: var(--violetred-color-70);
+            --step-timeline-hover-border-color: var(--violetred-tertiary-color);
+            --step-timeline-hover-icon-color: var(--violetred-secondary-color);
             --step-timeline-complete-background-color: var(
-              --violetred-color-10
+              --violetred-background1-color
+            );
+            --step-timeline-complete-border-color: var(
+              --violetred-background1-color
+            );
+            --step-timeline-complete-icon-color: var(
+              --violetred-secondary-color
             );
-            --step-timeline-complete-border-color: var(--violetred-color-10);
-            --step-timeline-complete-icon-color: var(--violetred-color-70);
           }
 
           &.grey {
-            --step-timeline-active-background-color: var(--grey-color-20);
-            --step-timeline-active-border-color: var(--grey-color-60);
-            --step-timeline-active-icon-color: var(--grey-color-80);
-            --step-timeline-background-color: var(--grey-color-10);
-            --step-timeline-border-color: var(--grey-color-10);
-            --step-timeline-icon-color: var(--grey-color-70);
+            --step-timeline-active-background-color: var(
+              --grey-background2-color
+            );
+            --step-timeline-active-border-color: var(--grey-tertiary-color);
+            --step-timeline-active-icon-color: var(--grey-color);
+            --step-timeline-background-color: var(--grey-background1-color);
+            --step-timeline-border-color: var(--grey-background1-color);
+            --step-timeline-icon-color: var(--grey-secondary-color);
             --step-timeline-hover-background-color: var(--background-color);
-            --step-timeline-hover-border-color: var(--grey-color-60);
-            --step-timeline-hover-icon-color: var(--grey-color-70);
-            --step-timeline-complete-background-color: var(--grey-color-10);
-            --step-timeline-complete-border-color: var(--grey-color-10);
-            --step-timeline-complete-icon-color: var(--grey-color-70);
+            --step-timeline-hover-border-color: var(--grey-tertiary-color);
+            --step-timeline-hover-icon-color: var(--grey-secondary-color);
+            --step-timeline-complete-background-color: var(
+              --grey-background1-color
+            );
+            --step-timeline-complete-border-color: var(
+              --grey-background1-color
+            );
+            --step-timeline-complete-icon-color: var(--grey-secondary-color);
           }
 
           &.error {
diff --git a/src/components/Table/Styles/mixins.scss b/src/components/Table/Styles/mixins.scss
index e4a574000..48fe60b88 100644
--- a/src/components/Table/Styles/mixins.scss
+++ b/src/components/Table/Styles/mixins.scss
@@ -1,5 +1,5 @@
 $border-width: 1px;
-$border-color: var(--grey-color-20);
+$border-color: var(--grey-background2-color);
 $border: $border-width solid $border-color;
 
 @mixin operation-unit() {
@@ -11,11 +11,11 @@ $border: $border-width solid $border-color;
 
   &:focus,
   &:hover {
-    color: var(--primary-color-80);
+    color: var(--primary-color);
   }
 
   &:active {
-    color: var(--primary-color-80);
+    color: var(--primary-color);
   }
 }
 
diff --git a/src/components/Table/Styles/table.module.scss b/src/components/Table/Styles/table.module.scss
index 0fee6fd87..1fe6bfd44 100644
--- a/src/components/Table/Styles/table.module.scss
+++ b/src/components/Table/Styles/table.module.scss
@@ -460,7 +460,7 @@
       color: inherit;
       line-height: 18px;
       background: $table-expand-icon-background-color;
-      border: 2px $table-border-style var(--grey-color-70);
+      border: 2px $table-border-style var(--grey-secondary-color);
       border-radius: $border-radius-s;
       outline: none;
       transform: scale(unit(22) / unit(18));
diff --git a/src/components/Tabs/tabs.module.scss b/src/components/Tabs/tabs.module.scss
index c499fd4aa..704b0dcfb 100644
--- a/src/components/Tabs/tabs.module.scss
+++ b/src/components/Tabs/tabs.module.scss
@@ -136,7 +136,7 @@
 
       &.active {
         .badge {
-          background-color: var(--primary-color-10);
+          background-color: var(--primary-background1-color);
         }
       }
 
@@ -318,123 +318,123 @@
       }
 
       &.red {
-        --active-border: var(--red-color-60);
-        --bg: var(--red-color-10);
-        --border: var(--red-color-10);
-        --icon: var(--red-color-70);
-        --icon-bg: var(--red-color-20);
-        --hover-bg: var(--red-color-20);
-        --hover-border: var(--red-color-20);
+        --active-border: var(--red-tertiary-color);
+        --bg: var(--red-background1-color);
+        --border: var(--red-background1-color);
+        --icon: var(--red-secondary-color);
+        --icon-bg: var(--red-background2-color);
+        --hover-bg: var(--red-background2-color);
+        --hover-border: var(--red-background2-color);
       }
 
       &.red-orange {
-        --active-border: var(--redorange-color-60);
-        --bg: var(--redorange-color-10);
-        --border: var(--redorange-color-10);
-        --icon: var(--redorange-color-70);
-        --icon-bg: var(--redorange-color-20);
-        --hover-bg: var(--redorange-color-20);
-        --hover-border: var(--redorange-color-20);
+        --active-border: var(--redorange-tertiary-color);
+        --bg: var(--redorange-background1-color);
+        --border: var(--redorange-background1-color);
+        --icon: var(--redorange-secondary-color);
+        --icon-bg: var(--redorange-background2-color);
+        --hover-bg: var(--redorange-background2-color);
+        --hover-border: var(--redorange-background2-color);
       }
 
       &.orange {
-        --active-border: var(--orange-color-60);
-        --bg: var(--orange-color-10);
-        --border: var(--orange-color-10);
-        --icon: var(--orange-color-70);
-        --icon-bg: var(--orange-color-20);
-        --hover-bg: var(--orange-color-20);
-        --hover-border: var(--orange-color-20);
+        --active-border: var(--orange-tertiary-color);
+        --bg: var(--orange-background1-color);
+        --border: var(--orange-background1-color);
+        --icon: var(--orange-secondary-color);
+        --icon-bg: var(--orange-background2-color);
+        --hover-bg: var(--orange-background2-color);
+        --hover-border: var(--orange-background2-color);
       }
 
       &.yellow {
-        --active-border: var(--yellow-color-60);
-        --bg: var(--yellow-color-10);
-        --border: var(--yellow-color-10);
-        --icon: var(--yellow-color-70);
-        --icon-bg: var(--yellow-color-20);
-        --hover-bg: var(--yellow-color-20);
-        --hover-border: var(--yellow-color-20);
+        --active-border: var(--yellow-tertiary-color);
+        --bg: var(--yellow-background1-color);
+        --border: var(--yellow-background1-color);
+        --icon: var(--yellow-secondary-color);
+        --icon-bg: var(--yellow-background2-color);
+        --hover-bg: var(--yellow-background2-color);
+        --hover-border: var(--yellow-background2-color);
       }
 
       &.yellow-green {
         --active-border: var(--yellowgreen-color-60);
-        --bg: var(--yellowgreen-color-10);
-        --border: var(--yellowgreen-color-10);
+        --bg: var(--yellowgreen-background1-color);
+        --border: var(--yellowgreen-background1-color);
         --icon: var(--yellowgreen-color-70);
-        --icon-bg: var(--yellowgreen-color-20);
-        --hover-bg: var(--yellowgreen-color-20);
-        --hover-border: var(--yellowgreen-color-20);
+        --icon-bg: var(--yellowgreen-background2-color);
+        --hover-bg: var(--yellowgreen-background2-color);
+        --hover-border: var(--yellowgreen-background2-color);
       }
 
       &.green {
-        --active-border: var(--green-color-60);
-        --bg: var(--green-color-10);
-        --border: var(--green-color-10);
-        --icon: var(--green-color-70);
-        --icon-bg: var(--green-color-20);
-        --hover-bg: var(--green-color-20);
-        --hover-border: var(--green-color-20);
+        --active-border: var(--green-tertiary-color);
+        --bg: var(--green-background1-color);
+        --border: var(--green-background1-color);
+        --icon: var(--green-secondary-color);
+        --icon-bg: var(--green-background2-color);
+        --hover-bg: var(--green-background2-color);
+        --hover-border: var(--green-background2-color);
       }
 
       &.blue-green {
-        --active-border: var(--bluegreen-color-60);
-        --bg: var(--bluegreen-color-10);
-        --border: var(--bluegreen-color-10);
-        --icon: var(--bluegreen-color-70);
-        --icon-bg: var(--bluegreen-color-20);
-        --hover-bg: var(--bluegreen-color-20);
-        --hover-border: var(--bluegreen-color-20);
+        --active-border: var(--bluegreen-tertiary-color);
+        --bg: var(--bluegreen-background1-color);
+        --border: var(--bluegreen-background1-color);
+        --icon: var(--bluegreen-secondary-color);
+        --icon-bg: var(--bluegreen-background2-color);
+        --hover-bg: var(--bluegreen-background2-color);
+        --hover-border: var(--bluegreen-background2-color);
       }
 
       &.blue {
-        --active-border: var(--blue-color-60);
-        --bg: var(--blue-color-10);
-        --border: var(--blue-color-10);
-        --icon: var(--blue-color-70);
-        --icon-bg: var(--blue-color-20);
-        --hover-bg: var(--blue-color-20);
-        --hover-border: var(--blue-color-20);
+        --active-border: var(--blue-tertiary-color);
+        --bg: var(--blue-background1-color);
+        --border: var(--blue-background1-color);
+        --icon: var(--blue-secondary-color);
+        --icon-bg: var(--blue-background2-color);
+        --hover-bg: var(--blue-background2-color);
+        --hover-border: var(--blue-background2-color);
       }
 
       &.blue-violet {
-        --active-border: var(--blueviolet-color-60);
-        --bg: var(--blueviolet-color-10);
-        --border: var(--blueviolet-color-10);
-        --icon: var(--blueviolet-color-70);
-        --icon-bg: var(--blueviolet-color-20);
-        --hover-bg: var(--blueviolet-color-20);
-        --hover-border: var(--blueviolet-color-20);
+        --active-border: var(--blueviolet-tertiary-color);
+        --bg: var(--blueviolet-background1-color);
+        --border: var(--blueviolet-background1-color);
+        --icon: var(--blueviolet-secondary-color);
+        --icon-bg: var(--blueviolet-background2-color);
+        --hover-bg: var(--blueviolet-background2-color);
+        --hover-border: var(--blueviolet-background2-color);
       }
 
       &.violet {
-        --active-border: var(--violet-color-60);
-        --bg: var(--violet-color-10);
-        --border: var(--violet-color-10);
-        --icon: var(--violet-color-70);
-        --icon-bg: var(--violet-color-20);
-        --hover-bg: var(--violet-color-20);
-        --hover-border: var(--violet-color-20);
+        --active-border: var(--violet-tertiary-color);
+        --bg: var(--violet-background1-color);
+        --border: var(--violet-background1-color);
+        --icon: var(--violet-secondary-color);
+        --icon-bg: var(--violet-background2-color);
+        --hover-bg: var(--violet-background2-color);
+        --hover-border: var(--violet-background2-color);
       }
 
       &.violet-red {
-        --active-border: var(--violetred-color-60);
-        --bg: var(--violetred-color-10);
-        --border: var(--violetred-color-10);
-        --icon: var(--violetred-color-70);
-        --icon-bg: var(--violetred-color-20);
-        --hover-bg: var(--violetred-color-20);
-        --hover-border: var(--violetred-color-20);
+        --active-border: var(--violetred-tertiary-color);
+        --bg: var(--violetred-background1-color);
+        --border: var(--violetred-background1-color);
+        --icon: var(--violetred-secondary-color);
+        --icon-bg: var(--violetred-background2-color);
+        --hover-bg: var(--violetred-background2-color);
+        --hover-border: var(--violetred-background2-color);
       }
 
       &.grey {
-        --active-border: var(--grey-color-60);
-        --bg: var(--grey-color-10);
-        --border: var(--grey-color-10);
-        --icon: var(--grey-color-70);
-        --icon-bg: var(--grey-color-20);
-        --hover-bg: var(--grey-color-20);
-        --hover-border: var(--grey-color-20);
+        --active-border: var(--grey-tertiary-color);
+        --bg: var(--grey-background1-color);
+        --border: var(--grey-background1-color);
+        --icon: var(--grey-secondary-color);
+        --icon-bg: var(--grey-background2-color);
+        --hover-bg: var(--grey-background2-color);
+        --hover-border: var(--grey-background2-color);
       }
 
       &.status-error {
diff --git a/src/components/Upload/upload.module.scss b/src/components/Upload/upload.module.scss
index aca675f97..5787ef591 100644
--- a/src/components/Upload/upload.module.scss
+++ b/src/components/Upload/upload.module.scss
@@ -115,7 +115,7 @@ $upload-picture-card-size: 104px;
       }
 
       &:hover &-info {
-        background-color: var(--grey-color-10);
+        background-color: var(--grey-background1-color);
       }
 
       &:hover &-card-actions-button {
@@ -496,8 +496,8 @@ $upload-picture-card-size: 104px;
       }
 
       a {
-        --bg: var(--primary-color-10);
-        --color: var(--primary-color-70);
+        --bg: var(--primary-background1-color);
+        --color: var(--primary-secondary-color);
         color: var(--color);
         background-color: var(--bg);
         border-radius: 50%;
@@ -528,8 +528,8 @@ $upload-picture-card-size: 104px;
         }
 
         &:active:not([disabled]) {
-          --bg: var(--primary-color-20);
-          color: var(--primary-color-80);
+          --bg: var(--primary-background2-color);
+          color: var(--primary-color);
         }
 
         &:has(.icon-view) {
@@ -653,7 +653,7 @@ $upload-picture-card-size: 104px;
     }
 
     &:focus-within:not(.upload-disabled) &:hover:not(.upload-disabled) {
-      border-color: var(--primary-color-70);
+      border-color: var(--primary-secondary-color);
     }
   }
 
diff --git a/src/styles/themes/_default-theme.scss b/src/styles/themes/_default-theme.scss
index e51acc3e0..f44905957 100644
--- a/src/styles/themes/_default-theme.scss
+++ b/src/styles/themes/_default-theme.scss
@@ -6,201 +6,291 @@
   // Primary base colors
   // Equivalent to Blue (Link) base colors
   // Distinct to support discreet theming scenarios
-  --primary-color-10: #ebf7ff; // $color-background1-primary (Surface 1)
-  --primary-color-20: #bce4ff; // $color-background2-primary (Surface 2)
-  --primary-color-30: #8ed0fa; // $color-background3-primary (Surface 3)
+  --primary-color-10: #ebf7ff;
+  --primary-color-20: #bce4ff;
+  --primary-color-30: #8ed0fa;
   --primary-color-40: #68baef;
   --primary-color-50: #47a4df;
-  --primary-color-60: #2c8cc9; // $color-tertiary (Graphics)
-  --primary-color-70: #146da6; // $color-secondary (Text)
-  --primary-color-80: #054d7b; // $color-primary (Extra high contrast)
+  --primary-color-60: #2c8cc9;
+  --primary-color-70: #146da6;
+  --primary-color-80: #054d7b;
   --primary-color-90: #002a47;
   --primary-color-100: #00060a;
-  --primary-color: #054d7b; // $color-primary (Extra high contrast)
+
+  --primary-background1-color: var(--primary-color-10); // Surface 1
+  --primary-background2-color: var(--primary-color-20); // Surface 2
+  --primary-background3-color: var(--primary-color-30); // Surface 3
+  --primary-tertiary-color: var(--primary-color-60); // Graphics
+  --primary-secondary-color: var(--primary-color-70); // Text
+  --primary-color: var(--primary-color-80); // Extra high contrast
 
   // Accent base colors
-  --accent-color-10: #ebfdff; // $color-background1-accent (Surface 1)
-  --accent-color-20: #b0f3fe; // $color-background2-accent (Surface 2)
-  --accent-color-30: #7be4f4; // $color-background3-accent (Surface 3)
+  --accent-color-10: #ebfdff;
+  --accent-color-20: #b0f3fe;
+  --accent-color-30: #7be4f4;
   --accent-color-40: #50cee1;
   --accent-color-50: #2db3c7;
-  --accent-color-60: #1999ac; // $color-tertiary-accent (Graphics)
-  --accent-color-70: #0b7b8b; // $color-secondary-accent (Text)
-  --accent-color-80: #025966; // $color-primary-accent (Extra high contrast)
+  --accent-color-60: #1999ac;
+  --accent-color-70: #0b7b8b;
+  --accent-color-80: #025966;
   --accent-color-90: #00333b;
   --accent-color-100: #00090a;
-  --accent-color: #025966; // $color-primary-accent (Extra high contrast)
+
+  --accent-background1-color: var(--accent-color-10); // Surface 1
+  --accent-background2-color: var(--accent-color-20); // Surface 2
+  --accent-background3-color: var(--accent-color-30); // Surface 3
+  --accent-tertiary-color: var(--accent-color-60); // Graphics
+  --accent-secondary-color: var(--accent-color-70); // Text
+  --accent-color: var(--accent-color-80); // Extra high contrast
 
   // Red base colors
-  --red-color-10: #ffefef; // $color-background1-red (Surface 1)
-  --red-color-20: #ffc6c6; // $color-background2-red (Surface 2)
-  --red-color-30: #ffa3a3; // $color-background3-red (Surface 3)
+  --red-color-10: #ffefef;
+  --red-color-20: #ffc6c6;
+  --red-color-30: #ffa3a3;
   --red-color-40: #f48686;
   --red-color-50: #e46f6f;
-  --red-color-60: #c45353; // $color-tertiary-red (Graphics)
-  --red-color-70: #993838; // $color-secondary-red (Text)
-  --red-color-80: #6c2222; // $color-primary-red (Extra high contrast)
+  --red-color-60: #c15151;
+  --red-color-70: #993838;
+  --red-color-80: #6c2222;
   --red-color-90: #3b1010;
   --red-color-100: #0a0202;
-  --red-color: #6c2222; // $color-primary-red (Extra high contrast)
+
+  --red-background1-color: var(--red-color-10); // Surface 1
+  --red-background2-color: var(--red-color-20); // Surface 2
+  --red-background3-color: var(--red-color-30); // Surface 3
+  --red-tertiary-color: var(--red-color-60); // Graphics
+  --red-secondary-color: var(--red-color-70); // Text
+  --red-color: var(--red-color-80); // Extra high contrast
 
   // Disruptive base colors
   // Equivalent to Red base colors
   // Distinct to support discreet theming scenarios
-  --disruptive-color-10: #ffefef; // $color-background1-disruptive (Surface 1)
-  --disruptive-color-20: #ffc6c6; // $color-background2-disruptive (Surface 2)
-  --disruptive-color-30: #ffa3a3; // $color-background3-disruptive (Surface 3)
+  --disruptive-color-10: #ffefef;
+  --disruptive-color-20: #ffc6c6;
+  --disruptive-color-30: #ffa3a3;
   --disruptive-color-40: #f48686;
   --disruptive-color-50: #e46f6f;
-  --disruptive-color-60: #c45353; // $color-tertiary-disruptive (Graphics)
-  --disruptive-color-70: #993838; // $color-secondary-disruptive (Text)
-  --disruptive-color-80: #6c2222; // $color-primary-disruptive (Extra high contrast)
+  --disruptive-color-60: #c15151;
+  --disruptive-color-70: #993838;
+  --disruptive-color-80: #6c2222;
   --disruptive-color-90: #3b1010;
   --disruptive-color-100: #0a0202;
-  --disruptive-color: #6c2222; // $color-primary-disruptive (Extra high contrast)
+
+  --disruptive-background1-color: var(--disruptive-color-10); // Surface 1
+  --disruptive-background2-color: var(--disruptive-color-20); // Surface 2
+  --disruptive-background3-color: var(--disruptive-color-30); // Surface 3
+  --disruptive-tertiary-color: var(--disruptive-color-60); // Graphics
+  --disruptive-secondary-color: var(--disruptive-color-70); // Text
+  --disruptive-color: var(--disruptive-color-80); // Extra high contrast
 
   // Red-Orange base colors
-  --redorange-color-10: #fff2ed; // $color-background1-red-orange (Surface 1)
-  --redorange-color-20: #ffd1bd; // $color-background2-red-orange (Surface 2)
-  --redorange-color-30: #ffb396; // $color-background3-red-orange (Surface 3)
+  --redorange-color-10: #fff2ed;
+  --redorange-color-20: #ffd1bd;
+  --redorange-color-30: #ffb396;
   --redorange-color-40: #ff9977;
   --redorange-color-50: #f8845f;
-  --redorange-color-60: #d26743; // $color-tertiary-red-orange (Graphics)
-  --redorange-color-70: #a54d2c; // $color-secondary-red-orange (Text)
-  --redorange-color-80: #78351a; // $color-primary-red-orange (Extra high contrast)
+  --redorange-color-60: #d26743;
+  --redorange-color-70: #a54d2c;
+  --redorange-color-80: #78351a;
   --redorange-color-90: #4c1f0c;
   --redorange-color-100: #1f0c03;
-  --redorange-color: #78351a; // $color-primary-red-orange (Extra high contrast)
+
+  --redorange-background1-color: var(--redorange-color-10); // Surface 1
+  --redorange-background2-color: var(--redorange-color-20); // Surface 2
+  --redorange-background3-color: var(--redorange-color-30); // Surface 3
+  --redorange-tertiary-color: var(--redorange-color-60); // Graphics
+  --redorange-secondary-color: var(--redorange-color-70); // Text
+  --redorange-color: var(--redorange-color-80); // Extra high contrast
 
   // Orange base colors
-  --orange-color-10: #fff8eb; // $color-background1-orange (Surface 1)
-  --orange-color-20: #ffe3b0; // $color-background2-orange (Surface 2)
-  --orange-color-30: #ffcd78; // $color-background3-orange (Surface 3)
+  --orange-color-10: #fff8eb;
+  --orange-color-20: #ffe3b0;
+  --orange-color-30: #ffcd78;
   --orange-color-40: #ffb650;
   --orange-color-50: #f29d31;
-  --orange-color-60: #ce811a; // $color-tertiary-orange (Graphics)
-  --orange-color-70: #9d6309; // $color-secondary-orange (Text)
-  --orange-color-80: #6c4500; // $color-primary-orange (Extra high contrast)
+  --orange-color-60: #c97e19;
+  --orange-color-70: #9d6309;
+  --orange-color-80: #6c4500;
   --orange-color-90: #3b2600;
   --orange-color-100: #0a0700;
-  --orange-color: #6c4500; // $color-primary-orange (Extra high contrast)
+
+  --orange-background1-color: var(--orange-color-10); // Surface 1
+  --orange-background2-color: var(--orange-color-20); // Surface 2
+  --orange-background3-color: var(--orange-color-30); // Surface 3
+  --orange-tertiary-color: var(--orange-color-60); // Graphics
+  --orange-secondary-color: var(--orange-color-70); // Text
+  --orange-color: var(--orange-color-80); // Extra high contrast
 
   // Yellow base colors
-  --yellow-color-10: #ffffeb; // $color-background1-yellow (Surface 1)
-  --yellow-color-20: #fff89c; // $color-background2-yellow (Surface 2)
-  --yellow-color-30: #ffe44e; // $color-background3-yellow (Surface 3)
+  --yellow-color-10: #ffffeb;
+  --yellow-color-20: #fff89c;
+  --yellow-color-30: #ffe44e;
   --yellow-color-40: #f1c40f;
   --yellow-color-50: #d6ad00;
-  --yellow-color-60: #ad9300; // $color-tertiary-yellow (Graphics)
-  --yellow-color-70: #857600; // $color-secondary-yellow (Text)
-  --yellow-color-80: #5c5500; // $color-primary-yellow (Extra high contrast)
+  --yellow-color-60: #a88f00;
+  --yellow-color-70: #857600;
+  --yellow-color-80: #5c5500;
   --yellow-color-90: #333100;
   --yellow-color-100: #0a0a00;
-  --yellow-color: #5c5500; // $color-primary-yellow (Extra high contrast)
+
+  --yellow-background1-color: var(--yellow-color-10); // Surface 1
+  --yellow-background2-color: var(--yellow-color-20); // Surface 2
+  --yellow-background3-color: var(--yellow-color-30); // Surface 3
+  --yellow-tertiary-color: var(--yellow-color-60); // Graphics
+  --yellow-secondary-color: var(--yellow-color-70); // Text
+  --yellow-color: var(--yellow-color-80); // Extra high contrast
 
   // Yellow-Green base colors
-  --yellowgreen-color-10: #fdfeeb; // $color-background1-yellow-green (Surface 1)
-  --yellowgreen-color-20: #f3f5b0; // $color-background2-yellow-green (Surface 2)
-  --yellowgreen-color-30: #e2e575; // $color-background3-yellow-green (Surface 3)
+  --yellowgreen-color-10: #fdfeeb;
+  --yellowgreen-color-20: #f3f5b0;
+  --yellowgreen-color-30: #e2e575;
   --yellowgreen-color-40: #cacd46;
   --yellowgreen-color-50: #abae1f;
-  --yellowgreen-color-60: #858707; // $color-tertiary-yellow-green (Graphics)
-  --yellowgreen-color-70: #6d6f00; // $color-secondary-yellow-green (Text)
-  --yellowgreen-color-80: #525400; // $color-primary-yellow-green (Extra high contrast)
+  --yellowgreen-color-60: #858707;
+  --yellowgreen-color-70: #6d6f00;
+  --yellowgreen-color-80: #525400;
   --yellowgreen-color-90: #343500;
   --yellowgreen-color-100: #131300;
-  --yellowgreen-color: #525400; // $color-primary-yellow-green (Extra high contrast)
+
+  --yellowgreen-background1-color: var(--yellowgreen-color-10); // Surface 1
+  --yellowgreen-background2-color: var(--yellowgreen-color-20); // Surface 2
+  --yellowgreen-background3-color: var(--yellowgreen-color-30); // Surface 3
+  --yellowgreen-tertiary-color: var(--yellowgreen-color-60); // Graphics
+  --yellowgreen-secondary-color: var(--yellowgreen-color-70); // Text
+  --yellowgreen-color: var(--yellowgreen-color-80); // Extra high contrast
 
   // Green base colors
-  --green-color-10: #f0fefa; // $color-background1-green (Surface 1)
-  --green-color-20: #b9f4e4; // $color-background2-green (Surface 2)
-  --green-color-30: #8ce1ca; // $color-background3-green (Surface 3)
+  --green-color-10: #f0fefa;
+  --green-color-20: #b9f4e4;
+  --green-color-30: #8ce1ca;
   --green-color-40: #67c5ac;
   --green-color-50: #51ab93;
-  --green-color-60: #3d8f79; // $color-tertiary-green (Graphics)
-  --green-color-70: #2b715f; // $color-secondary-green (Text)
-  --green-color-80: #1b5143; // $color-primary-green (Extra high contrast)
+  --green-color-60: #3d8f79;
+  --green-color-70: #2b715f;
+  --green-color-80: #1b5143;
   --green-color-90: #0e2e26;
   --green-color-100: #030a08;
-  --green-color: #1b5143; // $color-primary-green (Extra high contrast)
+
+  --green-background1-color: var(--green-color-10); // Surface 1
+  --green-background2-color: var(--green-color-20); // Surface 2
+  --green-background3-color: var(--green-color-30); // Surface 3
+  --green-tertiary-color: var(--green-color-60); // Graphics
+  --green-secondary-color: var(--green-color-70); // Text
+  --green-color: var(--green-color-80); // Extra high contrast
 
   // Blue-Green base colors
-  --bluegreen-color-10: #ebfdff; // $color-background1-blue-green (Surface 1)
-  --bluegreen-color-20: #b0f3fe; // $color-background2-blue-green (Surface 2)
-  --bluegreen-color-30: #7be4f4; // $color-background3-blue-green (Surface 3)
+  --bluegreen-color-10: #ebfdff;
+  --bluegreen-color-20: #b0f3fe;
+  --bluegreen-color-30: #7be4f4;
   --bluegreen-color-40: #50cee1;
   --bluegreen-color-50: #2db3c7;
-  --bluegreen-color-60: #1999ac; // $color-tertiary-blue-green (Graphics)
-  --bluegreen-color-70: #0b7b8b; // $color-secondary-blue-green (Text)
-  --bluegreen-color-80: #025966; // $color-primary-blue-green (Extra high contrast)
+  --bluegreen-color-60: #1999ac;
+  --bluegreen-color-70: #0b7b8b;
+  --bluegreen-color-80: #025966;
   --bluegreen-color-90: #00333b;
   --bluegreen-color-100: #00090a;
-  --bluegreen-color: #025966; // $color-primary-blue-green (Extra high contrast)
+
+  --bluegreen-background1-color: var(--bluegreen-color-10); // Surface 1
+  --bluegreen-background2-color: var(--bluegreen-color-20); // Surface 2
+  --bluegreen-background3-color: var(--bluegreen-color-30); // Surface 3
+  --bluegreen-tertiary-color: var(--bluegreen-color-60); // Graphics
+  --bluegreen-secondary-color: var(--bluegreen-color-70); // Text
+  --bluegreen-color: var(--bluegreen-color-80); // Extra high contrast
 
   // Blue (Link) base colors
-  --blue-color-10: #ebf7ff; // $color-background1-blue (Surface 1)
-  --blue-color-20: #bce4ff; // $color-background2-blue (Surface 2)
-  --blue-color-30: #8ed0fa; // $color-background3-blue (Surface 3)
+  --blue-color-10: #ebf7ff;
+  --blue-color-20: #bce4ff;
+  --blue-color-30: #8ed0fa;
   --blue-color-40: #68baef;
   --blue-color-50: #47a4df;
-  --blue-color-60: #2c8cc9; // $color-tertiary-blue (Graphics)
-  --blue-color-70: #146da6; // $color-secondary-blue (Text)
-  --blue-color-80: #054d7b; // $color-primary-blue (Extra high contrast)
+  --blue-color-60: #2c8cc9;
+  --blue-color-70: #146da6;
+  --blue-color-80: #054d7b;
   --blue-color-90: #002a47;
   --blue-color-100: #00060a;
-  --blue-color: #054d7b; // $color-primary-blue (Extra high contrast)
+
+  --blue-background1-color: var(--blue-color-10); // Surface 1
+  --blue-background2-color: var(--blue-color-20); // Surface 2
+  --blue-background3-color: var(--blue-color-30); // Surface 3
+  --blue-tertiary-color: var(--blue-color-60); // Graphics
+  --blue-secondary-color: var(--blue-color-70); // Text
+  --blue-color: var(--blue-color-80); // Extra high contrast
 
   // Blue-Violet base colors
-  --blueviolet-color-10: #f1f2ff; // $color-background1-blue-violet (Surface 1)
-  --blueviolet-color-20: #cacffc; // $color-background2-blue-violet (Surface 2)
-  --blueviolet-color-30: #a9b0f5; // $color-background3-blue-violet (Surface 3)
+  --blueviolet-color-10: #f1f2ff;
+  --blueviolet-color-20: #cacffc;
+  --blueviolet-color-30: #a9b0f5;
   --blueviolet-color-40: #8c95e8;
   --blueviolet-color-50: #757ed6;
-  --blueviolet-color-60: #5962b7; // $color-tertiary-blue-violet (Graphics)
-  --blueviolet-color-70: #414996; // $color-secondary-blue-violet (Text)
-  --blueviolet-color-80: #2b3271; // $color-primary-blue-violet (Extra high contrast)
+  --blueviolet-color-60: #5962b7;
+  --blueviolet-color-70: #414996;
+  --blueviolet-color-80: #2b3271;
   --blueviolet-color-90: #191d4a;
   --blueviolet-color-100: #090b1f;
-  --blueviolet-color: #2b3271; // $color-primary-blue-violet (Extra high contrast)
+
+  --blueviolet-background1-color: var(--blueviolet-color-10); // Surface 1
+  --blueviolet-background2-color: var(--blueviolet-color-20); // Surface 2
+  --blueviolet-background3-color: var(--blueviolet-color-30); // Surface 3
+  --blueviolet-tertiary-color: var(--blueviolet-color-60); // Graphics
+  --blueviolet-secondary-color: var(--blueviolet-color-70); // Text
+  --blueviolet-color: var(--blueviolet-color-80); // Extra high contrast
 
   // Violet base colors
-  --violet-color-10: #fbf6fb; // $color-background1-violet (Surface 1)
-  --violet-color-20: #ead3e8; // $color-background2-violet (Surface 2)
-  --violet-color-30: #d8b1d4; // $color-background3-violet (Surface 3)
+  --violet-color-10: #fbf6fb;
+  --violet-color-20: #ead3e8;
+  --violet-color-30: #d8b1d4;
   --violet-color-40: #c491bf;
   --violet-color-50: #ae72a8;
-  --violet-color-60: #975590; // $color-tertiary-violet (Graphics)
-  --violet-color-70: #7e3a77; // $color-secondary-violet (Text)
-  --violet-color-80: #5d2156; // $color-primary-violet (Extra high contrast)
+  --violet-color-60: #975590;
+  --violet-color-70: #7e3a77;
+  --violet-color-80: #5d2156;
   --violet-color-90: #350e31;
   --violet-color-100: #060106;
-  --violet-color: #5d2156; // $color-primary-violet (Extra high contrast)
+
+  --violet-background1-color: var(--violet-color-10); // Surface 1
+  --violet-background2-color: var(--violet-color-20); // Surface 2
+  --violet-background3-color: var(--violet-color-30); // Surface 3
+  --violet-tertiary-color: var(--violet-color-60); // Graphics
+  --violet-secondary-color: var(--violet-color-70); // Text
+  --violet-color: var(--violet-color-80); // Extra high contrast
 
   // Violet-Red base colors
-  --violetred-color-10: #fff0f9; // $color-background1-violet-red (Surface 1)
-  --violetred-color-20: #fcc8e7; // $color-background2-violet-red (Surface 2)
-  --violetred-color-30: #f3a5d4; // $color-background3-violet-red (Surface 3)
+  --violetred-color-10: #fff0f9;
+  --violetred-color-20: #fcc8e7;
+  --violetred-color-30: #f3a5d4;
   --violetred-color-40: #e688c0;
   --violetred-color-50: #d36fab;
-  --violetred-color-60: #b5548e; // $color-tertiary-violet-red (Graphics)
-  --violetred-color-70: #943d71; // $color-secondary-violet-red (Text)
-  --violetred-color-80: #702853; // $color-primary-violet-red (Extra high contrast)
+  --violetred-color-60: #b5548e;
+  --violetred-color-70: #943d71;
+  --violetred-color-80: #702853;
   --violetred-color-90: #491635;
   --violetred-color-100: #1f0816;
-  --violetred-color: #702853; // $color-primary-violet-red (Extra high contrast)
+
+  --violetred-background1-color: var(--violetred-color-10); // Surface 1
+  --violetred-background2-color: var(--violetred-color-20); // Surface 2
+  --violetred-background3-color: var(--violetred-color-30); // Surface 3
+  --violetred-tertiary-color: var(--violetred-color-60); // Graphics
+  --violetred-secondary-color: var(--violetred-color-70); // Text
+  --violetred-color: var(--violetred-color-80); // Extra high contrast
 
   // Grey (Neutral) base colors
-  --grey-color-10: #f6f7f8; // $color-background1-grey (Surface 1)
-  --grey-color-20: #d9dce1; // $color-background2-grey (Surface 2)
-  --grey-color-30: #bdc1c9; // $color-background3-grey (Surface 3)
+  --grey-color-10: #f6f7f8;
+  --grey-color-20: #d9dce1;
+  --grey-color-30: #bdc1c9;
   --grey-color-40: #a1a6b1;
   --grey-color-50: #858b98;
-  --grey-color-60: #69717f; // $color-tertiary-grey (Graphics)
-  --grey-color-70: #4f5666; // $color-secondary-grey (Text)
-  --grey-color-80: #343c4c; // $color-primary-grey (Extra high contrast)
+  --grey-color-60: #69717f;
+  --grey-color-70: #4f5666;
+  --grey-color-80: #343c4c;
   --grey-color-90: #1a212e;
   --grey-color-100: #05070a;
-  --grey-color: #343c4c; // $color-primary-grey (Extra high contrast)
+
+  --grey-background1-color: var(--grey-color-10); // Surface 1
+  --grey-background2-color: var(--grey-color-20); // Surface 2
+  --grey-background3-color: var(--grey-color-30); // Surface 3
+  --grey-tertiary-color: var(--grey-color-60); // Graphics
+  --grey-secondary-color: var(--grey-color-70); // Text
+  --grey-color: var(--grey-color-80); // Extra high contrast
 
   // Success (Validation) base colors
   --success-color: #2b715f;
@@ -260,26 +350,26 @@
   // ------ Glassmorphism theme ------
 
   // ------ Link theme ------
-  --anchor-color: var(--primary-color-70);
-  --anchor-disruptive-color: var(--disruptive-color-70);
-  --anchor-neutral-color: var(--grey-color-70);
-  --anchor-primary-color: var(--primary-color-70);
+  --anchor-color: var(--primary-secondary-color);
+  --anchor-disruptive-color: var(--disruptive-secondary-color);
+  --anchor-neutral-color: var(--grey-secondary-color);
+  --anchor-primary-color: var(--primary-secondary-color);
   --anchor-secondary-color: var(--grey-color-90);
-  --anchor-active-color: var(--primary-color-80);
-  --anchor-disruptive-active-color: var(--disruptive-color-80);
-  --anchor-neutral-active-color: var(--grey-color-80);
-  --anchor-primary-active-color: var(--primary-color-80);
+  --anchor-active-color: var(--primary-color);
+  --anchor-disruptive-active-color: var(--disruptive-color);
+  --anchor-neutral-active-color: var(--grey-color);
+  --anchor-primary-active-color: var(--primary-color);
   --anchor-secondary-active-color: var(--grey-color-90);
   --anchor-hover-color: var(--primary-color-90);
-  --anchor-disruptive-hover-color: var(--disruptive-color-70);
-  --anchor-neutral-hover-color: var(--primary-color-70);
-  --anchor-primary-hover-color: var(--primary-color-70);
-  --anchor-secondary-hover-color: var(--primary-color-70);
-  --anchor-visited-color: var(--violet-color-70);
-  --anchor-disruptive-visited-color: var(--violet-color-70);
-  --anchor-neutral-visited-color: var(--violet-color-70);
-  --anchor-primary-visited-color: var(--violet-color-70);
-  --anchor-secondary-visited-color: var(--violet-color-80);
+  --anchor-disruptive-hover-color: var(--disruptive-secondary-color);
+  --anchor-neutral-hover-color: var(--primary-secondary-color);
+  --anchor-primary-hover-color: var(--primary-secondary-color);
+  --anchor-secondary-hover-color: var(--primary-secondary-color);
+  --anchor-visited-color: var(--violet-secondary-color);
+  --anchor-disruptive-visited-color: var(--violet-secondary-color);
+  --anchor-neutral-visited-color: var(--violet-secondary-color);
+  --anchor-primary-visited-color: var(--violet-secondary-color);
+  --anchor-secondary-visited-color: var(--violet-color);
   // ------ Link theme ------
 
   // ------ Focus Visible theme ------
@@ -299,17 +389,17 @@
   // ------ Border Radius theme ------
 
   // ------ Input theme ------
-  --input-border-color: var(--grey-color-60);
-  --input-border-color-active: var(--grey-color-80);
+  --input-border-color: var(--grey-tertiary-color);
+  --input-border-color-active: var(--grey-color);
   --input-border-color-hover: var(--input-border-color-active);
-  --input-border-color-underline-active: var(--primary-color-70);
+  --input-border-color-underline-active: var(--primary-secondary-color);
   --input-border-color-underline-hover: var(--input-border-color-active);
   --input-background-color: var(--background-color);
-  --input-border-color: var(--grey-color-60);
-  --input-border-color-active: var(--grey-color-80);
+  --input-border-color: var(--grey-tertiary-color);
+  --input-border-color-active: var(--grey-color);
   --input-text-color: var(--text-primary-color);
   --input-placeholder-text-color: var(--text-secondary-color);
-  --input-readonly-background-color: var(--grey-color-10);
+  --input-readonly-background-color: var(--grey-background1-color);
   --input-readonly-text-color: var(--text-primary-color);
   --input-success-text-color: var(--text-primary-color);
   --input-success-border-color: var(--input-border-color);
@@ -326,11 +416,11 @@
   // ------ Tabs theme ------
   --tab-label: var(--text-secondary-color);
   --tab-background: transparent;
-  --tab-active-label: var(--primary-color-70);
+  --tab-active-label: var(--primary-secondary-color);
   --tab-active-background: transparent;
   --tab-hover-label: var(--primary-color);
   --tab-hover-background: transparent;
-  --tab-indicator-color: var(--primary-color-70);
+  --tab-indicator-color: var(--primary-secondary-color);
   --tab-small-active-background: transparent;
   --tab-small-hover-background: transparent;
   --tab-pill-border-radius: var(--border-radius-xl);
@@ -338,10 +428,10 @@
   --tab-pill-medium-padding: 6px;
   --tab-pill-small-padding: 4px;
   --tab-pill-label: var(--text-secondary-color);
-  --tab-pill-active-label: var(--primary-color-80);
-  --tab-pill-active-background: var(--primary-color-20);
+  --tab-pill-active-label: var(--primary-color);
+  --tab-pill-active-background: var(--primary-background2-color);
   --tab-pill-hover-label: var(--primary-color);
-  --tab-pill-background: var(--grey-color-10);
+  --tab-pill-background: var(--grey-background1-color);
   --tab-underline: var(--border-color);
   // ------ Tabs theme ------
 
@@ -357,10 +447,10 @@
   --stat-tab-background-color: var(--background-color);
   --stat-tab-border-color: var(--stat-tab-background-color);
   --stat-tab-icon-color: var(--stat-tab-label-color);
-  --stat-tab-icon-background-color: var(--grey-color-20);
-  --stat-tab-active-border-color: var(--grey-color-60);
-  --stat-tab-hover-background-color: var(--grey-color-20);
-  --stat-tab-hover-border-color: var(--grey-color-20);
+  --stat-tab-icon-background-color: var(--grey-background2-color);
+  --stat-tab-active-border-color: var(--grey-tertiary-color);
+  --stat-tab-hover-background-color: var(--grey-background2-color);
+  --stat-tab-hover-border-color: var(--grey-background2-color);
   // ------ Stat tab theme ------
 
   // ------ Navbar theme ------
@@ -369,7 +459,7 @@
   --navbar-text-hover-background: var(--navbar-background);
   --navbar-text-hover-color: var(--primary-color);
   --navbar-backdrop-filter: var(--backdrop-filter);
-  --navbar-border-bottom: 1px solid var(--grey-color-20);
+  --navbar-border-bottom: 1px solid var(--grey-background2-color);
   --navbar-box-shadow: none;
   // ------ Navbar theme ------
 
@@ -379,61 +469,71 @@
   --picker-border-color: var(--input-border-color);
   --picker-border-color-active: var(--input-border-color-active);
   --picker-cell-background-color: var(--background-color);
-  --picker-cell-background-color-active: var(--primary-color-20);
-  --picker-cell-background-color-hover: var(--accent-color-30);
-  --picker-cell-today-background-color: var(--accent-color-30);
+  --picker-cell-background-color-active: var(--primary-background2-color);
+  --picker-cell-background-color-hover: var(--accent-background3-color);
+  --picker-cell-today-background-color: var(--accent-background3-color);
   --picker-cell-today-foreground-color: var(--primary-color);
-  --picker-cell-selected-background-color-active: var(--accent-color-30);
-  --picker-cell-range-start-background-color-hover: var(--accent-color-30);
-  --picker-cell-range-start-background-color-active: var(--accent-color-30);
-  --picker-cell-range-end-background-color-hover: var(--accent-color-30);
-  --picker-cell-range-end-background-color-active: var(--accent-color-30);
+  --picker-cell-selected-background-color-active: var(
+    --accent-background3-color
+  );
+  --picker-cell-range-start-background-color-hover: var(
+    --accent-background3-color
+  );
+  --picker-cell-range-start-background-color-active: var(
+    --accent-background3-color
+  );
+  --picker-cell-range-end-background-color-hover: var(
+    --accent-background3-color
+  );
+  --picker-cell-range-end-background-color-active: var(
+    --accent-background3-color
+  );
   --picker-cell-foreground-color: var(--text-tertiary-color);
   --picker-cell-foreground-color-active: var(--primary-color);
   --picker-cell-foreground-color-hover: var(--primary-color);
   --picker-column-background-color: var(--background-color);
-  --picker-column-background-color-active: var(--primary-color-20);
-  --picker-column-background-color-hover: var(--primary-color-20);
+  --picker-column-background-color-active: var(--primary-background2-color);
+  --picker-column-background-color-hover: var(--primary-background2-color);
   --picker-column-foreground-color: var(--text-secondary-color);
   --picker-column-foreground-color-active: var(--primary-color);
   --picker-column-foreground-color-hover: var(--primary-color);
-  --picker-header-cell-foreground-color: var(--grey-color-60);
+  --picker-header-cell-foreground-color: var(--grey-tertiary-color);
   --picker-input-active-bar-color: var(--primary-color);
   --picker-input-background-color: var(--background-color);
   --picker-input-border-color-active: var(--primary-color-40);
   --picker-input-border-color-hover: var(--primary-color-40);
-  --picker-input-clear-icon-color: var(--grey-color-60);
-  --picker-input-clear-icon-color-active: var(--grey-color-60);
+  --picker-input-clear-icon-color: var(--grey-tertiary-color);
+  --picker-input-clear-icon-color-active: var(--grey-tertiary-color);
   --picker-input-foreground-color: var(--text-primary-color);
-  --picker-input-placeholder-color: var(--grey-color-60);
+  --picker-input-placeholder-color: var(--grey-tertiary-color);
   --picker-outline-color: var(--primary-color-40);
   // ------ Picker theme ------
 
   // ------ Table theme ------
   --table-background-color: var(--background-color);
   --table-foreground-color: var(--text-primary-color);
-  --table-background-alternate-color: var(--grey-color-10);
-  --table-border-color: var(--grey-color-20);
+  --table-background-alternate-color: var(--grey-background1-color);
+  --table-border-color: var(--grey-background2-color);
   --table-border-active-color: transparent;
   --table-header-background-color: var(--background-color);
   --table-header-foreground-color: var(--text-primary-color);
   --table-header-icon-color: var(--grey-color-40);
-  --table-header-icon-hover-color: var(--primary-color-80);
-  --table-header-cell-split-color: var(--grey-color-20);
+  --table-header-icon-hover-color: var(--primary-color);
+  --table-header-cell-split-color: var(--grey-background2-color);
   --table-body-sort-background-color: var(--background-color);
   --table-header-sort-background-color: var(--background-color);
-  --table-header-sort-active-background-color: var(--grey-color-10);
+  --table-header-sort-active-background-color: var(--grey-background1-color);
   --table-header-filter-background-color: var(--background-color);
-  --table-header-filter-active-background-color: var(--grey-color-10);
+  --table-header-filter-active-background-color: var(--grey-background1-color);
   --table-header-filter-dropdown-background-color: var(--background-color);
   --table-header-filter-buttons-background-color: var(--background-color);
   --table-expand-icon-background-color: var(--background-color);
-  --table-row-hover-background-color: var(--accent-color-10);
-  --table-row-selected-background-color: var(--grey-color-10);
-  --table-row-selected-hover-background-color: var(--accent-color-10);
+  --table-row-hover-background-color: var(--accent-background1-color);
+  --table-row-selected-background-color: var(--grey-background1-color);
+  --table-row-selected-hover-background-color: var(--accent-background1-color);
   --table-row-selected-foregroud-color: var(--text-primary-color);
-  --table-row-expanded-background-color: var(--grey-color-10);
-  --table-body-selected-sort-background-color: var(--grey-color-10);
+  --table-row-expanded-background-color: var(--grey-background1-color);
+  --table-body-selected-sort-background-color: var(--grey-background1-color);
   --table-footer-background-color: var(--background-color);
   --table-footer-foreground-color: var(--text-primary-color);
 
@@ -470,17 +570,17 @@
   --button-round-shape-border-radius: var(--border-radius-round);
   --button-pill-shape-border-radius: var(--border-radius-xl);
   --button-nudge-background-color-primary: var(--white-color);
-  --button-nudge-background-color-secondary: var(--accent-color-20);
+  --button-nudge-background-color-secondary: var(--accent-background2-color);
   --button-nudge-background-color-tertiary: var(--white-color);
-  --button-nudge-gradient-color-one: var(--primary-color-60);
-  --button-nudge-gradient-color-two: var(--primary-color-20);
-  --button-nudge-gradient-color-three: var(--primary-color-60);
+  --button-nudge-gradient-color-one: var(--primary-tertiary-color);
+  --button-nudge-gradient-color-two: var(--primary-background2-color);
+  --button-nudge-gradient-color-three: var(--primary-tertiary-color);
   // TODO: button text/font related vars
   // ------ Generic button vars ------
 
   // ------ Default Button theme ------
-  --button-default-text-color: var(--primary-color-70);
-  --button-default-background-color: var(--primary-color-10);
+  --button-default-text-color: var(--primary-secondary-color);
+  --button-default-background-color: var(--primary-background1-color);
   --button-default-border-width: 0;
   --button-default-border-style: solid;
   --button-default-border-color: var(--button-default-background-color);
@@ -491,25 +591,29 @@
   --button-default-hover-border-color: var(
     --button-default-hover-background-color
   );
-  --button-default-active-text-color: var(--primary-color-80);
-  --button-default-active-background-color: var(--primary-color-20);
+  --button-default-active-text-color: var(--primary-color);
+  --button-default-active-background-color: var(--primary-background2-color);
   --button-default-active-border-width: var(--button-default-border-width);
   --button-default-active-border-style: var(--button-default-border-style);
   --button-default-active-border-color: var(
     --button-default-active-background-color
   );
-  --button-default-split-divider-color: var(--primary-color-70);
+  --button-default-split-divider-color: var(--primary-secondary-color);
   // ------ Default Button theme ------
 
   // ------ Default Disruptive Button theme ------
-  --button-default-disruptive-text-color: var(--disruptive-color-70);
-  --button-default-disruptive-background-color: var(--disruptive-color-10);
+  --button-default-disruptive-text-color: var(--disruptive-secondary-color);
+  --button-default-disruptive-background-color: var(
+    --disruptive-background1-color
+  );
   --button-default-disruptive-border-width: 0;
   --button-default-disruptive-border-style: solid;
   --button-default-disruptive-border-color: var(
     --button-default-disruptive-background-color
   );
-  --button-default-disruptive-hover-text-color: var(--disruptive-color-70);
+  --button-default-disruptive-hover-text-color: var(
+    --disruptive-secondary-color
+  );
   --button-default-disruptive-hover-background-color: var(--background-color);
   --button-default-disruptive-hover-border-width: var(
     --button-default-disruptive-border-width
@@ -520,9 +624,9 @@
   --button-default-disruptive-hover-border-color: var(
     --button-default-disruptive-hover-background-color
   );
-  --button-default-disruptive-active-text-color: var(--disruptive-color-80);
+  --button-default-disruptive-active-text-color: var(--disruptive-color);
   --button-default-disruptive-active-background-color: var(
-    --disruptive-color-20
+    --disruptive-background2-color
   );
   --button-default-disruptive-active-border-width: var(
     --button-default-disruptive-border-width
@@ -533,47 +637,53 @@
   --button-default-disruptive-active-border-color: var(
     --button-default-disruptive-active-background-color
   );
-  --button-default-disruptive-split-divider-color: var(--disruptive-color-70);
+  --button-default-disruptive-split-divider-color: var(
+    --disruptive-secondary-color
+  );
   // ------ Default Disruptive Button theme ------
 
   // ------ Neutral Button theme ------
   --button-neutral-text-color: var(--text-secondary-color);
-  --button-neutral-background-color: var(--grey-color-10);
-  --button-neutral-counter-default-text-color: var(--grey-color-80);
+  --button-neutral-background-color: var(--grey-background1-color);
+  --button-neutral-counter-default-text-color: var(--grey-color);
   --button-neutral-hover-text-color: var(--button-neutral-text-color);
   --button-neutral-hover-background-color: var(--background-color);
-  --button-neutral-focus-visible-background-color: var(--grey-color-10);
+  --button-neutral-focus-visible-background-color: var(
+    --grey-background1-color
+  );
   --button-neutral-active-text-color: var(--button-neutral-text-color);
-  --button-neutral-active-background-color: var(--grey-color-20);
-  --button-neutral-split-divider-color: var(--grey-color-70);
+  --button-neutral-active-background-color: var(--grey-background2-color);
+  --button-neutral-split-divider-color: var(--grey-secondary-color);
   // ------ Neutral Button theme ------
 
   // ------ Primary Button theme ------
-  --button-primary-text-color: var(--primary-color-80);
-  --button-primary-background-color: var(--accent-color-20);
+  --button-primary-text-color: var(--primary-color);
+  --button-primary-background-color: var(--accent-background2-color);
   --button-primary-border-width: 0;
   --button-primary-border-style: solid;
   --button-primary-border-color: var(--button-primary-background-color);
   --button-primary-hover-text-color: var(--button-primary-text-color);
-  --button-primary-hover-background-color: var(--accent-color-10);
+  --button-primary-hover-background-color: var(--accent-background1-color);
   --button-primary-hover-border-width: var(--button-primary-border-width);
   --button-primary-hover-border-style: var(--button-primary-border-style);
   --button-primary-hover-border-color: var(
     --button-primary-hover-background-color
   );
   --button-primary-active-text-color: var(--button-primary-text-color);
-  --button-primary-active-background-color: var(--accent-color-30);
+  --button-primary-active-background-color: var(--accent-background3-color);
   --button-primary-active-border-width: var(--button-primary-border-width);
   --button-primary-active-border-style: var(--button-primary-border-style);
   --button-primary-active-border-color: var(
     --button-primary-active-background-color
   );
-  --button-primary-split-divider-color: var(--primary-color-80);
+  --button-primary-split-divider-color: var(--primary-color);
   // ------ Primary Button theme ------
 
   // ------ Primary Disruptive Button theme ------
-  --button-primary-disruptive-text-color: var(--disruptive-color-80);
-  --button-primary-disruptive-background-color: var(--disruptive-color-20);
+  --button-primary-disruptive-text-color: var(--disruptive-color);
+  --button-primary-disruptive-background-color: var(
+    --disruptive-background2-color
+  );
   --button-primary-disruptive-border-width: 0;
   --button-primary-disruptive-border-style: solid;
   --button-primary-disruptive-border-color: var(
@@ -583,7 +693,7 @@
     --button-primary-disruptive-text-color
   );
   --button-primary-disruptive-hover-background-color: var(
-    --disruptive-color-10
+    --disruptive-background1-color
   );
   --button-primary-disruptive-hover-border-width: var(
     --button-primary-disruptive-border-width
@@ -598,7 +708,7 @@
     --button-primary-disruptive-text-color
   );
   --button-primary-disruptive-active-background-color: var(
-    --disruptive-color-30
+    --disruptive-background3-color
   );
   --button-primary-disruptive-active-border-width: var(
     --button-primary-disruptive-border-width
@@ -609,39 +719,39 @@
   --button-primary-disruptive-active-border-color: var(
     --button-primary-disruptive-active-background-color
   );
-  --button-primary-disruptive-split-divider-color: var(--disruptive-color-80);
+  --button-primary-disruptive-split-divider-color: var(--disruptive-color);
   // ------ Primary Disruptive Button theme ------
 
   // ------ Secondary Button theme ------
-  --button-secondary-text-color: var(--primary-color-70);
+  --button-secondary-text-color: var(--primary-secondary-color);
   --button-secondary-background-color: var(--background-color);
   --button-secondary-border-width: 1px;
   --button-secondary-border-style: solid;
-  --button-secondary-border-color: var(--accent-color-60);
+  --button-secondary-border-color: var(--accent-tertiary-color);
   --button-secondary-hover-text-color: var(--button-secondary-text-color);
-  --button-secondary-hover-background-color: var(--accent-color-10);
+  --button-secondary-hover-background-color: var(--accent-background1-color);
   --button-secondary-hover-border-width: var(--button-secondary-border-width);
   --button-secondary-hover-border-style: var(--button-secondary-border-style);
   --button-secondary-hover-border-color: var(--button-secondary-border-color);
   --button-secondary-active-text-color: var(--button-secondary-text-color);
-  --button-secondary-active-background-color: var(--accent-color-20);
+  --button-secondary-active-background-color: var(--accent-background2-color);
   --button-secondary-active-border-width: var(--button-secondary-border-width);
   --button-secondary-active-border-style: var(--button-secondary-border-style);
   --button-secondary-active-border-color: var(--button-secondary-border-color);
-  --button-secondary-split-divider-color: var(--primary-color-70);
+  --button-secondary-split-divider-color: var(--primary-secondary-color);
   // ------ Secondary Button theme ------
 
   // ------ Secondary Disruptive Button theme ------
-  --button-secondary-disruptive-text-color: var(--disruptive-color-70);
+  --button-secondary-disruptive-text-color: var(--disruptive-secondary-color);
   --button-secondary-disruptive-background-color: var(--background-color);
   --button-secondary-disruptive-border-width: 1px;
   --button-secondary-disruptive-border-style: solid;
-  --button-secondary-disruptive-border-color: var(--disruptive-color-70);
+  --button-secondary-disruptive-border-color: var(--disruptive-secondary-color);
   --button-secondary-disruptive-hover-text-color: var(
     --button-secondary-disruptive-text-color
   );
   --button-secondary-disruptive-hover-background-color: var(
-    --disruptive-color-10
+    --disruptive-background1-color
   );
   --button-secondary-disruptive-hover-border-width: var(
     --button-secondary-disruptive-border-width
@@ -656,7 +766,7 @@
     --button-secondary-disruptive-text-color
   );
   --button-secondary-disruptive-active-background-color: var(
-    --disruptive-color-20
+    --disruptive-background2-color
   );
   --button-secondary-disruptive-active-border-width: var(
     --button-secondary-disruptive-border-width
@@ -667,56 +777,68 @@
   --button-secondary-disruptive-active-border-color: var(
     --button-secondary-disruptive-active-background-color
   );
-  --button-secondary-disruptive-split-divider-color: var(--disruptive-color-70);
+  --button-secondary-disruptive-split-divider-color: var(
+    --disruptive-secondary-color
+  );
   // ------ Secondary Disruptive Button theme ------
 
   // ------ System UI Button theme ------
-  --button-system-ui-text-color: var(--grey-color-60);
+  --button-system-ui-text-color: var(--grey-tertiary-color);
   --button-system-ui-background-color: var(--background-color);
-  --button-system-ui-counter-default-text-color: var(--grey-color-80);
+  --button-system-ui-counter-default-text-color: var(--grey-color);
   --button-system-ui-hover-text-color: var(--button-system-ui-text-color);
-  --button-system-ui-hover-background-color: var(--grey-color-10);
+  --button-system-ui-hover-background-color: var(--grey-background1-color);
   --button-system-ui-focus-visible-background-color: var(--background-color);
   --button-system-ui-active-text-color: var(--button-system-ui-text-color);
-  --button-system-ui-active-background-color: var(--grey-color-20);
-  --button-system-ui-split-divider-color: var(--grey-color-70);
+  --button-system-ui-active-background-color: var(--grey-background2-color);
+  --button-system-ui-split-divider-color: var(--grey-secondary-color);
   // ------ System UI Button theme ------
 
   // ------ Two State Button theme ------
-  --button-two-state-text-color: var(--grey-color-70);
-  --button-two-state-background-color: var(--grey-color-10);
+  --button-two-state-text-color: var(--grey-secondary-color);
+  --button-two-state-background-color: var(--grey-background1-color);
   --button-two-state-border-color: var(--button-two-state-background-color);
-  --button-two-state-default-counter-background-color: var(--green-color-20);
-  --button-two-state-hover-counter-background-color: var(--green-color-20);
-  --button-two-state-checked-counter-background-color: var(--green-color-10);
-  --button-two-state-focus-counter-background-color: var(--green-color-20);
-  --button-two-state-active-counter-background-color: var(--green-color-10);
-  --button-two-state-default-counter-text-color: var(--grey-color-80);
-  --button-two-state-hover-text-color: var(--accent-color-70);
-  --button-two-state-hover-background-color: var(--green-color-10);
+  --button-two-state-default-counter-background-color: var(
+    --green-background2-color
+  );
+  --button-two-state-hover-counter-background-color: var(
+    --green-background2-color
+  );
+  --button-two-state-checked-counter-background-color: var(
+    --green-background1-color
+  );
+  --button-two-state-focus-counter-background-color: var(
+    --green-background2-color
+  );
+  --button-two-state-active-counter-background-color: var(
+    --green-background1-color
+  );
+  --button-two-state-default-counter-text-color: var(--grey-color);
+  --button-two-state-hover-text-color: var(--accent-secondary-color);
+  --button-two-state-hover-background-color: var(--green-background1-color);
   --button-two-state-active-text-color: var(--accent-color);
-  --button-two-state-active-background-color: var(--green-color-20);
-  --button-two-state-checked-text-color: var(--accent-color-80);
-  --button-two-state-checked-background-color: var(--green-color-20);
+  --button-two-state-active-background-color: var(--green-background2-color);
+  --button-two-state-checked-text-color: var(--accent-color);
+  --button-two-state-checked-background-color: var(--green-background2-color);
   // ------ Two State Button theme ------
 
   // ------ Button Counter theme ------
-  --button-counter-default-background-color: var(--grey-color-20);
-  --button-counter-hover-background-color: var(--grey-color-20);
-  --button-counter-checked-background-color: var(--grey-color-10);
-  --button-counter-focus-background-color: var(--grey-color-20);
-  --button-counter-active-background-color: var(--grey-color-10);
-  --button-counter-default-text-color: var(--primary-color-80);
+  --button-counter-default-background-color: var(--grey-background2-color);
+  --button-counter-hover-background-color: var(--grey-background2-color);
+  --button-counter-checked-background-color: var(--grey-background1-color);
+  --button-counter-focus-background-color: var(--grey-background2-color);
+  --button-counter-active-background-color: var(--grey-background1-color);
+  --button-counter-default-text-color: var(--primary-color);
   // ------ Button Counter theme ------
 
   // ------ Badge theme ------
   --badge-font-family: var(--font-stack-full);
-  --badge-background-color: var(--grey-color-20);
+  --badge-background-color: var(--grey-background2-color);
   --badge-border-radius: 6px;
-  --badge-text-color: var(--grey-color-80);
-  --badge-active-background-color: var(--primary-color-20);
-  --badge-active-text-color: var(--primary-color-80);
-  --badge-disruptive-background-color: var(--disruptive-color-20);
+  --badge-text-color: var(--grey-color);
+  --badge-active-background-color: var(--primary-background2-color);
+  --badge-active-text-color: var(--primary-color);
+  --badge-disruptive-background-color: var(--disruptive-background2-color);
   --badge-disruptive-text-color: var(--disruptive-color);
   // ------ Badge theme ------
 
@@ -732,7 +854,7 @@
   --card-background-color: var(--background-color);
   --card-font-family: var(--font-stack-full);
   --card-text-color: var(--black-color);
-  --card-border-color: var(--grey-color-20);
+  --card-border-color: var(--grey-background2-color);
   --card-border-radius: var(--border-radius-xl);
   --card-border-width: 1px;
   --card-border-style: solid;
@@ -741,57 +863,61 @@
   --card-hover-box-shadow: 0 4px 16px 0 #0f141f29;
 
   // TODO: component implementation
-  --card-selected-border: 1px solid var(--blue-color-60);
+  --card-selected-border: 1px solid var(--blue-tertiary-color);
   --card-selected-box-shadow: 0px 1px 2px rgba(15, 20, 31, 0.12);
-  --card-hover-border: 1px solid var(--grey-color-30);
+  --card-hover-border: 1px solid var(--grey-background3-color);
   // ------ Card theme ------
 
   // ------ Info Bar theme ------
   --info-bar-border-radius: var(--border-radius-xl);
-  --info-bar-background-color: var(--grey-color-10);
-  --info-bar-button-active-background-color: var(--grey-color-20);
+  --info-bar-background-color: var(--grey-background1-color);
+  --info-bar-button-active-background-color: var(--grey-background2-color);
   --info-bar-button-hover-background-color: var(--background-color);
   --info-bar-text-color: var(--text-secondary-color);
-  --info-bar-positive-background-color: var(--green-color-10);
-  --info-bar-positive-button-active-background-color: var(--green-color-20);
-  --info-bar-positive-text-color: var(--green-color-70);
-  --info-bar-warning-background-color: var(--orange-color-10);
-  --info-bar-warning-button-active-background-color: var(--orange-color-20);
-  --info-bar-warning-text-color: var(--orange-color-70);
-  --info-bar-disruptive-background-color: var(--disruptive-color-10);
+  --info-bar-positive-background-color: var(--green-background1-color);
+  --info-bar-positive-button-active-background-color: var(
+    --green-background2-color
+  );
+  --info-bar-positive-text-color: var(--green-secondary-color);
+  --info-bar-warning-background-color: var(--orange-background1-color);
+  --info-bar-warning-button-active-background-color: var(
+    --orange-background2-color
+  );
+  --info-bar-warning-text-color: var(--orange-secondary-color);
+  --info-bar-disruptive-background-color: var(--disruptive-background1-color);
   --info-bar-disruptive-button-active-background-color: var(
-    --disruptive-color-20
+    --disruptive-background2-color
   );
-  --info-bar-disruptive-text-color: var(--disruptive-color-70);
+  --info-bar-disruptive-text-color: var(--disruptive-secondary-color);
   // ------ Info Bar theme ------
 
   // ------ Stepper/Timeline theme ------
-  --stepper-line-color: var(--primary-color-60);
+  --stepper-line-color: var(--primary-tertiary-color);
   --stepper-line-horizontal-offset: 6px;
   --stepper-line-width: 1px;
   --stepper-line-vertical-offset: 14px;
-  --step-default-active-background-color: var(--accent-color-20);
-  --step-default-active-border-color: var(--accent-color-60);
-  --step-default-active-icon-color: var(--primary-color-80);
+  --step-default-active-background-color: var(--accent-background2-color);
+  --step-default-active-border-color: var(--accent-tertiary-color);
+  --step-default-active-icon-color: var(--primary-color);
   --step-default-background-color: var(--background-color);
   --step-default-box-shadow: 0 0 0 2px var(--background-color);
-  --step-default-border-color: var(--accent-color-60);
-  --step-default-icon-color: var(--primary-color-80);
-  --step-default-hover-background-color: var(--accent-color-10);
+  --step-default-border-color: var(--accent-tertiary-color);
+  --step-default-icon-color: var(--primary-color);
+  --step-default-hover-background-color: var(--accent-background1-color);
   --step-default-hover-border-color: var(--step-default-active-border-color);
   --step-default-hover-icon-color: var(--step-default-icon-color);
-  --step-default-complete-background-color: var(--accent-color-20);
+  --step-default-complete-background-color: var(--accent-background2-color);
   --step-default-complete-border-color: var(
     --step-default-active-background-color
   );
-  --step-default-complete-icon-color: var(--primary-color-80);
-  --step-timeline-active-background-color: var(--primary-color-20);
-  --step-timeline-active-border-color: var(--primary-color-60);
-  --step-timeline-active-icon-color: var(--primary-color-80);
-  --step-timeline-background-color: var(--primary-color-10);
+  --step-default-complete-icon-color: var(--primary-color);
+  --step-timeline-active-background-color: var(--primary-background2-color);
+  --step-timeline-active-border-color: var(--primary-tertiary-color);
+  --step-timeline-active-icon-color: var(--primary-color);
+  --step-timeline-background-color: var(--primary-background1-color);
   --step-timeline-box-shadow: 0 0 0 2px var(--background-color);
   --step-timeline-border-color: var(--step-timeline-background-color);
-  --step-timeline-icon-color: var(--primary-color-70);
+  --step-timeline-icon-color: var(--primary-secondary-color);
   --step-timeline-hover-background-color: var(--background-color);
   --step-timeline-hover-border-color: var(--step-timeline-active-border-color);
   --step-timeline-hover-icon-color: var(--step-timeline-icon-color);
@@ -802,9 +928,9 @@
   --step-timeline-complete-icon-color: var(--step-timeline-icon-color);
 
   // ------ Highlight box theme ------
-  --highlight-background-color: var(--yellowgreen-color-10);
-  --highlight-border-color: var(--yellowgreen-color-30);
-  --highlight-foreground-color: var(--yellowgreen-color-80);
+  --highlight-background-color: var(--yellowgreen-background1-color);
+  --highlight-border-color: var(--yellowgreen-background3-color);
+  --highlight-foreground-color: var(--yellowgreen-color);
   // ------ Highlight box theme ------
 
   // ------ Dropdown theme ------
@@ -812,7 +938,7 @@
   // ------ Dropdown theme ------
 
   // ------ Skeleton theme ------
-  --skeleton-background-color: var(--grey-color-10);
+  --skeleton-background-color: var(--grey-background1-color);
   --skeleton-shimmer-color: #eaedf1;
   --skeleton-wave-background: linear-gradient(
     90deg,
@@ -827,39 +953,47 @@
   // ------ Spinner theme ------
 
   // ------ Slider theme ------
-  --slider-data-active-mark-one-background-color: var(--grey-color-30);
-  --slider-data-active-mark-one-border-color: var(--grey-color-60);
-  --slider-data-dot-background-color: var(--grey-color-10);
-  --slider-data-inactive-mark-one-background-color: var(--violet-color-30);
-  --slider-data-inactive-mark-one-border-color: var(--violetred-color-60);
-  --slider-data-inactive-mark-two-background-color: var(--blue-color-30);
-  --slider-data-inactive-mark-two-border-color: var(--blueviolet-color-60);
-  --slider-data-inactive-mark-three-background-color: var(--orange-color-30);
-  --slider-data-inactive-mark-three-border-color: var(--orange-color-60);
-  --slider-data-rail-background-color: var(--grey-color-30);
-  --slider-data-rail-border-color: var(--grey-color-60);
-  --slider-extremity-text-color: var(--grey-color-60);
-  --slider-benchmark-background-color: var(--grey-color-30);
-  --slider-benchmark-border-color: var(--grey-color-60);
-  --slider-rail-background-color: var(--accent-color-10);
-  --slider-rail-border-color: var(--primary-color-60);
-  --slider-thumb-color: var(--accent-color-20);
-  --slider-track-background-color: var(--primary-color-60);
-  --slider-track-border-color: var(--primary-color-60);
-  --slider-track-success-background-color: var(--green-color-30);
-  --slider-track-success-border-color: var(--green-color-60);
-  --slider-track-warning-background-color: var(--orange-color-30);
-  --slider-track-warning-border-color: var(--orange-color-60);
-  --slider-track-error-background-color: var(--red-color-30);
-  --slider-track-error-border-color: var(--red-color-60);
+  --slider-data-active-mark-one-background-color: var(--grey-background3-color);
+  --slider-data-active-mark-one-border-color: var(--grey-tertiary-color);
+  --slider-data-dot-background-color: var(--grey-background1-color);
+  --slider-data-inactive-mark-one-background-color: var(
+    --violet-background3-color
+  );
+  --slider-data-inactive-mark-one-border-color: var(--violetred-tertiary-color);
+  --slider-data-inactive-mark-two-background-color: var(
+    --blue-background3-color
+  );
+  --slider-data-inactive-mark-two-border-color: var(
+    --blueviolet-tertiary-color
+  );
+  --slider-data-inactive-mark-three-background-color: var(
+    --orange-background3-color
+  );
+  --slider-data-inactive-mark-three-border-color: var(--orange-tertiary-color);
+  --slider-data-rail-background-color: var(--grey-background3-color);
+  --slider-data-rail-border-color: var(--grey-tertiary-color);
+  --slider-extremity-text-color: var(--grey-tertiary-color);
+  --slider-benchmark-background-color: var(--grey-background3-color);
+  --slider-benchmark-border-color: var(--grey-tertiary-color);
+  --slider-rail-background-color: var(--accent-background1-color);
+  --slider-rail-border-color: var(--primary-tertiary-color);
+  --slider-thumb-color: var(--accent-background2-color);
+  --slider-track-background-color: var(--primary-tertiary-color);
+  --slider-track-border-color: var(--primary-tertiary-color);
+  --slider-track-success-background-color: var(--green-background3-color);
+  --slider-track-success-border-color: var(--green-tertiary-color);
+  --slider-track-warning-background-color: var(--orange-background3-color);
+  --slider-track-warning-border-color: var(--orange-tertiary-color);
+  --slider-track-error-background-color: var(--red-background3-color);
+  --slider-track-error-border-color: var(--red-tertiary-color);
   --slider-value-text-color: var(--text-secondary-color);
   // ------ Slider theme ------
 
   // ------ Tooltip theme ------
-  --tooltip-background-color-dark: var(--grey-color-80);
+  --tooltip-background-color-dark: var(--grey-color);
   --tooltip-background-color-light: var(--background-color);
   --tooltip-border-color-dark: var(--grey-color-40);
-  --tooltip-border-color-light: var(--grey-color-60);
+  --tooltip-border-color-light: var(--grey-tertiary-color);
   --tooltip-border-radius: var(--border-radius-s);
   --tooltip-border-style: solid;
   --tooltip-border-width: 1px;
@@ -875,14 +1009,14 @@
   --accordion-font-family: var(--font-stack-full);
   --accordion-body-background-color: var(--background-color);
   --accordion-body-text-color: var(--text-primary-color);
-  --accordion-border-color: var(--grey-color-20);
+  --accordion-border-color: var(--grey-background2-color);
   --accordion-border-style: solid;
   --accordion-border-width: 1px;
   --accordion-border: var(--accordion-border-width)
     var(--accordion-border-style) var(--accordion-border-color);
   --accordion-rectangle-shape-border-radius: var(--border-radius-s);
   --accordion-summary-background-color: var(--background-color);
-  --accordion-summary-background-hover-color: var(--grey-color-10);
+  --accordion-summary-background-hover-color: var(--grey-background1-color);
   --accordion-summary-text-color: var(--text-primary-color);
   --accordion-summary-text-hover-color: var(--text-primary-color);
   --accordion-pill-shape-border-radius: var(--border-radius-xl);
diff --git a/src/styles/themes/_definitions.scss b/src/styles/themes/_definitions.scss
index 48aad8785..65212a42a 100644
--- a/src/styles/themes/_definitions.scss
+++ b/src/styles/themes/_definitions.scss
@@ -73,7 +73,7 @@ $table-header-foreground-color: var(--table-header-foreground-color);
 $table-header-sort-background-color: var(--table-header-sort-background-color);
 $table-header-icon-color: var(--table-header-icon-color);
 $table-header-icon-hover-color: var(--table-header-icon-hover-color);
-$table-header-color: var(--grey-color-60);
+$table-header-color: var(--grey-tertiary-color);
 $table-body-sort-backgroud-color: var(--table-body-sort-backgroud-color);
 $table-row-hover-background-color: var(--table-row-hover-background-color);
 $table-row-selected-foregroud-color: var(--table-row-selected-foregroud-color);
@@ -114,10 +114,10 @@ $table-sticky-scroll-bar-active-background-color: transparent; // constant
 // Tree
 
 $tree-bg: var(--background-color);
-$tree-border-color: var(--grey-color-20);
+$tree-border-color: var(--grey-background2-color);
 $tree-directory-selected-color: var(--white-color);
 $tree-directory-selected-bg: var(--primary-color);
-$tree-node-hover-bg: var(--grey-color-10);
+$tree-node-hover-bg: var(--grey-background1-color);
 $tree-node-selected-bg: var(--primary-color);
 
 // Picker