:root .light {
  --body-background: #F2F4F6;
  --input-background: #fff;
  --background: #f9fbfb;
  --box-shadow: 0 2.8px 2.2px hsl(200 10% 20% / calc(.02 + .03)), 0 6.7px 5.3px hsl(200 10% 20% / calc(.02 + .01)), 0 12.5px 10px hsl(200 10% 20% / calc(.02 + .02)), 0 18.3px 13.9px hsl(200 10% 20% / calc(.02 + .02)), 0 32.8px 19.4px hsl(200 10% 20% / calc(.02 + .03)), 0 46px 67px hsl(200 10% 20% / .02);
  --box-big-shadow: 0 0px 4px 0px rgb(0 0 0 / 10%), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --button-shadow: 0 13px 6px -9px rgba(0, 0, 0, 0.4), 0 8px 8px -9px rgba(0, 0, 0, 0.65); 
  --link-button-shadow: 0 2px 2px -1px rgb(0 0 0 / 36%), 0 1px 3px 1px rgb(0 0 0 / 32%);
  --button-hover-shadow: 0 7px 2px -4px rgba(0, 0, 0, 0.2);
  --input-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.07);
  --badge-succes: -.075rem -.075rem 0px 0px #00b740, .075rem .075rem 0px 0px #00aa3b;
  --badge-danger: -.075rem -.075rem 0px 0px #ba0101, .075rem .075rem 0px 0px #ba0101;
  --white: #FFFFFF;
  --dark: #000;
  --red: #d30404;
  --green: #01d24a;
  --blue: #0300c7;
  --gray: #8a8d91;
  --dark-icon: #ffffff;
  --dark-gray-icon: #f5f5f5;
  --dark-light-icon: #ffffff;
  --dark-black: #0F1215;
  --dark-primary: #d1dbe0;
  --dark-secondary: #1B1E21;
  --text-color-dark: rgba(21, 24, 31, 0.881);
  --link: #5856d6;
  --link-hover: #4e4dbe;
  --title-text-color-dark: rgba(23, 26, 32, 0.981);
  --svg-fill: #000;
  --border-light-white: 1px solid rgba(78, 78, 78, 0.4);
  --border-light-dark: 0.0625rem solid #ced3dd;
  --border-input: 0.0625rem solid #ababab;
  --table-border-color: #cdd1d7;
  --shadow-menu: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --block-hover: #F2F4F6; 
  --card-border: 1px solid transparent;
  --scroll-thumb: #919191;
  --menu-hover-black: #fff;
  --bs-code-color_n: #ab0055;
}

:root .dark {
  --body-background: #31353c;
  --input-background: #252d34;
  --background: #3c4048;
  --box-shadow: 0 2.8px 2.2px hsl(200 30% 13% / calc(.2 + .03)), 0 6.7px 5.3px hsl(200 30% 13% / calc(.2 + .01)), 0 12.5px 10px hsl(200 30% 13% / calc(.2 + .02)), 0 22.3px 17.9px hsl(200 30% 13% / calc(.2 + .02)), 0 41.8px 33.4px hsl(200 30% 13% / calc(.2 + .03)), 0 100px 80px hsl(200 30% 13% / .2) !important;
  --box-big-shadow: -1px -1px 0px 0px rgb(255 255 255 / 17%), 1px 1px 3px 1px rgb(0 0 0 / 38%);
  --button-shadow: 0 16px 6px -9px rgba(0, 0, 0, 0.31), 0 8px 6px -9px rgb(0 0 0 / 75%); 
  --link-button-shadow: 0 3px 2px -1px rgb(0 0 0 / 38%), 0 1px 3px 1px rgb(0 0 0 / 36%);
  --button-hover-shadow: 0 2px 2px -6px rgb(0 0 0 / 63%), 0 3px 3px 0px rgb(67 66 66 / 30%);
  --input-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.07);
  --badge-succes:  -.075rem -.075rem 0px 0px #46c673, .075rem .075rem 0px 0px #000;
  --badge-danger: -.075rem -.075rem 1px 1px #ec1010, .075rem .075rem 1px 1px #0000008c;
  --white: #000;
  --dark: #fff;
  --red: #f50c0c;
  --green: #09db52;
  --blue: #2e8dff;
  --gray: #A9ABAD;
  --dark-icon: #000;
  --dark-gray-icon: #1f2124;
  --dark-light-icon: #1f2124;
  --dark-black: #36414d;
  --dark-primary: #21262b;
  --dark-secondary: #1B1E21;
  --text-color-dark: rgb(245 245 245 / 90%);
  --title-text-color-dark: rgba(255, 255, 255, 0.981);
  --link: #8886ff;
  --link-hover: #4e4dbe;
  --svg-fill: #fff;
  --border-light-white: 1px solid rgba(151, 151, 151, .4); 
  --border-light-dark: 0.0625rem solid rgb(0 0 0 / 44%);
  --border-input: 0.0625rem solid #6d6969;
  --table-border-color: #e5e7eb40;
  --shadow-menu: 0 20px 40px black;
  --block-hover: #202228; 
  --card-border: 1px solid transparent;
  --scroll-thumb: #6b6b6b; 
  --menu-hover-black: #1c1e20;
  --bs-code-color_n: #ff369a;
}

:root{
  --sidebar-width: 295px; 
}