indicator-ui 0.0.5 → 0.0.6

package/dist/index.css

@@ -19,6 +19,74 @@
   font-weight: 600;
   font-style: normal;
 }
+:root {
+  --base-white: #FFFFFF;
+  --base-black: #000000;
+  --gray-25: #FCFCFD;
+  --gray-50: #F9FAFB;
+  --gray-100: #F2F4F7;
+  --gray-200: #EAECF0;
+  --gray-300: #D0D5DD;
+  --gray-400: #98A2B3;
+  --gray-500: #667085;
+  --gray-600: #475467;
+  --gray-700: #344054;
+  --gray-800: #1D2939;
+  --gray-900: #101828;
+  --gray-950: #0C111D;
+  --primary-25: #FCFAFF;
+  --primary-50: #F9F5FF;
+  --primary-100: #F4EBFF;
+  --primary-200: #E9D7FE;
+  --primary-300: #D6BBFB;
+  --primary-400: #B692F6;
+  --primary-500: #9E77ED;
+  --primary-600: #7F56D9;
+  --primary-700: #6941C6;
+  --primary-800: #53389E;
+  --primary-900: #42307D;
+  --primary-950: #2C1C5F;
+  --error-25: #FFFBFA;
+  --error-50: #FEF3F2;
+  --error-100: #FEE4E2;
+  --error-200: #FECDCA;
+  --error-300: #FDA29B;
+  --error-400: #F97066;
+  --error-500: #F04438;
+  --error-600: #D92D20;
+  --error-700: #B42318;
+  --error-800: #912018;
+  --error-900: #7A271A;
+  --error-950: #FEFDF0;
+  --warning-25: #FFFCF5;
+  --warning-50: #FFFAEB;
+  --warning-100: #FEF0C7;
+  --warning-200: #FEDF89;
+  --warning-300: #FEC84B;
+  --warning-400: #FDB022;
+  --warning-500: #F79009;
+  --warning-600: #DC6803;
+  --warning-700: #B54708;
+  --warning-800: #93370D;
+  --warning-900: #7A2E0E;
+  --warning-950: #4E1D09;
+}
+
+:root {
+  --blue-dark-25: #F5F8FF;
+  --blue-dark-50: #EFF4FF;
+  --blue-dark-100: #D1E0FF;
+  --blue-dark-200: #B2CCFF;
+  --blue-dark-300: #84ADFF;
+  --blue-dark-400: #528BFF;
+  --blue-dark-500: #2970FF;
+  --blue-dark-600: #155EEF;
+  --blue-dark-700: #004EEB;
+  --blue-dark-800: #0040C1;
+  --blue-dark-900: #00359E;
+  --blue-dark-950: #002266;
+}
+
 .Buttons-module__button___I3yLe {
   display: flex;
   flex-direction: row;
@@ -135,111 +203,111 @@
 }
 .Buttons-module__button___I3yLe.Buttons-module__primary____crHN {
   border-radius: 8px;
-  background-color: #2970FF;
+  background-color: var(--blue-dark-500);
   box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
 }
 .Buttons-module__button___I3yLe.Buttons-module__primary____crHN .Buttons-module__icon___U2AOU svg * {
-  stroke: #FFFFFF;
+  stroke: var(--base-white);
 }
 .Buttons-module__button___I3yLe.Buttons-module__primary____crHN .Buttons-module__text___htxqX {
-  color: #FFFFFF;
+  color: var(--base-white);
 }
 .Buttons-module__button___I3yLe.Buttons-module__primary____crHN:hover {
-  background-color: #155EEF;
+  background-color: var(--blue-dark-600);
 }
 .Buttons-module__button___I3yLe.Buttons-module__primary____crHN:focus {
-  background-color: #2970FF;
-  box-shadow: 0 0 0 4px #F2F4F7, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
+  background-color: var(--blue-dark-500);
+  box-shadow: 0 0 0 4px var(--gray-100), 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
 }
 .Buttons-module__button___I3yLe.Buttons-module__primary____crHN:disabled {
   opacity: 0.3;
 }
 .Buttons-module__button___I3yLe.Buttons-module__secondaryColor___GONLZ {
   border-radius: 8px;
-  background-color: #FFFFFF;
-  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922), 0 0 0 1px #B2CCFF;
+  background-color: var(--base-white);
+  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922), 0 0 0 1px var(--blue-dark-200);
 }
 .Buttons-module__button___I3yLe.Buttons-module__secondaryColor___GONLZ .Buttons-module__icon___U2AOU svg * {
-  stroke: #2970FF;
+  stroke: var(--blue-dark-500);
 }
 .Buttons-module__button___I3yLe.Buttons-module__secondaryColor___GONLZ .Buttons-module__text___htxqX {
-  color: #2970FF;
+  color: var(--blue-dark-500);
 }
 .Buttons-module__button___I3yLe.Buttons-module__secondaryColor___GONLZ:hover {
-  background-color: #EFF4FF;
-  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922), 0 0 0 1px #84ADFF;
+  background-color: var(--blue-dark-50);
+  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922), 0 0 0 1px var(--blue-dark-300);
 }
 .Buttons-module__button___I3yLe.Buttons-module__secondaryColor___GONLZ:focus {
-  box-shadow: 0 0 0 4px #F2F4F7, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922), 0 0 0 1px #84ADFF;
+  box-shadow: 0 0 0 4px var(--gray-100), 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922), 0 0 0 1px var(--blue-dark-300);
 }
 .Buttons-module__button___I3yLe.Buttons-module__secondaryColor___GONLZ:disabled {
   opacity: 0.5;
 }
 .Buttons-module__button___I3yLe.Buttons-module__secondaryGray___yu1Ne {
   border-radius: 8px;
-  background-color: #FFFFFF;
-  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922), 0 0 0 1px #D0D5DD;
+  background-color: var(--base-white);
+  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922), 0 0 0 1px var(--gray-300);
 }
 .Buttons-module__button___I3yLe.Buttons-module__secondaryGray___yu1Ne .Buttons-module__icon___U2AOU svg * {
-  stroke: #344054;
+  stroke: var(--gray-700);
 }
 .Buttons-module__button___I3yLe.Buttons-module__secondaryGray___yu1Ne .Buttons-module__text___htxqX {
-  color: #344054;
+  color: var(--gray-700);
 }
 .Buttons-module__button___I3yLe.Buttons-module__secondaryGray___yu1Ne:hover {
-  background-color: #F9FAFB;
-  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922), 0 0 0 1px #D0D5DD;
+  background-color: var(--gray-50);
+  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922), 0 0 0 1px var(--gray-300);
 }
 .Buttons-module__button___I3yLe.Buttons-module__secondaryGray___yu1Ne:hover .Buttons-module__text___htxqX {
-  color: #1D2939;
+  color: var(--gray-800);
 }
 .Buttons-module__button___I3yLe.Buttons-module__secondaryGray___yu1Ne:focus {
-  box-shadow: 0 0 0 4px #F2F4F7, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922), 0 0 0 1px #D0D5DD;
+  box-shadow: 0 0 0 4px var(--gray-100), 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922), 0 0 0 1px var(--gray-300);
 }
 .Buttons-module__button___I3yLe.Buttons-module__secondaryGray___yu1Ne:disabled {
   opacity: 0.5;
 }
 .Buttons-module__button___I3yLe.Buttons-module__tertiaryWhite___QIZOq .Buttons-module__icon___U2AOU svg * {
-  stroke: #D1E0FF;
+  stroke: var(--blue-dark-100);
 }
 .Buttons-module__button___I3yLe.Buttons-module__tertiaryWhite___QIZOq .Buttons-module__text___htxqX {
-  color: #D1E0FF;
+  color: var(--blue-dark-100);
 }
 .Buttons-module__button___I3yLe.Buttons-module__tertiaryWhite___QIZOq:hover .Buttons-module__text___htxqX {
-  color: #FFFFFF;
+  color: var(--base-white);
 }
 .Buttons-module__button___I3yLe.Buttons-module__tertiaryWhite___QIZOq:hover .Buttons-module__icon___U2AOU svg * {
-  stroke: #FFFFFF;
+  stroke: var(--base-white);
 }
 .Buttons-module__button___I3yLe.Buttons-module__tertiaryWhite___QIZOq:disabled {
   opacity: 0.5;
 }
 .Buttons-module__button___I3yLe.Buttons-module__tertiaryColor___DwXbw .Buttons-module__icon___U2AOU svg * {
-  stroke: #2970FF;
+  stroke: var(--blue-dark-500);
 }
 .Buttons-module__button___I3yLe.Buttons-module__tertiaryColor___DwXbw .Buttons-module__text___htxqX {
-  color: #2970FF;
+  color: var(--blue-dark-500);
 }
 .Buttons-module__button___I3yLe.Buttons-module__tertiaryColor___DwXbw:hover .Buttons-module__text___htxqX {
-  color: #004EEB;
+  color: var(--blue-dark-700);
 }
 .Buttons-module__button___I3yLe.Buttons-module__tertiaryColor___DwXbw:hover .Buttons-module__icon___U2AOU svg * {
-  stroke: #004EEB;
+  stroke: var(--blue-dark-700);
 }
 .Buttons-module__button___I3yLe.Buttons-module__tertiaryColor___DwXbw:disabled {
   opacity: 0.5;
 }
 .Buttons-module__button___I3yLe.Buttons-module__tertiaryGray___y75cu .Buttons-module__icon___U2AOU svg * {
-  stroke: #344054;
+  stroke: var(--gray-700);
 }
 .Buttons-module__button___I3yLe.Buttons-module__tertiaryGray___y75cu .Buttons-module__text___htxqX {
-  color: #344054;
+  color: var(--gray-700);
 }
 .Buttons-module__button___I3yLe.Buttons-module__tertiaryGray___y75cu:hover .Buttons-module__text___htxqX {
-  color: #101828;
+  color: var(--gray-900);
 }
 .Buttons-module__button___I3yLe.Buttons-module__tertiaryGray___y75cu:hover .Buttons-module__icon___U2AOU svg * {
-  stroke: #101828;
+  stroke: var(--gray-900);
 }
 .Buttons-module__button___I3yLe.Buttons-module__tertiaryGray___y75cu:disabled {
   opacity: 0.5;
@@ -249,17 +317,17 @@
   gap: 4px;
 }
 .Buttons-module__button___I3yLe.Buttons-module__linkColor___Kg7EN .Buttons-module__icon___U2AOU svg * {
-  stroke: #2970FF;
+  stroke: var(--blue-dark-500);
 }
 .Buttons-module__button___I3yLe.Buttons-module__linkColor___Kg7EN .Buttons-module__text___htxqX {
-  color: #2970FF;
+  color: var(--blue-dark-500);
   padding: 0 !important;
 }
 .Buttons-module__button___I3yLe.Buttons-module__linkColor___Kg7EN:hover .Buttons-module__text___htxqX {
-  color: #004EEB;
+  color: var(--blue-dark-700);
 }
 .Buttons-module__button___I3yLe.Buttons-module__linkColor___Kg7EN:hover .Buttons-module__icon___U2AOU svg * {
-  stroke: #004EEB;
+  stroke: var(--blue-dark-700);
 }
 .Buttons-module__button___I3yLe.Buttons-module__linkColor___Kg7EN:disabled {
   opacity: 0.5;
@@ -269,17 +337,17 @@
   gap: 4px;
 }
 .Buttons-module__button___I3yLe.Buttons-module__linkBlack___WfA7t .Buttons-module__icon___U2AOU svg * {
-  stroke: #344054;
+  stroke: var(--gray-700);
 }
 .Buttons-module__button___I3yLe.Buttons-module__linkBlack___WfA7t .Buttons-module__text___htxqX {
-  color: #344054;
+  color: var(--gray-700);
   padding: 0 !important;
 }
 .Buttons-module__button___I3yLe.Buttons-module__linkBlack___WfA7t:hover .Buttons-module__text___htxqX {
-  color: #101828;
+  color: var(--gray-900);
 }
 .Buttons-module__button___I3yLe.Buttons-module__linkBlack___WfA7t:hover .Buttons-module__icon___U2AOU svg * {
-  stroke: #101828;
+  stroke: var(--gray-900);
 }
 .Buttons-module__button___I3yLe.Buttons-module__linkBlack___WfA7t:disabled {
   opacity: 0.5;
@@ -289,93 +357,93 @@
   gap: 4px;
 }
 .Buttons-module__button___I3yLe.Buttons-module__linkGray___CQYUd .Buttons-module__icon___U2AOU svg * {
-  stroke: #98A2B3;
+  stroke: var(--gray-400);
 }
 .Buttons-module__button___I3yLe.Buttons-module__linkGray___CQYUd .Buttons-module__text___htxqX {
-  color: #98A2B3;
+  color: var(--gray-400);
   padding: 0 !important;
 }
 .Buttons-module__button___I3yLe.Buttons-module__linkGray___CQYUd:hover .Buttons-module__text___htxqX {
-  color: #667085;
+  color: var(--gray-500);
 }
 .Buttons-module__button___I3yLe.Buttons-module__linkGray___CQYUd:hover .Buttons-module__icon___U2AOU svg * {
-  stroke: #667085;
+  stroke: var(--gray-500);
 }
 .Buttons-module__button___I3yLe.Buttons-module__linkGray___CQYUd:disabled {
   opacity: 0.5;
 }
 .Buttons-module__button___I3yLe.Buttons-module__tabActive___chlqq {
   border-radius: 6px;
-  background-color: #FFFFFF;
+  background-color: var(--base-white);
   box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
 }
 .Buttons-module__button___I3yLe.Buttons-module__tabActive___chlqq .Buttons-module__icon___U2AOU svg * {
-  stroke: #344054;
+  stroke: var(--gray-700);
 }
 .Buttons-module__button___I3yLe.Buttons-module__tabActive___chlqq .Buttons-module__text___htxqX {
-  color: #344054;
+  color: var(--gray-700);
 }
 .Buttons-module__button___I3yLe.Buttons-module__tabActive___chlqq:hover .Buttons-module__icon___U2AOU svg * {
-  stroke: #101828;
+  stroke: var(--gray-900);
 }
 .Buttons-module__button___I3yLe.Buttons-module__tabActive___chlqq:hover .Buttons-module__text___htxqX {
-  color: #101828;
+  color: var(--gray-900);
 }
 .Buttons-module__button___I3yLe.Buttons-module__tabActive___chlqq:disabled {
   opacity: 0.5;
 }
 .Buttons-module__button___I3yLe.Buttons-module__tab___yBTjo {
   border-radius: 6px;
-  background-color: #F2F4F7;
+  background-color: var(--gray-100);
   box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
 }
 .Buttons-module__button___I3yLe.Buttons-module__tab___yBTjo .Buttons-module__icon___U2AOU svg * {
-  stroke: #667085;
+  stroke: var(--gray-500);
 }
 .Buttons-module__button___I3yLe.Buttons-module__tab___yBTjo .Buttons-module__text___htxqX {
-  color: #667085;
+  color: var(--gray-500);
 }
 .Buttons-module__button___I3yLe.Buttons-module__tab___yBTjo:hover {
-  background-color: #EAECF0;
+  background-color: var(--gray-200);
 }
 .Buttons-module__button___I3yLe.Buttons-module__tab___yBTjo:hover .Buttons-module__icon___U2AOU svg * {
-  stroke: #1D2939;
+  stroke: var(--gray-800);
 }
 .Buttons-module__button___I3yLe.Buttons-module__tab___yBTjo:hover .Buttons-module__text___htxqX {
-  color: #1D2939;
+  color: var(--gray-800);
 }
 .Buttons-module__button___I3yLe.Buttons-module__tab___yBTjo:disabled {
   opacity: 0.5;
 }
 .Buttons-module__button___I3yLe.Buttons-module__warning___RaAeB.Buttons-module__primary____crHN {
   border-radius: 8px;
-  background-color: #F04438;
+  background-color: var(--error-500);
   box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
 }
 .Buttons-module__button___I3yLe.Buttons-module__warning___RaAeB.Buttons-module__primary____crHN:hover {
-  background-color: #D92D20;
+  background-color: var(--error-600);
 }
 .Buttons-module__button___I3yLe.Buttons-module__warning___RaAeB.Buttons-module__primary____crHN:focus {
-  background-color: #F04438;
+  background-color: var(--error-500);
 }
 .Buttons-module__button___I3yLe.Buttons-module__warning___RaAeB.Buttons-module__primary____crHN:disabled {
   opacity: 0.3;
 }
 .Buttons-module__button___I3yLe.Buttons-module__warning___RaAeB.Buttons-module__secondaryColor___GONLZ {
-  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922), 0 0 0 1px #FECDCA;
+  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922), 0 0 0 1px var(--error-200);
 }
 .Buttons-module__button___I3yLe.Buttons-module__warning___RaAeB.Buttons-module__secondaryColor___GONLZ .Buttons-module__icon___U2AOU svg * {
-  stroke: #F04438;
+  stroke: var(--error-500);
 }
 .Buttons-module__button___I3yLe.Buttons-module__warning___RaAeB.Buttons-module__secondaryColor___GONLZ .Buttons-module__text___htxqX {
-  color: #F04438;
+  color: var(--error-500);
 }
 .Buttons-module__button___I3yLe.Buttons-module__warning___RaAeB.Buttons-module__secondaryColor___GONLZ:hover {
-  background-color: #FEF3F2;
-  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922), 0 0 0 1px #F97066;
+  background-color: var(--error-50);
+  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922), 0 0 0 1px var(--error-400);
 }
 .Buttons-module__button___I3yLe.Buttons-module__warning___RaAeB.Buttons-module__secondaryColor___GONLZ:focus {
-  box-shadow: 0 0 0 4px #F2F4F7, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922), 0 0 0 1px #FECDCA;
+  box-shadow: 0 0 0 4px var(--gray-100), 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922), 0 0 0 1px var(--error-200);
 }
 .Buttons-module__button___I3yLe.Buttons-module__warning___RaAeB.Buttons-module__secondaryColor___GONLZ:disabled {
   opacity: 0.5;
@@ -401,6 +469,74 @@
   font-weight: 600;
   font-style: normal;
 }
