:root {
  /* System Color */
  --body-color: #E4E9F7; 
  --sidebar-color: #FFF;
  --primary-color: #4ca3e6;
  --primary-color-dark: #0432be;
  --primary-color-light: #F6F5FF;
  --toogle-color: #d3d2d2;
  --text-color-dark: #fff;
  --text-color: #000000;
  --opposite-back-color: black;
  --trans-02: all 0.2s ease;
  --trans-03: all 0.3s ease;
  --trans-04: all 0.4s ease;
  --trans-05: all 0.5s ease;

   --sidebar-color-depository:  #145f3d;
  --btn-color-depository: #145f3d;
  --text-color-depository: #f1bf6f;
}

/* System Color */
body.dark {
  --body-color: #18191A;
  --sidebar-color: #242526;
  --primary-color: #3A3B3C;
  --primary-color-light: #3A3B3C;
  --toogle-color: #FFF;
  --text-color-dark: #242323;
  --text-color: #CCC;
  --opposite-back-color: #212125;
}

body {
  height: 100vh;
  background: var(--body-color);
}