:root {
  --primary: #3b99ea;
  --login-background-color: var(--primary);
  --button-background-color: var(--primary);
  --sidebar-background-color: #1e1e2d;
  --sidebar-header-background-color: #1b1b28;
  --sidebar-item-background-color: #1b1b28;
  --sidebar-item-color: #9899ac;
  --sidebar-item-active-color: #3b99ea;

  --on-primary: #fff;
  --primary-container: #84c6ff;

  --background: #f5f8fa;
  --on-background: #fff;

  --surface: #f2f3f5;
  --on-surface: #161616;

  --surface1: #fff;
  --on-surface1: #161616;

  --surface2: #1e1e2d;
  --on-surface2-1: var(--primary);
  --on-surface2-2: #494b74;
  --sidebar-background: #4c4e6f;
  --on-surface2-4: #9899ac;
  --on-surface2-5: #fff;
  --on-surface2-6: #6A7076;
  --on-surface2-7: #202124;
  --on-surface2-8: #1b1b28;

  --surface3: #2b2b2b;
  --on-surface3: #fff;

  --surface4: #e4e8f0;
  --on-surface4: #161616;

  --sidebar-item-active-background: #1b1b28;

  --outline: #dadce0;
  --outline-variant: #2b2b2b;

  --error: #e06666;
  --on-error: #fff;
  --error-container: #F9DEDC;

  --disabled: #1f1f1f61;

  --folder-color1: #ffa000;
  --folder-color2: #ffca28;

  --color1: #009ef7;
  --color1-background: #ecf8ff;

  --color2: #ffc700;
  --color2-background: #fff8dd;

  --color3: #f1416c;
  --color3-background: #fff5f8;

  --color4: #50cd89;
  --color4-background: #e8fff3;

  --color5: #15158b;
  --color5-background: #f2f2f9;
}