+:root {
+  --base-white: #FFFFFF;
+  --base-black: #000000;
+  --gray-25: #FCFCFD;
+  --gray-50: #F9FAFB;
+  --gray-100: #F2F4F7;
+  --gray-200: #EAECF0;
+  --gray-300: #D0D5DD;
+  --gray-400: #98A2B3;
+  --gray-500: #667085;
+  --gray-600: #475467;
+  --gray-700: #344054;
+  --gray-800: #1D2939;
+  --gray-900: #101828;
+  --gray-950: #0C111D;
+  --primary-25: #FCFAFF;
+  --primary-50: #F9F5FF;
+  --primary-100: #F4EBFF;
+  --primary-200: #E9D7FE;
+  --primary-300: #D6BBFB;
+  --primary-400: #B692F6;
+  --primary-500: #9E77ED;
+  --primary-600: #7F56D9;
+  --primary-700: #6941C6;
+  --primary-800: #53389E;
+  --primary-900: #42307D;
+  --primary-950: #2C1C5F;
+  --error-25: #FFFBFA;
+  --error-50: #FEF3F2;
+  --error-100: #FEE4E2;
+  --error-200: #FECDCA;
+  --error-300: #FDA29B;
+  --error-400: #F97066;
+  --error-500: #F04438;
+  --error-600: #D92D20;
+  --error-700: #B42318;
+  --error-800: #912018;
+  --error-900: #7A271A;
+  --error-950: #FEFDF0;
+  --warning-25: #FFFCF5;
+  --warning-50: #FFFAEB;
+  --warning-100: #FEF0C7;
+  --warning-200: #FEDF89;
+  --warning-300: #FEC84B;
+  --warning-400: #FDB022;
+  --warning-500: #F79009;
+  --warning-600: #DC6803;
+  --warning-700: #B54708;
+  --warning-800: #93370D;
+  --warning-900: #7A2E0E;
+  --warning-950: #4E1D09;
+}
+
+:root {
+  --blue-dark-25: #F5F8FF;
+  --blue-dark-50: #EFF4FF;
+  --blue-dark-100: #D1E0FF;
+  --blue-dark-200: #B2CCFF;
+  --blue-dark-300: #84ADFF;
+  --blue-dark-400: #528BFF;
+  --blue-dark-500: #2970FF;
+  --blue-dark-600: #155EEF;
+  --blue-dark-700: #004EEB;
+  --blue-dark-800: #0040C1;
+  --blue-dark-900: #00359E;
+  --blue-dark-950: #002266;
+}
+
 .MicroButton-module__button___QMj95 {
   width: fit-content;
   height: fit-content;
@@ -418,19 +554,19 @@
   background: none;
 }
 .MicroButton-module__button___QMj95.MicroButton-module__light___pwfS3 svg * {
-  stroke: #98A2B3;
+  stroke: var(--gray-400);
 }
 .MicroButton-module__button___QMj95.MicroButton-module__light___pwfS3:hover {
-  background-color: #EAECF0;
+  background-color: var(--gray-200);
 }
 .MicroButton-module__button___QMj95.MicroButton-module__light___pwfS3:hover svg * {
-  stroke: #475467;
+  stroke: var(--gray-600);
 }
 .MicroButton-module__button___QMj95.MicroButton-module__dark___YCw8u {
   background-color: rgba(12, 17, 29, 0.5019607843);
 }
 .MicroButton-module__button___QMj95.MicroButton-module__dark___YCw8u svg * {
-  stroke: #FFFFFF;
+  stroke: var(--base-white);
 }
 .MicroButton-module__button___QMj95.MicroButton-module__dark___YCw8u:hover {
   background-color: rgba(12, 17, 29, 0.8);
@@ -439,88 +575,88 @@
   background: none;
 }
 .MicroButton-module__button___QMj95.MicroButton-module__gray___pwAy2 svg * {
-  stroke: #667085;
+  stroke: var(--gray-500);
 }
 .MicroButton-module__button___QMj95.MicroButton-module__gray___pwAy2:hover {
-  background-color: #FFFFFF;
+  background-color: var(--base-white);
 }
 .MicroButton-module__button___QMj95.MicroButton-module__gray___pwAy2:hover svg * {
-  stroke: #475467;
+  stroke: var(--gray-600);
 }
 .MicroButton-module__button___QMj95.MicroButton-module__color___RO79e {
   background: none;
 }
 .MicroButton-module__button___QMj95.MicroButton-module__color___RO79e svg * {
-  stroke: #2970FF;
+  stroke: var(--blue-dark-500);
 }
 .MicroButton-module__button___QMj95.MicroButton-module__color___RO79e:hover {
-  background-color: #FFFFFF;
+  background-color: var(--base-white);
 }
 .MicroButton-module__button___QMj95.MicroButton-module__color___RO79e:hover svg * {
-  stroke: #155EEF;
+  stroke: var(--blue-dark-600);
 }
 .MicroButton-module__button___QMj95.MicroButton-module__colorHover___Rvxx7 {
   background: none;
 }
 .MicroButton-module__button___QMj95.MicroButton-module__colorHover___Rvxx7 svg * {
-  stroke: #528BFF;
+  stroke: var(--blue-dark-400);
 }
 .MicroButton-module__button___QMj95.MicroButton-module__colorHover___Rvxx7:hover {
-  background-color: #D1E0FF;
+  background-color: var(--blue-dark-100);
 }
 .MicroButton-module__button___QMj95.MicroButton-module__colorHover___Rvxx7:hover svg * {
-  stroke: #2970FF;
+  stroke: var(--blue-dark-500);
 }
 .MicroButton-module__button___QMj95.MicroButton-module__redHover____WGXq {
   background: none;
 }
 .MicroButton-module__button___QMj95.MicroButton-module__redHover____WGXq svg * {
-  stroke: #F97066;
+  stroke: var(--error-400);
 }
 .MicroButton-module__button___QMj95.MicroButton-module__redHover____WGXq:hover {
-  background-color: #FEE4E2;
+  background-color: var(--error-100);
 }
 .MicroButton-module__button___QMj95.MicroButton-module__redHover____WGXq:hover svg * {
-  stroke: #F04438;
+  stroke: var(--error-500);
 }
 .MicroButton-module__button___QMj95.MicroButton-module__colorFill___yLr74 {
-  background: #FFFFFF;
-  box-shadow: 0 0 0 1px #B2CCFF;
+  background: var(--base-white);
+  box-shadow: 0 0 0 1px var(--blue-dark-200);
 }
 .MicroButton-module__button___QMj95.MicroButton-module__colorFill___yLr74 svg * {
-  stroke: #2970FF;
+  stroke: var(--blue-dark-500);
 }
 .MicroButton-module__button___QMj95.MicroButton-module__colorFill___yLr74:hover {
-  background: #EFF4FF;
+  background: var(--blue-dark-50);
 }
 .MicroButton-module__button___QMj95.MicroButton-module__colorFill___yLr74:hover svg * {
-  stroke: #2970FF;
+  stroke: var(--blue-dark-500);
 }
 .MicroButton-module__button___QMj95.MicroButton-module__grayFill___Rr1s4 {
-  background: #FFFFFF;
-  box-shadow: 0 0 0 1px #D0D5DD;
+  background: var(--base-white);
+  box-shadow: 0 0 0 1px var(--gray-300);
 }
 .MicroButton-module__button___QMj95.MicroButton-module__grayFill___Rr1s4 svg * {
-  stroke: #344054;
+  stroke: var(--gray-700);
 }
 .MicroButton-module__button___QMj95.MicroButton-module__grayFill___Rr1s4:hover {
-  background: #F9FAFB;
+  background: var(--gray-50);
 }
 .MicroButton-module__button___QMj95.MicroButton-module__grayFill___Rr1s4:hover svg * {
-  stroke: #101828;
+  stroke: var(--gray-900);
 }
 .MicroButton-module__button___QMj95.MicroButton-module__redFill___ANZAX {
-  background: #FFFFFF;
-  box-shadow: 0 0 0 1px #FDA29B;
+  background: var(--base-white);
+  box-shadow: 0 0 0 1px var(--error-300);
 }
 .MicroButton-module__button___QMj95.MicroButton-module__redFill___ANZAX svg * {
-  stroke: #F04438;
+  stroke: var(--error-500);
 }
 .MicroButton-module__button___QMj95.MicroButton-module__redFill___ANZAX:hover {
-  background: #FEF3F2;
+  background: var(--error-50);
 }
 .MicroButton-module__button___QMj95.MicroButton-module__redFill___ANZAX:hover svg * {
-  stroke: #D92D20;
+  stroke: var(--error-600);
 }
 .MicroButton-module__button___QMj95.MicroButton-module__size14___qZD63 {
   border-radius: 3px;
@@ -583,13 +719,81 @@
   font-weight: 600;
   font-style: normal;
 }
