:root {
  /* --color-primary: #420dab; */
  --color-primary: #4556f0;
  --color-primary: #3146ff;
  --color-primary-darker: #1b2bb9;
  --color-primary-lighter: #626ef0;
  --color-primary-lightest: #d3d7ff;
  --color-white: #f2f3f4;
  --color-dark: #28313f;
  --color-black: #0b081f;

  --color-grid-light: #eeeef3;
  --color-grid-dark: #211850;

  --app-bg: #e0def1;
  --app-sidebar: #08022f;
  --app-sidebar-hover: #4b41a7;
  --app-sidebar-text: #d9d8f0;
  --app-sidebar-text-hover: #fff;
  --app-sidebar-hr: #21195b;
  --app-sidebar-icon: #7f77ce;
  --app-sidebar-icon-hover: #998eff;

  --app-sidebar-avatar: #efdb73;

  --app-sidebar-alt: #1e1352;

  --app-border: #d0d4fc;
  --app-text: #0f0831;
  --app-text-lighter: #17103b;

  --transition: all 0.3s ease-in-out;
}