+:root {
+  --base-white: #FFFFFF;
+  --base-black: #000000;
+  --gray-25: #FCFCFD;
+  --gray-50: #F9FAFB;
+  --gray-100: #F2F4F7;
+  --gray-200: #EAECF0;
+  --gray-300: #D0D5DD;
+  --gray-400: #98A2B3;
+  --gray-500: #667085;
+  --gray-600: #475467;
+  --gray-700: #344054;
+  --gray-800: #1D2939;
+  --gray-900: #101828;
+  --gray-950: #0C111D;
+  --primary-25: #FCFAFF;
+  --primary-50: #F9F5FF;
+  --primary-100: #F4EBFF;
+  --primary-200: #E9D7FE;
+  --primary-300: #D6BBFB;
+  --primary-400: #B692F6;
+  --primary-500: #9E77ED;
+  --primary-600: #7F56D9;
+  --primary-700: #6941C6;
+  --primary-800: #53389E;
+  --primary-900: #42307D;
+  --primary-950: #2C1C5F;
+  --error-25: #FFFBFA;
+  --error-50: #FEF3F2;
+  --error-100: #FEE4E2;
+  --error-200: #FECDCA;
+  --error-300: #FDA29B;
+  --error-400: #F97066;
+  --error-500: #F04438;
+  --error-600: #D92D20;
+  --error-700: #B42318;
+  --error-800: #912018;
+  --error-900: #7A271A;
+  --error-950: #FEFDF0;
+  --warning-25: #FFFCF5;
+  --warning-50: #FFFAEB;
+  --warning-100: #FEF0C7;
+  --warning-200: #FEDF89;
+  --warning-300: #FEC84B;
+  --warning-400: #FDB022;
+  --warning-500: #F79009;
+  --warning-600: #DC6803;
+  --warning-700: #B54708;
+  --warning-800: #93370D;
+  --warning-900: #7A2E0E;
+  --warning-950: #4E1D09;
+}
+
+:root {
+  --blue-dark-25: #F5F8FF;
+  --blue-dark-50: #EFF4FF;
+  --blue-dark-100: #D1E0FF;
+  --blue-dark-200: #B2CCFF;
+  --blue-dark-300: #84ADFF;
+  --blue-dark-400: #528BFF;
+  --blue-dark-500: #2970FF;
+  --blue-dark-600: #155EEF;
+  --blue-dark-700: #004EEB;
+  --blue-dark-800: #0040C1;
+  --blue-dark-900: #00359E;
+  --blue-dark-950: #002266;
+}
+
 .CalendarDay-module__calendarDay___SMwl6 {
   position: relative;
   flex: none;
   width: 40px;
   height: 40px;
   border-radius: 8px;
-  background-color: #FFFFFF;
+  background-color: var(--base-white);
 }
 .CalendarDay-module__calendarDay___SMwl6 {
   display: flex;
@@ -613,7 +817,7 @@
   width: 4px;
   height: 4px;
   border-radius: 50%;
-  background-color: #528BFF;
+  background-color: var(--blue-dark-400);
 }
 .CalendarDay-module__calendarDay___SMwl6 .CalendarDay-module__day___ZPsML {
   flex: 1;
@@ -628,7 +832,7 @@
 .CalendarDay-module__calendarDay___SMwl6 .CalendarDay-module__day___ZPsML {
   font-size: 16px;
   line-height: 16px;
-  color: #344054;
+  color: var(--gray-700);
   font-weight: 400;
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
@@ -643,7 +847,7 @@
 .CalendarDay-module__calendarDay___SMwl6 .CalendarDay-module__info___pRAf0 {
   font-size: 10px;
   line-height: 10px;
-  color: #98A2B3;
+  color: var(--gray-400);
   font-weight: 400;
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
@@ -651,61 +855,61 @@
   font-variant: normal;
 }
 .CalendarDay-module__calendarDay___SMwl6:hover {
-  background-color: #F2F4F7;
+  background-color: var(--gray-100);
 }
 .CalendarDay-module__calendarDay___SMwl6.CalendarDay-module__holiday___gzeHn .CalendarDay-module__day___ZPsML {
-  color: #F04438;
+  color: var(--error-500);
 }
 .CalendarDay-module__calendarDay___SMwl6.CalendarDay-module__active___KnfaY {
-  background-color: #2970FF;
+  background-color: var(--blue-dark-500);
 }
 .CalendarDay-module__calendarDay___SMwl6.CalendarDay-module__active___KnfaY .CalendarDay-module__mark___plkAJ::after {
-  background-color: #FFFFFF;
+  background-color: var(--base-white);
 }
 .CalendarDay-module__calendarDay___SMwl6.CalendarDay-module__active___KnfaY .CalendarDay-module__day___ZPsML {
-  color: #FFFFFF;
+  color: var(--base-white);
 }
 .CalendarDay-module__calendarDay___SMwl6.CalendarDay-module__active___KnfaY .CalendarDay-module__info___pRAf0 {
-  color: #84ADFF;
+  color: var(--blue-dark-300);
 }
 .CalendarDay-module__calendarDay___SMwl6.CalendarDay-module__active___KnfaY:hover {
-  background-color: #155EEF;
+  background-color: var(--blue-dark-600);
 }
 .CalendarDay-module__calendarDay___SMwl6.CalendarDay-module__filter___VvlBz {
-  background-color: #F2F4F7;
+  background-color: var(--gray-100);
 }
 .CalendarDay-module__calendarDay___SMwl6.CalendarDay-module__filter___VvlBz:hover {
-  background-color: #EAECF0;
+  background-color: var(--gray-200);
 }
 .CalendarDay-module__calendarDay___SMwl6.CalendarDay-module__filter___VvlBz:before {
   content: "";
   width: 60px;
   height: 40px;
   position: absolute;
-  background-color: #F2F4F7;
+  background-color: var(--gray-100);
   z-index: -1;
 }
 .CalendarDay-module__calendarDay___SMwl6:disabled {
-  background-color: #FFFFFF;
+  background-color: var(--base-white);
   z-index: 1;
 }
 .CalendarDay-module__calendarDay___SMwl6:disabled:before {
-  background: #FFFFFF;
+  background: var(--base-white);
   width: 100%;
   height: 100%;
 }
 .CalendarDay-module__calendarDay___SMwl6:disabled .CalendarDay-module__mark___plkAJ::after {
-  background-color: #D0D5DD;
+  background-color: var(--gray-300);
 }
 .CalendarDay-module__calendarDay___SMwl6:disabled .CalendarDay-module__day___ZPsML {
-  color: #98A2B3;
+  color: var(--gray-400);
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
   font-style: normal;
   font-variant: normal;
 }
 .CalendarDay-module__calendarDay___SMwl6:disabled .CalendarDay-module__info___pRAf0 {
-  color: #D0D5DD;
+  color: var(--gray-300);
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
   font-style: normal;
@@ -732,12 +936,80 @@
   font-weight: 600;
   font-style: normal;
 }
+:root {
+  --base-white: #FFFFFF;
+  --base-black: #000000;
+  --gray-25: #FCFCFD;
+  --gray-50: #F9FAFB;
+  --gray-100: #F2F4F7;
+  --gray-200: #EAECF0;
+  --gray-300: #D0D5DD;
+  --gray-400: #98A2B3;
+  --gray-500: #667085;
+  --gray-600: #475467;
+  --gray-700: #344054;
+  --gray-800: #1D2939;
+  --gray-900: #101828;
+  --gray-950: #0C111D;
+  --primary-25: #FCFAFF;
+  --primary-50: #F9F5FF;
+  --primary-100: #F4EBFF;
+  --primary-200: #E9D7FE;
+  --primary-300: #D6BBFB;
+  --primary-400: #B692F6;
+  --primary-500: #9E77ED;
+  --primary-600: #7F56D9;
+  --primary-700: #6941C6;
+  --primary-800: #53389E;
+  --primary-900: #42307D;
+  --primary-950: #2C1C5F;
+  --error-25: #FFFBFA;
+  --error-50: #FEF3F2;
+  --error-100: #FEE4E2;
+  --error-200: #FECDCA;
+  --error-300: #FDA29B;
+  --error-400: #F97066;
+  --error-500: #F04438;
+  --error-600: #D92D20;
+  --error-700: #B42318;
+  --error-800: #912018;
+  --error-900: #7A271A;
+  --error-950: #FEFDF0;
+  --warning-25: #FFFCF5;
+  --warning-50: #FFFAEB;
+  --warning-100: #FEF0C7;
+  --warning-200: #FEDF89;
+  --warning-300: #FEC84B;
+  --warning-400: #FDB022;
+  --warning-500: #F79009;
+  --warning-600: #DC6803;
+  --warning-700: #B54708;
+  --warning-800: #93370D;
+  --warning-900: #7A2E0E;
+  --warning-950: #4E1D09;
+}
+
+:root {
+  --blue-dark-25: #F5F8FF;
+  --blue-dark-50: #EFF4FF;
+  --blue-dark-100: #D1E0FF;
+  --blue-dark-200: #B2CCFF;
+  --blue-dark-300: #84ADFF;
+  --blue-dark-400: #528BFF;
+  --blue-dark-500: #2970FF;
+  --blue-dark-600: #155EEF;
+  --blue-dark-700: #004EEB;
+  --blue-dark-800: #0040C1;
+  --blue-dark-900: #00359E;
+  --blue-dark-950: #002266;
+}
+
 .DatePicker-module__datePicker___t3iuq {
   width: fit-content;
   height: fit-content;
   border-radius: 16px;
-  border: 1px solid #EAECF0;
-  background-color: #FFFFFF;
+  border: 1px solid var(--gray-200);
+  background-color: var(--base-white);
   box-shadow: 0 8px 8px -4px rgba(16, 24, 40, 0.031372549), 0 20px 24px -4px rgba(16, 24, 40, 0.0784313725);
 }
 /*!*****************************************************************************************************************************************************************************************************************************************************************************!*\
@@ -761,6 +1033,74 @@
   font-weight: 600;
   font-style: normal;
 }
+:root {
+  --base-white: #FFFFFF;
+  --base-black: #000000;
+  --gray-25: #FCFCFD;
+  --gray-50: #F9FAFB;
+  --gray-100: #F2F4F7;
+  --gray-200: #EAECF0;
+  --gray-300: #D0D5DD;
+  --gray-400: #98A2B3;
+  --gray-500: #667085;
+  --gray-600: #475467;
+  --gray-700: #344054;
+  --gray-800: #1D2939;
+  --gray-900: #101828;
+  --gray-950: #0C111D;
+  --primary-25: #FCFAFF;
+  --primary-50: #F9F5FF;
+  --primary-100: #F4EBFF;
+  --primary-200: #E9D7FE;
+  --primary-300: #D6BBFB;
+  --primary-400: #B692F6;
+  --primary-500: #9E77ED;
+  --primary-600: #7F56D9;
+  --primary-700: #6941C6;
+  --primary-800: #53389E;
+  --primary-900: #42307D;
+  --primary-950: #2C1C5F;
+  --error-25: #FFFBFA;
+  --error-50: #FEF3F2;
+  --error-100: #FEE4E2;
+  --error-200: #FECDCA;
+  --error-300: #FDA29B;
+  --error-400: #F97066;
+  --error-500: #F04438;
+  --error-600: #D92D20;
+  --error-700: #B42318;
+  --error-800: #912018;
+  --error-900: #7A271A;
+  --error-950: #FEFDF0;
+  --warning-25: #FFFCF5;
+  --warning-50: #FFFAEB;
+  --warning-100: #FEF0C7;
+  --warning-200: #FEDF89;
+  --warning-300: #FEC84B;
+  --warning-400: #FDB022;
+  --warning-500: #F79009;
+  --warning-600: #DC6803;
+  --warning-700: #B54708;
+  --warning-800: #93370D;
+  --warning-900: #7A2E0E;
+  --warning-950: #4E1D09;
+}
+
+:root {
+  --blue-dark-25: #F5F8FF;
+  --blue-dark-50: #EFF4FF;
+  --blue-dark-100: #D1E0FF;
+  --blue-dark-200: #B2CCFF;
+  --blue-dark-300: #84ADFF;
+  --blue-dark-400: #528BFF;
+  --blue-dark-500: #2970FF;
+  --blue-dark-600: #155EEF;
+  --blue-dark-700: #004EEB;
+  --blue-dark-800: #0040C1;
+  --blue-dark-900: #00359E;
+  --blue-dark-950: #002266;
+}
+
 .DatePickerMain-module__datePickerMain___G7IMt {
   position: relative;
   width: 100%;
@@ -791,7 +1131,7 @@
 .DatePickerMain-module__datePickerMain___G7IMt .DatePickerMain-module__header___XeOZO .DatePickerMain-module__item___UNZyP {
   font-size: 14px;
   line-height: 16px;
-  color: #98A2B3;
+  color: var(--gray-400);
   font-weight: 500;
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
@@ -813,7 +1153,7 @@
 .DatePickerMain-module__datePickerMain___G7IMt .DatePickerMain-module__main___i975m .DatePickerMain-module__meta___XqHRG .DatePickerMain-module__month___lyaBg {
   font-size: 16px;
   line-height: 20px;
-  color: #101828;
+  color: var(--gray-900);
   font-weight: 400;
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
@@ -823,7 +1163,7 @@
 .DatePickerMain-module__datePickerMain___G7IMt .DatePickerMain-module__main___i975m .DatePickerMain-module__meta___XqHRG .DatePickerMain-module__year___fXQLm {
   font-size: 16px;
   line-height: 20px;
-  color: #98A2B3;
+  color: var(--gray-400);
   font-weight: 400;
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
@@ -856,6 +1196,74 @@
   font-weight: 600;
   font-style: normal;
 }
+:root {
+  --base-white: #FFFFFF;
+  --base-black: #000000;
+  --gray-25: #FCFCFD;
+  --gray-50: #F9FAFB;
+  --gray-100: #F2F4F7;
+  --gray-200: #EAECF0;
+  --gray-300: #D0D5DD;
+  --gray-400: #98A2B3;
+  --gray-500: #667085;
+  --gray-600: #475467;
+  --gray-700: #344054;
+  --gray-800: #1D2939;
+  --gray-900: #101828;
+  --gray-950: #0C111D;
+  --primary-25: #FCFAFF;
+  --primary-50: #F9F5FF;
+  --primary-100: #F4EBFF;
+  --primary-200: #E9D7FE;
+  --primary-300: #D6BBFB;
+  --primary-400: #B692F6;
+  --primary-500: #9E77ED;
+  --primary-600: #7F56D9;
+  --primary-700: #6941C6;
+  --primary-800: #53389E;
+  --primary-900: #42307D;
+  --primary-950: #2C1C5F;
+  --error-25: #FFFBFA;
+  --error-50: #FEF3F2;
+  --error-100: #FEE4E2;
+  --error-200: #FECDCA;
+  --error-300: #FDA29B;
+  --error-400: #F97066;
+  --error-500: #F04438;
+  --error-600: #D92D20;
+  --error-700: #B42318;
+  --error-800: #912018;
+  --error-900: #7A271A;
+  --error-950: #FEFDF0;
+  --warning-25: #FFFCF5;
+  --warning-50: #FFFAEB;
+  --warning-100: #FEF0C7;
+  --warning-200: #FEDF89;
+  --warning-300: #FEC84B;
+  --warning-400: #FDB022;
+  --warning-500: #F79009;
+  --warning-600: #DC6803;
+  --warning-700: #B54708;
+  --warning-800: #93370D;
+  --warning-900: #7A2E0E;
+  --warning-950: #4E1D09;
+}
+
+:root {
+  --blue-dark-25: #F5F8FF;
+  --blue-dark-50: #EFF4FF;
+  --blue-dark-100: #D1E0FF;
+  --blue-dark-200: #B2CCFF;
+  --blue-dark-300: #84ADFF;
+  --blue-dark-400: #528BFF;
+  --blue-dark-500: #2970FF;
+  --blue-dark-600: #155EEF;
+  --blue-dark-700: #004EEB;
+  --blue-dark-800: #0040C1;
+  --blue-dark-900: #00359E;
+  --blue-dark-950: #002266;
+}
+
 .DateGrid-module__dateGrid___zK2Lk {
   max-height: 250px;
   position: relative;
@@ -935,6 +1343,74 @@
   font-weight: 600;
   font-style: normal;
 }
+:root {
+  --base-white: #FFFFFF;
+  --base-black: #000000;
+  --gray-25: #FCFCFD;
+  --gray-50: #F9FAFB;
+  --gray-100: #F2F4F7;
+  --gray-200: #EAECF0;
+  --gray-300: #D0D5DD;
+  --gray-400: #98A2B3;
+  --gray-500: #667085;
+  --gray-600: #475467;
+  --gray-700: #344054;
+  --gray-800: #1D2939;
+  --gray-900: #101828;
+  --gray-950: #0C111D;
+  --primary-25: #FCFAFF;
+  --primary-50: #F9F5FF;
+  --primary-100: #F4EBFF;
+  --primary-200: #E9D7FE;
+  --primary-300: #D6BBFB;
+  --primary-400: #B692F6;
+  --primary-500: #9E77ED;
+  --primary-600: #7F56D9;
+  --primary-700: #6941C6;
+  --primary-800: #53389E;
+  --primary-900: #42307D;
+  --primary-950: #2C1C5F;
+  --error-25: #FFFBFA;
+  --error-50: #FEF3F2;
+  --error-100: #FEE4E2;
+  --error-200: #FECDCA;
+  --error-300: #FDA29B;
+  --error-400: #F97066;
+  --error-500: #F04438;
+  --error-600: #D92D20;
+  --error-700: #B42318;
+  --error-800: #912018;
+  --error-900: #7A271A;
+  --error-950: #FEFDF0;
+  --warning-25: #FFFCF5;
+  --warning-50: #FFFAEB;
+  --warning-100: #FEF0C7;
+  --warning-200: #FEDF89;
+  --warning-300: #FEC84B;
+  --warning-400: #FDB022;
+  --warning-500: #F79009;
+  --warning-600: #DC6803;
+  --warning-700: #B54708;
+  --warning-800: #93370D;
+  --warning-900: #7A2E0E;
+  --warning-950: #4E1D09;
+}
+
+:root {
+  --blue-dark-25: #F5F8FF;
+  --blue-dark-50: #EFF4FF;
+  --blue-dark-100: #D1E0FF;
+  --blue-dark-200: #B2CCFF;
+  --blue-dark-300: #84ADFF;
+  --blue-dark-400: #528BFF;
+  --blue-dark-500: #2970FF;
+  --blue-dark-600: #155EEF;
+  --blue-dark-700: #004EEB;
+  --blue-dark-800: #0040C1;
+  --blue-dark-900: #00359E;
+  --blue-dark-950: #002266;
+}
+
 .DatePickerHeader-module__datePickerHeader___tQ5fM {
   width: 100%;
   height: fit-content;
@@ -950,7 +1426,7 @@
 .DatePickerHeader-module__datePickerHeader___tQ5fM .DatePickerHeader-module__text___mNfC_ {
   font-size: 20px;
   line-height: 24px;
-  color: #101828;
+  color: var(--gray-900);
   font-weight: 600;
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
@@ -990,10 +1466,78 @@
   font-weight: 600;
   font-style: normal;
 }
+:root {
+  --base-white: #FFFFFF;
+  --base-black: #000000;
+  --gray-25: #FCFCFD;
+  --gray-50: #F9FAFB;
+  --gray-100: #F2F4F7;
+  --gray-200: #EAECF0;
+  --gray-300: #D0D5DD;
+  --gray-400: #98A2B3;
+  --gray-500: #667085;
+  --gray-600: #475467;
+  --gray-700: #344054;
+  --gray-800: #1D2939;
+  --gray-900: #101828;
+  --gray-950: #0C111D;
+  --primary-25: #FCFAFF;
+  --primary-50: #F9F5FF;
+  --primary-100: #F4EBFF;
+  --primary-200: #E9D7FE;
+  --primary-300: #D6BBFB;
+  --primary-400: #B692F6;
+  --primary-500: #9E77ED;
+  --primary-600: #7F56D9;
+  --primary-700: #6941C6;
+  --primary-800: #53389E;
+  --primary-900: #42307D;
+  --primary-950: #2C1C5F;
+  --error-25: #FFFBFA;
+  --error-50: #FEF3F2;
+  --error-100: #FEE4E2;
+  --error-200: #FECDCA;
+  --error-300: #FDA29B;
+  --error-400: #F97066;
+  --error-500: #F04438;
+  --error-600: #D92D20;
+  --error-700: #B42318;
+  --error-800: #912018;
+  --error-900: #7A271A;
+  --error-950: #FEFDF0;
+  --warning-25: #FFFCF5;
+  --warning-50: #FFFAEB;
+  --warning-100: #FEF0C7;
+  --warning-200: #FEDF89;
+  --warning-300: #FEC84B;
+  --warning-400: #FDB022;
+  --warning-500: #F79009;
+  --warning-600: #DC6803;
+  --warning-700: #B54708;
+  --warning-800: #93370D;
+  --warning-900: #7A2E0E;
+  --warning-950: #4E1D09;
+}
+
+:root {
+  --blue-dark-25: #F5F8FF;
+  --blue-dark-50: #EFF4FF;
+  --blue-dark-100: #D1E0FF;
+  --blue-dark-200: #B2CCFF;
+  --blue-dark-300: #84ADFF;
+  --blue-dark-400: #528BFF;
+  --blue-dark-500: #2970FF;
+  --blue-dark-600: #155EEF;
+  --blue-dark-700: #004EEB;
+  --blue-dark-800: #0040C1;
+  --blue-dark-900: #00359E;
+  --blue-dark-950: #002266;
+}
+
 .DatePickerFooter-module__datePickerFooter___S3vJR {
   width: 100%;
   display: flex;
-  border-top: 1px solid #EAECF0;
+  border-top: 1px solid var(--gray-200);
   padding: 16px;
   gap: 8px;
 }
@@ -1021,6 +1565,74 @@
   font-weight: 600;
   font-style: normal;
 }
+:root {
+  --base-white: #FFFFFF;
+  --base-black: #000000;
+  --gray-25: #FCFCFD;
+  --gray-50: #F9FAFB;
+  --gray-100: #F2F4F7;
+  --gray-200: #EAECF0;
+  --gray-300: #D0D5DD;
+  --gray-400: #98A2B3;
+  --gray-500: #667085;
+  --gray-600: #475467;
+  --gray-700: #344054;
+  --gray-800: #1D2939;
+  --gray-900: #101828;
+  --gray-950: #0C111D;
+  --primary-25: #FCFAFF;
+  --primary-50: #F9F5FF;
+  --primary-100: #F4EBFF;
+  --primary-200: #E9D7FE;
+  --primary-300: #D6BBFB;
+  --primary-400: #B692F6;
+  --primary-500: #9E77ED;
+  --primary-600: #7F56D9;
+  --primary-700: #6941C6;
+  --primary-800: #53389E;
+  --primary-900: #42307D;
+  --primary-950: #2C1C5F;
+  --error-25: #FFFBFA;
+  --error-50: #FEF3F2;
+  --error-100: #FEE4E2;
+  --error-200: #FECDCA;
+  --error-300: #FDA29B;
+  --error-400: #F97066;
+  --error-500: #F04438;
+  --error-600: #D92D20;
+  --error-700: #B42318;
+  --error-800: #912018;
+  --error-900: #7A271A;
+  --error-950: #FEFDF0;
+  --warning-25: #FFFCF5;
+  --warning-50: #FFFAEB;
+  --warning-100: #FEF0C7;
+  --warning-200: #FEDF89;
+  --warning-300: #FEC84B;
+  --warning-400: #FDB022;
+  --warning-500: #F79009;
+  --warning-600: #DC6803;
+  --warning-700: #B54708;
+  --warning-800: #93370D;
+  --warning-900: #7A2E0E;
+  --warning-950: #4E1D09;
+}
+
+:root {
+  --blue-dark-25: #F5F8FF;
+  --blue-dark-50: #EFF4FF;
+  --blue-dark-100: #D1E0FF;
+  --blue-dark-200: #B2CCFF;
+  --blue-dark-300: #84ADFF;
+  --blue-dark-400: #528BFF;
+  --blue-dark-500: #2970FF;
+  --blue-dark-600: #155EEF;
+  --blue-dark-700: #004EEB;
+  --blue-dark-800: #0040C1;
+  --blue-dark-900: #00359E;
+  --blue-dark-950: #002266;
+}
+
 .FlexField-module__flexField___bQEfy {
   width: 100%;
   height: fit-content;
@@ -1030,8 +1642,8 @@
   padding: 10px 12px;
   border-radius: 8px;
   gap: 12px;
-  background-color: #FFFFFF;
-  box-shadow: 0 0 0 1px #D0D5DD, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
+  background-color: var(--test-variable);
+  box-shadow: 0 0 0 1px var(--gray-300), 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
   box-sizing: border-box;
 }
 .FlexField-module__flexField___bQEfy .FlexField-module__inputField___ckUI1 {
@@ -1050,7 +1662,7 @@
 .FlexField-module__flexField___bQEfy .FlexField-module__inputField___ckUI1 {
   font-size: 16px;
   line-height: 24px;
-  color: #101828;
+  color: var(--gray-900);
   font-weight: 400;
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
@@ -1060,7 +1672,7 @@
 .FlexField-module__flexField___bQEfy .FlexField-module__inputField___ckUI1::placeholder {
   font-size: 16px;
   line-height: 24px;
-  color: #98A2B3;
+  color: var(--gray-400);
   font-weight: 400;
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
@@ -1074,7 +1686,7 @@
   justify-content: center;
 }
 .FlexField-module__flexField___bQEfy .FlexField-module__icon___pHmKh svg * {
-  stroke: #98A2B3;
+  stroke: var(--gray-400);
 }
 .FlexField-module__flexField___bQEfy .FlexField-module__icon___pHmKh svg {
   width: 20px;
@@ -1084,7 +1696,7 @@
 .FlexField-module__flexField___bQEfy .FlexField-module__textSupport___WGMzj {
   font-size: 16px;
   line-height: 24px;
-  color: #98A2B3;
+  color: var(--gray-400);
   font-weight: 400;
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
@@ -1104,7 +1716,7 @@
   justify-content: center;
 }
 .FlexField-module__flexField___bQEfy .FlexField-module__help___ORoT_ svg * {
-  stroke: #98A2B3;
+  stroke: var(--gray-400);
 }
 .FlexField-module__flexField___bQEfy .FlexField-module__help___ORoT_ svg {
   width: 16px;
@@ -1119,7 +1731,7 @@
   justify-content: center;
 }
 .FlexField-module__flexField___bQEfy .FlexField-module__dropdown___BqdfG svg * {
-  stroke: #667085;
+  stroke: var(--gray-500);
 }
 .FlexField-module__flexField___bQEfy .FlexField-module__dropdown___BqdfG svg {
   width: 20px;
@@ -1142,16 +1754,16 @@
   flex: none;
 }
 .FlexField-module__flexField___bQEfy .FlexField-module__button___TjLHK.FlexField-module__red___BY7NK svg * {
-  stroke: #F97066;
+  stroke: var(--error-400);
 }
 .FlexField-module__flexField___bQEfy .FlexField-module__button___TjLHK.FlexField-module__red___BY7NK:hover svg * {
-  stroke: #F04438;
+  stroke: var(--error-500);
 }
 .FlexField-module__flexField___bQEfy .FlexField-module__button___TjLHK.FlexField-module__gray___sjpVp svg * {
-  stroke: #98A2B3;
+  stroke: var(--gray-400);
 }
 .FlexField-module__flexField___bQEfy .FlexField-module__button___TjLHK.FlexField-module__gray___sjpVp:hover svg * {
-  stroke: #667085;
+  stroke: var(--gray-500);
 }
 .FlexField-module__flexField___bQEfy.FlexField-module__pointer___dOJ4b {
   cursor: pointer;
@@ -1160,16 +1772,16 @@
   box-shadow: 0 0 0 4px #F2F4F7, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
 }
 .FlexField-module__flexField___bQEfy.FlexField-module__isError___VljDQ {
-  box-shadow: 0 0 0 1px #FDA29B, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
+  box-shadow: 0 0 0 1px var(--error-300), 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
 }
 .FlexField-module__flexField___bQEfy.FlexField-module__isError___VljDQ .FlexField-module__help___ORoT_ svg * {
-  stroke: #F04438;
+  stroke: var(--error-500);
 }
 .FlexField-module__flexField___bQEfy.FlexField-module__isError___VljDQ.FlexField-module__focus___pkwN6 {
   box-shadow: 0 0 0 4px #FEE4E2, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
 }
 .FlexField-module__flexField___bQEfy.FlexField-module__disabled___lN8Vv {
-  background-color: #F2F4F7;
+  background-color: var(--gray-100);
   cursor: default;
 }
 .FlexField-module__flexField___bQEfy.FlexField-module__disabled___lN8Vv * {
@@ -1178,7 +1790,7 @@
 .FlexField-module__flexField___bQEfy.FlexField-module__disabled___lN8Vv .FlexField-module__inputField___ckUI1 {
   font-size: 16px;
   line-height: 24px;
-  color: #667085;
+  color: var(--gray-500);
   font-weight: 400;
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
@@ -1206,6 +1818,74 @@
   font-weight: 600;
   font-style: normal;
 }
+:root {
+  --base-white: #FFFFFF;
+  --base-black: #000000;
+  --gray-25: #FCFCFD;
+  --gray-50: #F9FAFB;
+  --gray-100: #F2F4F7;
+  --gray-200: #EAECF0;
+  --gray-300: #D0D5DD;
+  --gray-400: #98A2B3;
+  --gray-500: #667085;
+  --gray-600: #475467;
+  --gray-700: #344054;
+  --gray-800: #1D2939;
+  --gray-900: #101828;
+  --gray-950: #0C111D;
+  --primary-25: #FCFAFF;
+  --primary-50: #F9F5FF;
+  --primary-100: #F4EBFF;
+  --primary-200: #E9D7FE;
+  --primary-300: #D6BBFB;
+  --primary-400: #B692F6;
+  --primary-500: #9E77ED;
+  --primary-600: #7F56D9;
+  --primary-700: #6941C6;
+  --primary-800: #53389E;
+  --primary-900: #42307D;
+  --primary-950: #2C1C5F;
+  --error-25: #FFFBFA;
+  --error-50: #FEF3F2;
+  --error-100: #FEE4E2;
+  --error-200: #FECDCA;
+  --error-300: #FDA29B;
+  --error-400: #F97066;
+  --error-500: #F04438;
+  --error-600: #D92D20;
+  --error-700: #B42318;
+  --error-800: #912018;
+  --error-900: #7A271A;
+  --error-950: #FEFDF0;
+  --warning-25: #FFFCF5;
+  --warning-50: #FFFAEB;
+  --warning-100: #FEF0C7;
+  --warning-200: #FEDF89;
+  --warning-300: #FEC84B;
+  --warning-400: #FDB022;
+  --warning-500: #F79009;
+  --warning-600: #DC6803;
+  --warning-700: #B54708;
+  --warning-800: #93370D;
+  --warning-900: #7A2E0E;
+  --warning-950: #4E1D09;
+}
+
+:root {
+  --blue-dark-25: #F5F8FF;
+  --blue-dark-50: #EFF4FF;
+  --blue-dark-100: #D1E0FF;
+  --blue-dark-200: #B2CCFF;
+  --blue-dark-300: #84ADFF;
+  --blue-dark-400: #528BFF;
+  --blue-dark-500: #2970FF;
+  --blue-dark-600: #155EEF;
+  --blue-dark-700: #004EEB;
+  --blue-dark-800: #0040C1;
+  --blue-dark-900: #00359E;
+  --blue-dark-950: #002266;
+}
+
 .SelectField-module__selectField___p9S2j {
   width: 100%;
   position: relative;
@@ -1219,8 +1899,8 @@
   padding: 10px 12px;
   border-radius: 8px;
   gap: 12px;
-  background-color: #FFFFFF;
-  box-shadow: 0 0 0 1px #D0D5DD, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
+  background-color: var(--test-variable);
+  box-shadow: 0 0 0 1px var(--gray-300), 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
   box-sizing: border-box;
 }
 .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY .SelectField-module__inputField___R6ZBR {
@@ -1239,7 +1919,7 @@
 .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY .SelectField-module__inputField___R6ZBR {
   font-size: 16px;
   line-height: 24px;
-  color: #101828;
+  color: var(--gray-900);
   font-weight: 400;
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
@@ -1249,7 +1929,7 @@
 .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY .SelectField-module__inputField___R6ZBR::placeholder {
   font-size: 16px;
   line-height: 24px;
-  color: #98A2B3;
+  color: var(--gray-400);
   font-weight: 400;
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
@@ -1263,7 +1943,7 @@
   justify-content: center;
 }
 .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY .SelectField-module__icon___hgSSD svg * {
-  stroke: #98A2B3;
+  stroke: var(--gray-400);
 }
 .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY .SelectField-module__icon___hgSSD svg {
   width: 20px;
@@ -1273,7 +1953,7 @@
 .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY .SelectField-module__textSupport___vm4rj {
   font-size: 16px;
   line-height: 24px;
-  color: #98A2B3;
+  color: var(--gray-400);
   font-weight: 400;
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
@@ -1293,7 +1973,7 @@
   justify-content: center;
 }
 .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY .SelectField-module__help___H6fhs svg * {
-  stroke: #98A2B3;
+  stroke: var(--gray-400);
 }
 .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY .SelectField-module__help___H6fhs svg {
   width: 16px;
@@ -1308,7 +1988,7 @@
   justify-content: center;
 }
 .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY .SelectField-module__dropdown___Uy1N4 svg * {
-  stroke: #667085;
+  stroke: var(--gray-500);
 }
 .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY .SelectField-module__dropdown___Uy1N4 svg {
   width: 20px;
@@ -1331,16 +2011,16 @@
   flex: none;
 }
 .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY .SelectField-module__button___ZmuY4.SelectField-module__red___JPj3r svg * {
-  stroke: #F97066;
+  stroke: var(--error-400);
 }
 .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY .SelectField-module__button___ZmuY4.SelectField-module__red___JPj3r:hover svg * {
-  stroke: #F04438;
+  stroke: var(--error-500);
 }
 .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY .SelectField-module__button___ZmuY4.SelectField-module__gray___IaQb0 svg * {
-  stroke: #98A2B3;
+  stroke: var(--gray-400);
 }
 .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY .SelectField-module__button___ZmuY4.SelectField-module__gray___IaQb0:hover svg * {
-  stroke: #667085;
+  stroke: var(--gray-500);
 }
 .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY.SelectField-module__pointer___EtnYh {
   cursor: pointer;
@@ -1349,16 +2029,16 @@
   box-shadow: 0 0 0 4px #F2F4F7, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
 }
 .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY.SelectField-module__isError___i1lN2 {
-  box-shadow: 0 0 0 1px #FDA29B, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
+  box-shadow: 0 0 0 1px var(--error-300), 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
 }
 .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY.SelectField-module__isError___i1lN2 .SelectField-module__help___H6fhs svg * {
-  stroke: #F04438;
+  stroke: var(--error-500);
 }
 .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY.SelectField-module__isError___i1lN2.SelectField-module__focus___oz_Mp {
   box-shadow: 0 0 0 4px #FEE4E2, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
 }
 .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY.SelectField-module__disabled___lZGk6 {
-  background-color: #F2F4F7;
+  background-color: var(--gray-100);
   cursor: default;
 }
 .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY.SelectField-module__disabled___lZGk6 * {
@@ -1367,7 +2047,7 @@
 .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY.SelectField-module__disabled___lZGk6 .SelectField-module__inputField___R6ZBR {
   font-size: 16px;
   line-height: 24px;
-  color: #667085;
+  color: var(--gray-500);
   font-weight: 400;
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
@@ -1387,8 +2067,8 @@
   flex-direction: column;
   border-radius: 8px;
   padding: 4px;
-  background-color: #FFFFFF;
-  box-shadow: 0 0 0 1px #D0D5DD, 0 4px 6px -2px rgba(16, 24, 40, 0.031372549), 0px 12px 16px -4px rgba(16, 24, 40, 0.0784313725);
+  background-color: var(--base-white);
+  box-shadow: 0 0 0 1px var(--gray-300), 0 4px 6px -2px rgba(16, 24, 40, 0.031372549), 0px 12px 16px -4px rgba(16, 24, 40, 0.0784313725);
   overflow: scroll;
   scrollbar-width: none;
 }
@@ -1408,7 +2088,7 @@
 .SelectField-module__selectField___p9S2j .SelectField-module__modalWindow___JVZ8d .SelectField-module__selectModalWindow___w55Pm .SelectField-module__selectFieldOptionsItem___hQMC7 .SelectField-module__label___Orjua {
   font-size: 16px;
   line-height: 24px;
-  color: #101828;
+  color: var(--gray-900);
   font-weight: 400;
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
@@ -1416,7 +2096,7 @@
   font-variant: normal;
 }
 .SelectField-module__selectField___p9S2j .SelectField-module__modalWindow___JVZ8d .SelectField-module__selectModalWindow___w55Pm .SelectField-module__selectFieldOptionsItem___hQMC7.SelectField-module__active___a3j2T {
-  background-color: #EFF4FF;
+  background-color: var(--blue-dark-50);
 }
 .SelectField-module__selectField___p9S2j .SelectField-module__modalWindow___JVZ8d .SelectField-module__selectModalWindow___w55Pm .SelectField-module__selectFieldOptionsItem___hQMC7.SelectField-module__active___a3j2T svg {
   width: 20px;
@@ -1424,7 +2104,7 @@
   flex: none;
 }
 .SelectField-module__selectField___p9S2j .SelectField-module__modalWindow___JVZ8d .SelectField-module__selectModalWindow___w55Pm .SelectField-module__selectFieldOptionsItem___hQMC7.SelectField-module__active___a3j2T svg * {
-  stroke: #2970FF;
+  stroke: var(--blue-dark-500);
 }
 /*!***************************************************************************************************************************************************************************************************************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/ui/InputFields/InputFieldWrapper/styles/InputFieldWrapper.module.scss ***!
@@ -1447,6 +2127,74 @@
   font-weight: 600;
   font-style: normal;
 }
+:root {
+  --base-white: #FFFFFF;
+  --base-black: #000000;
+  --gray-25: #FCFCFD;
+  --gray-50: #F9FAFB;
+  --gray-100: #F2F4F7;
+  --gray-200: #EAECF0;
+  --gray-300: #D0D5DD;
+  --gray-400: #98A2B3;
+  --gray-500: #667085;
+  --gray-600: #475467;
+  --gray-700: #344054;
+  --gray-800: #1D2939;
+  --gray-900: #101828;
+  --gray-950: #0C111D;
+  --primary-25: #FCFAFF;
+  --primary-50: #F9F5FF;
+  --primary-100: #F4EBFF;
+  --primary-200: #E9D7FE;
+  --primary-300: #D6BBFB;
+  --primary-400: #B692F6;
+  --primary-500: #9E77ED;
+  --primary-600: #7F56D9;
+  --primary-700: #6941C6;
+  --primary-800: #53389E;
+  --primary-900: #42307D;
+  --primary-950: #2C1C5F;
+  --error-25: #FFFBFA;
+  --error-50: #FEF3F2;
+  --error-100: #FEE4E2;
+  --error-200: #FECDCA;
+  --error-300: #FDA29B;
+  --error-400: #F97066;
+  --error-500: #F04438;
+  --error-600: #D92D20;
+  --error-700: #B42318;
+  --error-800: #912018;
+  --error-900: #7A271A;
+  --error-950: #FEFDF0;
+  --warning-25: #FFFCF5;
+  --warning-50: #FFFAEB;
+  --warning-100: #FEF0C7;
+  --warning-200: #FEDF89;
+  --warning-300: #FEC84B;
+  --warning-400: #FDB022;
+  --warning-500: #F79009;
+  --warning-600: #DC6803;
+  --warning-700: #B54708;
+  --warning-800: #93370D;
+  --warning-900: #7A2E0E;
+  --warning-950: #4E1D09;
+}
+
+:root {
+  --blue-dark-25: #F5F8FF;
+  --blue-dark-50: #EFF4FF;
+  --blue-dark-100: #D1E0FF;
+  --blue-dark-200: #B2CCFF;
+  --blue-dark-300: #84ADFF;
+  --blue-dark-400: #528BFF;
+  --blue-dark-500: #2970FF;
+  --blue-dark-600: #155EEF;
+  --blue-dark-700: #004EEB;
+  --blue-dark-800: #0040C1;
+  --blue-dark-900: #00359E;
+  --blue-dark-950: #002266;
+}
+
 .InputFieldWrapper-module__inputFieldWrapper___QKhWg {
   width: 100%;
   display: flex;
@@ -1461,7 +2209,7 @@
 .InputFieldWrapper-module__inputFieldWrapper___QKhWg .InputFieldWrapper-module__labelText___n0EsW {
   font-size: 14px;
   line-height: 20px;
-  color: #344054;
+  color: var(--gray-700);
   font-weight: 500;
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
@@ -1471,7 +2219,7 @@
 .InputFieldWrapper-module__inputFieldWrapper___QKhWg .InputFieldWrapper-module__labelText___n0EsW .InputFieldWrapper-module__required___SDv6c {
   font-size: 14px;
   line-height: 20px;
-  color: #F04438;
+  color: var(--error-500);
   font-weight: 500;
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
@@ -1486,7 +2234,7 @@
 .InputFieldWrapper-module__inputFieldWrapper___QKhWg .InputFieldWrapper-module__hintText___Utfgx {
   font-size: 14px;
   line-height: 20px;
-  color: #475467;
+  color: var(--gray-600);
   font-weight: 400;
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
@@ -1501,7 +2249,7 @@
 .InputFieldWrapper-module__inputFieldWrapper___QKhWg .InputFieldWrapper-module__hintError___v4J5W {
   font-size: 14px;
   line-height: 20px;
-  color: #F04438;
+  color: var(--error-500);
   font-weight: 400;
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
@@ -1520,12 +2268,12 @@
   flex: none;
 }
 .InputFieldWrapper-module__inputFieldWrapper___QKhWg .InputFieldWrapper-module__helperLink___Kfen4 svg * {
-  stroke: #2970FF;
+  stroke: var(--blue-dark-500);
 }
 .InputFieldWrapper-module__inputFieldWrapper___QKhWg .InputFieldWrapper-module__helperLink___Kfen4 {
   font-size: 14px;
   line-height: 20px;
-  color: #2970FF;
+  color: var(--blue-dark-500);
   font-weight: 400;
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
@@ -1553,6 +2301,74 @@
   font-weight: 600;
   font-style: normal;
 }
+:root {
+  --base-white: #FFFFFF;
+  --base-black: #000000;
+  --gray-25: #FCFCFD;
+  --gray-50: #F9FAFB;
+  --gray-100: #F2F4F7;
+  --gray-200: #EAECF0;
+  --gray-300: #D0D5DD;
+  --gray-400: #98A2B3;
+  --gray-500: #667085;
+  --gray-600: #475467;
+  --gray-700: #344054;
+  --gray-800: #1D2939;
+  --gray-900: #101828;
+  --gray-950: #0C111D;
+  --primary-25: #FCFAFF;
+  --primary-50: #F9F5FF;
+  --primary-100: #F4EBFF;
+  --primary-200: #E9D7FE;
+  --primary-300: #D6BBFB;
+  --primary-400: #B692F6;
+  --primary-500: #9E77ED;
+  --primary-600: #7F56D9;
+  --primary-700: #6941C6;
+  --primary-800: #53389E;
+  --primary-900: #42307D;
+  --primary-950: #2C1C5F;
+  --error-25: #FFFBFA;
+  --error-50: #FEF3F2;
+  --error-100: #FEE4E2;
+  --error-200: #FECDCA;
+  --error-300: #FDA29B;
+  --error-400: #F97066;
+  --error-500: #F04438;
+  --error-600: #D92D20;
+  --error-700: #B42318;
+  --error-800: #912018;
+  --error-900: #7A271A;
+  --error-950: #FEFDF0;
+  --warning-25: #FFFCF5;
+  --warning-50: #FFFAEB;
+  --warning-100: #FEF0C7;
+  --warning-200: #FEDF89;
+  --warning-300: #FEC84B;
+  --warning-400: #FDB022;
+  --warning-500: #F79009;
+  --warning-600: #DC6803;
+  --warning-700: #B54708;
+  --warning-800: #93370D;
+  --warning-900: #7A2E0E;
+  --warning-950: #4E1D09;
+}
+
+:root {
+  --blue-dark-25: #F5F8FF;
+  --blue-dark-50: #EFF4FF;
+  --blue-dark-100: #D1E0FF;
+  --blue-dark-200: #B2CCFF;
+  --blue-dark-300: #84ADFF;
+  --blue-dark-400: #528BFF;
+  --blue-dark-500: #2970FF;
+  --blue-dark-600: #155EEF;
+  --blue-dark-700: #004EEB;
+  --blue-dark-800: #0040C1;
+  --blue-dark-900: #00359E;
+  --blue-dark-950: #002266;
+}
+
 .SwitcherField-module__switcherField___R9atT {
   width: 36px;
   height: 20px;
@@ -1560,7 +2376,7 @@
   justify-content: left;
   border-radius: 12px;
   padding: 2px;
-  background-color: #EAECF0;
+  background-color: var(--gray-200);
 }
 .SwitcherField-module__switcherField___R9atT:after {
   flex: none;
@@ -1569,27 +2385,27 @@
   height: 16px;
   border-radius: 50%;
   box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.0588235294), 0 1px 3px 0 rgba(16, 24, 40, 0.1019607843);
-  background-color: #FFFFFF;
+  background-color: var(--base-white);
 }
 .SwitcherField-module__switcherField___R9atT:hover {
-  background-color: #D0D5DD;
+  background-color: var(--gray-300);
 }
 .SwitcherField-module__switcherField___R9atT:focus {
-  box-shadow: 0 0 0 4px #F2F4F7;
+  box-shadow: 0 0 0 4px var(--gray-100);
 }
 .SwitcherField-module__switcherField___R9atT.SwitcherField-module__active___p_7P5 {
   justify-content: right;
-  background-color: #2970FF;
+  background-color: var(--blue-dark-500);
 }
 .SwitcherField-module__switcherField___R9atT.SwitcherField-module__active___p_7P5:hover {
-  background-color: #155EEF;
+  background-color: var(--blue-dark-600);
 }
 .SwitcherField-module__switcherField___R9atT:disabled {
   cursor: default;
-  background-color: #EAECF0;
+  background-color: var(--gray-200);
 }
 .SwitcherField-module__switcherField___R9atT:disabled:hover {
-  background-color: #EAECF0;
+  background-color: var(--gray-200);
 }
 /*!*************************************************************************************************************************************************************************************************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/ui/InputFields/RadioField/styles/RadioField.module.scss ***!
@@ -1612,6 +2428,74 @@
   font-weight: 600;
   font-style: normal;
 }
+:root {
+  --base-white: #FFFFFF;
+  --base-black: #000000;
+  --gray-25: #FCFCFD;
+  --gray-50: #F9FAFB;
+  --gray-100: #F2F4F7;
+  --gray-200: #EAECF0;
+  --gray-300: #D0D5DD;
+  --gray-400: #98A2B3;
+  --gray-500: #667085;
+  --gray-600: #475467;
+  --gray-700: #344054;
+  --gray-800: #1D2939;
+  --gray-900: #101828;
+  --gray-950: #0C111D;
+  --primary-25: #FCFAFF;
+  --primary-50: #F9F5FF;
+  --primary-100: #F4EBFF;
+  --primary-200: #E9D7FE;
+  --primary-300: #D6BBFB;
+  --primary-400: #B692F6;
+  --primary-500: #9E77ED;
+  --primary-600: #7F56D9;
+  --primary-700: #6941C6;
+  --primary-800: #53389E;
+  --primary-900: #42307D;
+  --primary-950: #2C1C5F;
+  --error-25: #FFFBFA;
+  --error-50: #FEF3F2;
+  --error-100: #FEE4E2;
+  --error-200: #FECDCA;
+  --error-300: #FDA29B;
+  --error-400: #F97066;
+  --error-500: #F04438;
+  --error-600: #D92D20;
+  --error-700: #B42318;
+  --error-800: #912018;
+  --error-900: #7A271A;
+  --error-950: #FEFDF0;
+  --warning-25: #FFFCF5;
+  --warning-50: #FFFAEB;
+  --warning-100: #FEF0C7;
+  --warning-200: #FEDF89;
+  --warning-300: #FEC84B;
+  --warning-400: #FDB022;
+  --warning-500: #F79009;
+  --warning-600: #DC6803;
+  --warning-700: #B54708;
+  --warning-800: #93370D;
+  --warning-900: #7A2E0E;
+  --warning-950: #4E1D09;
+}
+
+:root {
+  --blue-dark-25: #F5F8FF;
+  --blue-dark-50: #EFF4FF;
+  --blue-dark-100: #D1E0FF;
+  --blue-dark-200: #B2CCFF;
+  --blue-dark-300: #84ADFF;
+  --blue-dark-400: #528BFF;
+  --blue-dark-500: #2970FF;
+  --blue-dark-600: #155EEF;
+  --blue-dark-700: #004EEB;
+  --blue-dark-800: #0040C1;
+  --blue-dark-900: #00359E;
+  --blue-dark-950: #002266;
+}
+
 .RadioField-module__radioFieldItem___uaoV4 {
   width: fit-content;
   height: fit-content;
@@ -1623,8 +2507,8 @@
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  border: 1px solid #D0D5DD;
-  background-color: #FFFFFF;
+  border: 1px solid var(--gray-300);
+  background-color: var(--base-white);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1632,7 +2516,7 @@
 .RadioField-module__radioFieldItem___uaoV4 .RadioField-module__label___LbYqv {
   font-size: 14px;
   line-height: 20px;
-  color: #344054;
+  color: var(--gray-700);
   font-weight: 500;
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
@@ -1640,7 +2524,7 @@
   font-variant: normal;
 }
 .RadioField-module__radioFieldItem___uaoV4.RadioField-module__active___w24VO .RadioField-module__checkbox____H6Wv {
-  border: 1px solid #2970FF;
+  border: 1px solid var(--blue-dark-500);
 }
 .RadioField-module__radioFieldItem___uaoV4.RadioField-module__active___w24VO .RadioField-module__checkbox____H6Wv:after {
   content: "";
@@ -1648,7 +2532,7 @@
   width: 6px;
   height: 6px;
   border-radius: 50%;
-  background-color: #2970FF;
+  background-color: var(--blue-dark-500);
 }
 /*!*******************************************************************************************************************************************************************************************************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/ui/InputFields/TextareaField/styles/TextareaField.module.scss ***!
@@ -1671,6 +2555,74 @@
   font-weight: 600;
   font-style: normal;
 }
+:root {
+  --base-white: #FFFFFF;
+  --base-black: #000000;
+  --gray-25: #FCFCFD;
+  --gray-50: #F9FAFB;
+  --gray-100: #F2F4F7;
+  --gray-200: #EAECF0;
+  --gray-300: #D0D5DD;
+  --gray-400: #98A2B3;
+  --gray-500: #667085;
+  --gray-600: #475467;
+  --gray-700: #344054;
+  --gray-800: #1D2939;
+  --gray-900: #101828;
+  --gray-950: #0C111D;
+  --primary-25: #FCFAFF;
+  --primary-50: #F9F5FF;
+  --primary-100: #F4EBFF;
+  --primary-200: #E9D7FE;
+  --primary-300: #D6BBFB;
+  --primary-400: #B692F6;
+  --primary-500: #9E77ED;
+  --primary-600: #7F56D9;
+  --primary-700: #6941C6;
+  --primary-800: #53389E;
+  --primary-900: #42307D;
+  --primary-950: #2C1C5F;
+  --error-25: #FFFBFA;
+  --error-50: #FEF3F2;
+  --error-100: #FEE4E2;
+  --error-200: #FECDCA;
+  --error-300: #FDA29B;
+  --error-400: #F97066;
+  --error-500: #F04438;
+  --error-600: #D92D20;
+  --error-700: #B42318;
+  --error-800: #912018;
+  --error-900: #7A271A;
+  --error-950: #FEFDF0;
+  --warning-25: #FFFCF5;
+  --warning-50: #FFFAEB;
+  --warning-100: #FEF0C7;
+  --warning-200: #FEDF89;
+  --warning-300: #FEC84B;
+  --warning-400: #FDB022;
+  --warning-500: #F79009;
+  --warning-600: #DC6803;
+  --warning-700: #B54708;
+  --warning-800: #93370D;
+  --warning-900: #7A2E0E;
+  --warning-950: #4E1D09;
+}
+
+:root {
+  --blue-dark-25: #F5F8FF;
+  --blue-dark-50: #EFF4FF;
+  --blue-dark-100: #D1E0FF;
+  --blue-dark-200: #B2CCFF;
+  --blue-dark-300: #84ADFF;
+  --blue-dark-400: #528BFF;
+  --blue-dark-500: #2970FF;
+  --blue-dark-600: #155EEF;
+  --blue-dark-700: #004EEB;
+  --blue-dark-800: #0040C1;
+  --blue-dark-900: #00359E;
+  --blue-dark-950: #002266;
+}
+
 .TextareaField-module__textareaField___Vcg4L {
   width: 100%;
   height: fit-content;
@@ -1678,13 +2630,13 @@
   resize: none;
   border-radius: 8px;
   padding: 10px 12px;
-  background-color: #FFFFFF;
-  box-shadow: 0 0 0 1px #D0D5DD, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
+  background-color: var(--base-white);
+  box-shadow: 0 0 0 1px var(--gray-300), 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
 }
 .TextareaField-module__textareaField___Vcg4L {
   font-size: 16px;
   line-height: 24px;
-  color: #101828;
+  color: var(--gray-900);
   font-weight: 400;
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
@@ -1694,7 +2646,7 @@
 .TextareaField-module__textareaField___Vcg4L::placeholder {
   font-size: 16px;
   line-height: 24px;
-  color: #98A2B3;
+  color: var(--gray-400);
   font-weight: 400;
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
@@ -1705,12 +2657,12 @@
   box-shadow: 0 0 0 4px #F2F4F7, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
 }
 .TextareaField-module__textareaField___Vcg4L:disabled {
-  background-color: #F2F4F7;
+  background-color: var(--gray-100);
 }
 .TextareaField-module__textareaField___Vcg4L:disabled {
   font-size: 16px;
   line-height: 24px;
-  color: #667085;
+  color: var(--gray-500);
   font-weight: 400;
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
@@ -1718,7 +2670,7 @@
   font-variant: normal;
 }
 .TextareaField-module__textareaField___Vcg4L.TextareaField-module__isError___VGTeU {
-  border: 1px solid #FDA29B;
+  border: 1px solid var(--error-300);
 }
 .TextareaField-module__textareaField___Vcg4L.TextareaField-module__isError___VGTeU:focus {
   box-shadow: 0 0 0 4px #FEE4E2, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
@@ -1744,6 +2696,74 @@
   font-weight: 600;
   font-style: normal;
 }
+:root {
+  --base-white: #FFFFFF;
+  --base-black: #000000;
+  --gray-25: #FCFCFD;
+  --gray-50: #F9FAFB;
+  --gray-100: #F2F4F7;
+  --gray-200: #EAECF0;
+  --gray-300: #D0D5DD;
+  --gray-400: #98A2B3;
+  --gray-500: #667085;
+  --gray-600: #475467;
+  --gray-700: #344054;
+  --gray-800: #1D2939;
+  --gray-900: #101828;
+  --gray-950: #0C111D;
+  --primary-25: #FCFAFF;
+  --primary-50: #F9F5FF;
+  --primary-100: #F4EBFF;
+  --primary-200: #E9D7FE;
+  --primary-300: #D6BBFB;
+  --primary-400: #B692F6;
+  --primary-500: #9E77ED;
+  --primary-600: #7F56D9;
+  --primary-700: #6941C6;
+  --primary-800: #53389E;
+  --primary-900: #42307D;
+  --primary-950: #2C1C5F;
+  --error-25: #FFFBFA;
+  --error-50: #FEF3F2;
+  --error-100: #FEE4E2;
+  --error-200: #FECDCA;
+  --error-300: #FDA29B;
+  --error-400: #F97066;
+  --error-500: #F04438;
+  --error-600: #D92D20;
+  --error-700: #B42318;
+  --error-800: #912018;
+  --error-900: #7A271A;
+  --error-950: #FEFDF0;
+  --warning-25: #FFFCF5;
+  --warning-50: #FFFAEB;
+  --warning-100: #FEF0C7;
+  --warning-200: #FEDF89;
+  --warning-300: #FEC84B;
+  --warning-400: #FDB022;
+  --warning-500: #F79009;
+  --warning-600: #DC6803;
+  --warning-700: #B54708;
+  --warning-800: #93370D;
+  --warning-900: #7A2E0E;
+  --warning-950: #4E1D09;
+}
+
+:root {
+  --blue-dark-25: #F5F8FF;
+  --blue-dark-50: #EFF4FF;
+  --blue-dark-100: #D1E0FF;
+  --blue-dark-200: #B2CCFF;
+  --blue-dark-300: #84ADFF;
+  --blue-dark-400: #528BFF;
+  --blue-dark-500: #2970FF;
+  --blue-dark-600: #155EEF;
+  --blue-dark-700: #004EEB;
+  --blue-dark-800: #0040C1;
+  --blue-dark-900: #00359E;
+  --blue-dark-950: #002266;
+}
+
 .InputField-module__flexField___aNE6o {
   width: 100%;
   height: fit-content;
@@ -1753,8 +2773,8 @@
   padding: 10px 12px;
   border-radius: 8px;
   gap: 12px;
-  background-color: #FFFFFF;
-  box-shadow: 0 0 0 1px #D0D5DD, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
+  background-color: var(--test-variable);
+  box-shadow: 0 0 0 1px var(--gray-300), 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
   box-sizing: border-box;
 }
 .InputField-module__flexField___aNE6o .InputField-module__inputField___mzakH {
@@ -1773,7 +2793,7 @@
 .InputField-module__flexField___aNE6o .InputField-module__inputField___mzakH {
   font-size: 16px;
   line-height: 24px;
-  color: #101828;
+  color: var(--gray-900);
   font-weight: 400;
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
@@ -1783,7 +2803,7 @@
 .InputField-module__flexField___aNE6o .InputField-module__inputField___mzakH::placeholder {
   font-size: 16px;
   line-height: 24px;
-  color: #98A2B3;
+  color: var(--gray-400);
   font-weight: 400;
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
@@ -1797,7 +2817,7 @@
   justify-content: center;
 }
 .InputField-module__flexField___aNE6o .InputField-module__icon___xR6jG svg * {
-  stroke: #98A2B3;
+  stroke: var(--gray-400);
 }
 .InputField-module__flexField___aNE6o .InputField-module__icon___xR6jG svg {
   width: 20px;
@@ -1807,7 +2827,7 @@
 .InputField-module__flexField___aNE6o .InputField-module__textSupport___njpRn {
   font-size: 16px;
   line-height: 24px;
-  color: #98A2B3;
+  color: var(--gray-400);
   font-weight: 400;
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
@@ -1827,7 +2847,7 @@
   justify-content: center;
 }
 .InputField-module__flexField___aNE6o .InputField-module__help___uSjvq svg * {
-  stroke: #98A2B3;
+  stroke: var(--gray-400);
 }
 .InputField-module__flexField___aNE6o .InputField-module__help___uSjvq svg {
   width: 16px;
@@ -1842,7 +2862,7 @@
   justify-content: center;
 }
 .InputField-module__flexField___aNE6o .InputField-module__dropdown___QQuFp svg * {
-  stroke: #667085;
+  stroke: var(--gray-500);
 }
 .InputField-module__flexField___aNE6o .InputField-module__dropdown___QQuFp svg {
   width: 20px;
@@ -1865,16 +2885,16 @@
   flex: none;
 }
 .InputField-module__flexField___aNE6o .InputField-module__button___jm0td.InputField-module__red___euINw svg * {
-  stroke: #F97066;
+  stroke: var(--error-400);
 }
 .InputField-module__flexField___aNE6o .InputField-module__button___jm0td.InputField-module__red___euINw:hover svg * {
-  stroke: #F04438;
+  stroke: var(--error-500);
 }
 .InputField-module__flexField___aNE6o .InputField-module__button___jm0td.InputField-module__gray___GGFcb svg * {
-  stroke: #98A2B3;
+  stroke: var(--gray-400);
 }
 .InputField-module__flexField___aNE6o .InputField-module__button___jm0td.InputField-module__gray___GGFcb:hover svg * {
-  stroke: #667085;
+  stroke: var(--gray-500);
 }
 .InputField-module__flexField___aNE6o.InputField-module__pointer___Ij_hP {
   cursor: pointer;
@@ -1883,16 +2903,16 @@
   box-shadow: 0 0 0 4px #F2F4F7, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
 }
 .InputField-module__flexField___aNE6o.InputField-module__isError___x2fXo {
-  box-shadow: 0 0 0 1px #FDA29B, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
+  box-shadow: 0 0 0 1px var(--error-300), 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
 }
 .InputField-module__flexField___aNE6o.InputField-module__isError___x2fXo .InputField-module__help___uSjvq svg * {
-  stroke: #F04438;
+  stroke: var(--error-500);
 }
 .InputField-module__flexField___aNE6o.InputField-module__isError___x2fXo.InputField-module__focus___xpWhB {
   box-shadow: 0 0 0 4px #FEE4E2, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
 }
 .InputField-module__flexField___aNE6o.InputField-module__disabled___hH7HA {
-  background-color: #F2F4F7;
+  background-color: var(--gray-100);
   cursor: default;
 }
 .InputField-module__flexField___aNE6o.InputField-module__disabled___hH7HA * {
@@ -1901,7 +2921,7 @@
 .InputField-module__flexField___aNE6o.InputField-module__disabled___hH7HA .InputField-module__inputField___mzakH {
   font-size: 16px;
   line-height: 24px;
-  color: #667085;
+  color: var(--gray-500);
   font-weight: 400;
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
@@ -1923,7 +2943,7 @@
 .InputField-module__inputFieldWrapper___ao9Rs .InputField-module__labelText___Fxxc3 {
   font-size: 14px;
   line-height: 20px;
-  color: #344054;
+  color: var(--gray-700);
   font-weight: 500;
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
@@ -1933,7 +2953,7 @@
 .InputField-module__inputFieldWrapper___ao9Rs .InputField-module__labelText___Fxxc3 .InputField-module__required___p4MLk {
   font-size: 14px;
   line-height: 20px;
-  color: #F04438;
+  color: var(--error-500);
   font-weight: 500;
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
@@ -1948,7 +2968,7 @@
 .InputField-module__inputFieldWrapper___ao9Rs .InputField-module__hintText___LC2Oq {
   font-size: 14px;
   line-height: 20px;
-  color: #475467;
+  color: var(--gray-600);
   font-weight: 400;
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
@@ -1963,7 +2983,7 @@
 .InputField-module__inputFieldWrapper___ao9Rs .InputField-module__hintError___LrJWr {
   font-size: 14px;
   line-height: 20px;
-  color: #F04438;
+  color: var(--error-500);
   font-weight: 400;
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
@@ -1982,12 +3002,12 @@
   flex: none;
 }
 .InputField-module__inputFieldWrapper___ao9Rs .InputField-module__helperLink___A_6Ua svg * {
-  stroke: #2970FF;
+  stroke: var(--blue-dark-500);
 }
 .InputField-module__inputFieldWrapper___ao9Rs .InputField-module__helperLink___A_6Ua {
   font-size: 14px;
   line-height: 20px;
-  color: #2970FF;
+  color: var(--blue-dark-500);
   font-weight: 400;
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
@@ -2008,8 +3028,8 @@
   padding: 10px 12px;
   border-radius: 8px;
   gap: 12px;
-  background-color: #FFFFFF;
-  box-shadow: 0 0 0 1px #D0D5DD, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
+  background-color: var(--test-variable);
+  box-shadow: 0 0 0 1px var(--gray-300), 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
   box-sizing: border-box;
 }
 .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o .InputField-module__inputField___mzakH {
@@ -2028,7 +3048,7 @@
 .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o .InputField-module__inputField___mzakH {
   font-size: 16px;
   line-height: 24px;
-  color: #101828;
+  color: var(--gray-900);
   font-weight: 400;
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
@@ -2038,7 +3058,7 @@
 .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o .InputField-module__inputField___mzakH::placeholder {
   font-size: 16px;
   line-height: 24px;
-  color: #98A2B3;
+  color: var(--gray-400);
   font-weight: 400;
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
@@ -2052,7 +3072,7 @@
   justify-content: center;
 }
 .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o .InputField-module__icon___xR6jG svg * {
-  stroke: #98A2B3;
+  stroke: var(--gray-400);
 }
 .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o .InputField-module__icon___xR6jG svg {
   width: 20px;
@@ -2062,7 +3082,7 @@
 .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o .InputField-module__textSupport___njpRn {
   font-size: 16px;
   line-height: 24px;
-  color: #98A2B3;
+  color: var(--gray-400);
   font-weight: 400;
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
@@ -2082,7 +3102,7 @@
   justify-content: center;
 }
 .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o .InputField-module__help___uSjvq svg * {
-  stroke: #98A2B3;
+  stroke: var(--gray-400);
 }
 .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o .InputField-module__help___uSjvq svg {
   width: 16px;
@@ -2097,7 +3117,7 @@
   justify-content: center;
 }
 .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o .InputField-module__dropdown___QQuFp svg * {
-  stroke: #667085;
+  stroke: var(--gray-500);
 }
 .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o .InputField-module__dropdown___QQuFp svg {
   width: 20px;
@@ -2120,16 +3140,16 @@
   flex: none;
 }
 .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o .InputField-module__button___jm0td.InputField-module__red___euINw svg * {
-  stroke: #F97066;
+  stroke: var(--error-400);
 }
 .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o .InputField-module__button___jm0td.InputField-module__red___euINw:hover svg * {
-  stroke: #F04438;
+  stroke: var(--error-500);
 }
 .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o .InputField-module__button___jm0td.InputField-module__gray___GGFcb svg * {
-  stroke: #98A2B3;
+  stroke: var(--gray-400);
 }
 .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o .InputField-module__button___jm0td.InputField-module__gray___GGFcb:hover svg * {
-  stroke: #667085;
+  stroke: var(--gray-500);
 }
 .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o.InputField-module__pointer___Ij_hP {
   cursor: pointer;
@@ -2138,16 +3158,16 @@
   box-shadow: 0 0 0 4px #F2F4F7, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
 }
 .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o.InputField-module__isError___x2fXo {
-  box-shadow: 0 0 0 1px #FDA29B, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
+  box-shadow: 0 0 0 1px var(--error-300), 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
 }
 .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o.InputField-module__isError___x2fXo .InputField-module__help___uSjvq svg * {
-  stroke: #F04438;
+  stroke: var(--error-500);
 }
 .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o.InputField-module__isError___x2fXo.InputField-module__focus___xpWhB {
   box-shadow: 0 0 0 4px #FEE4E2, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
 }
 .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o.InputField-module__disabled___hH7HA {
-  background-color: #F2F4F7;
+  background-color: var(--gray-100);
   cursor: default;
 }
 .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o.InputField-module__disabled___hH7HA * {
@@ -2156,7 +3176,7 @@
 .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o.InputField-module__disabled___hH7HA .InputField-module__inputField___mzakH {
   font-size: 16px;
   line-height: 24px;
-  color: #667085;
+  color: var(--gray-500);
   font-weight: 400;
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
@@ -2176,8 +3196,8 @@
   flex-direction: column;
   border-radius: 8px;
   padding: 4px;
-  background-color: #FFFFFF;
-  box-shadow: 0 0 0 1px #D0D5DD, 0 4px 6px -2px rgba(16, 24, 40, 0.031372549), 0px 12px 16px -4px rgba(16, 24, 40, 0.0784313725);
+  background-color: var(--base-white);
+  box-shadow: 0 0 0 1px var(--gray-300), 0 4px 6px -2px rgba(16, 24, 40, 0.031372549), 0px 12px 16px -4px rgba(16, 24, 40, 0.0784313725);
   overflow: scroll;
   scrollbar-width: none;
 }
@@ -2197,7 +3217,7 @@
 .InputField-module__selectField___ED0Q3 .InputField-module__modalWindow___JplNC .InputField-module__selectModalWindow___Dg52i .InputField-module__selectFieldOptionsItem___HBdJA .InputField-module__label___Wlb6C {
   font-size: 16px;
   line-height: 24px;
-  color: #101828;
+  color: var(--gray-900);
   font-weight: 400;
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
@@ -2205,7 +3225,7 @@
   font-variant: normal;
 }
 .InputField-module__selectField___ED0Q3 .InputField-module__modalWindow___JplNC .InputField-module__selectModalWindow___Dg52i .InputField-module__selectFieldOptionsItem___HBdJA.InputField-module__active___RcF6w {
-  background-color: #EFF4FF;
+  background-color: var(--blue-dark-50);
 }
 .InputField-module__selectField___ED0Q3 .InputField-module__modalWindow___JplNC .InputField-module__selectModalWindow___Dg52i .InputField-module__selectFieldOptionsItem___HBdJA.InputField-module__active___RcF6w svg {
   width: 20px;
@@ -2213,7 +3233,7 @@
   flex: none;
 }
 .InputField-module__selectField___ED0Q3 .InputField-module__modalWindow___JplNC .InputField-module__selectModalWindow___Dg52i .InputField-module__selectFieldOptionsItem___HBdJA.InputField-module__active___RcF6w svg * {
-  stroke: #2970FF;
+  stroke: var(--blue-dark-500);
 }
 
 .InputField-module__switcherField___Qezr0 {
@@ -2223,7 +3243,7 @@
   justify-content: left;
   border-radius: 12px;
   padding: 2px;
-  background-color: #EAECF0;
+  background-color: var(--gray-200);
 }
 .InputField-module__switcherField___Qezr0:after {
   flex: none;
@@ -2232,27 +3252,27 @@
   height: 16px;
   border-radius: 50%;
   box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.0588235294), 0 1px 3px 0 rgba(16, 24, 40, 0.1019607843);
-  background-color: #FFFFFF;
+  background-color: var(--base-white);
 }
 .InputField-module__switcherField___Qezr0:hover {
-  background-color: #D0D5DD;
+  background-color: var(--gray-300);
 }
 .InputField-module__switcherField___Qezr0:focus {
-  box-shadow: 0 0 0 4px #F2F4F7;
+  box-shadow: 0 0 0 4px var(--gray-100);
 }
 .InputField-module__switcherField___Qezr0.InputField-module__active___RcF6w {
   justify-content: right;
-  background-color: #2970FF;
+  background-color: var(--blue-dark-500);
 }
 .InputField-module__switcherField___Qezr0.InputField-module__active___RcF6w:hover {
-  background-color: #155EEF;
+  background-color: var(--blue-dark-600);
 }
 .InputField-module__switcherField___Qezr0:disabled {
   cursor: default;
-  background-color: #EAECF0;
+  background-color: var(--gray-200);
 }
 .InputField-module__switcherField___Qezr0:disabled:hover {
-  background-color: #EAECF0;
+  background-color: var(--gray-200);
 }
 
 .InputField-module__radioFieldItem___c6OMz {
@@ -2266,8 +3286,8 @@
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  border: 1px solid #D0D5DD;
-  background-color: #FFFFFF;
+  border: 1px solid var(--gray-300);
+  background-color: var(--base-white);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2275,7 +3295,7 @@
 .InputField-module__radioFieldItem___c6OMz .InputField-module__label___Wlb6C {
   font-size: 14px;
   line-height: 20px;
-  color: #344054;
+  color: var(--gray-700);
   font-weight: 500;
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
@@ -2283,7 +3303,7 @@
   font-variant: normal;
 }
 .InputField-module__radioFieldItem___c6OMz.InputField-module__active___RcF6w .InputField-module__checkbox___KcnRp {
-  border: 1px solid #2970FF;
+  border: 1px solid var(--blue-dark-500);
 }
 .InputField-module__radioFieldItem___c6OMz.InputField-module__active___RcF6w .InputField-module__checkbox___KcnRp:after {
   content: "";
@@ -2291,7 +3311,7 @@
   width: 6px;
   height: 6px;
   border-radius: 50%;
-  background-color: #2970FF;
+  background-color: var(--blue-dark-500);
 }
 
 .InputField-module__textareaField___iuYg7 {
@@ -2301,13 +3321,13 @@
   resize: none;
   border-radius: 8px;
   padding: 10px 12px;
-  background-color: #FFFFFF;
-  box-shadow: 0 0 0 1px #D0D5DD, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
+  background-color: var(--base-white);
+  box-shadow: 0 0 0 1px var(--gray-300), 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
 }
 .InputField-module__textareaField___iuYg7 {
   font-size: 16px;
   line-height: 24px;
-  color: #101828;
+  color: var(--gray-900);
   font-weight: 400;
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
@@ -2317,7 +3337,7 @@
 .InputField-module__textareaField___iuYg7::placeholder {
   font-size: 16px;
   line-height: 24px;
-  color: #98A2B3;
+  color: var(--gray-400);
   font-weight: 400;
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
@@ -2328,12 +3348,12 @@
   box-shadow: 0 0 0 4px #F2F4F7, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
 }
 .InputField-module__textareaField___iuYg7:disabled {
-  background-color: #F2F4F7;
+  background-color: var(--gray-100);
 }
 .InputField-module__textareaField___iuYg7:disabled {
   font-size: 16px;
   line-height: 24px;
-  color: #667085;
+  color: var(--gray-500);
   font-weight: 400;
   font-family: "Golos UI", sans-serif;
   font-stretch: normal;
@@ -2341,7 +3361,7 @@
   font-variant: normal;
 }
 .InputField-module__textareaField___iuYg7.InputField-module__isError___x2fXo {
-  border: 1px solid #FDA29B;
+  border: 1px solid var(--error-300);
 }
 .InputField-module__textareaField___iuYg7.InputField-module__isError___x2fXo:focus {
   box-shadow: 0 0 0 4px #FEE4E2, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);