:root {  
  --theme-color: #2e1e4c;
  --light-bg-color: #fff;
  --light-hover-bg-color: #eee;
  --gray-low-color: #e0d1caff;
  --gray-mid-color: #ede5e1ff;
  --gray-high-color: #f8f5f4ff;
  --accent1-low-color: #2a3b6c;
  --accent1-mid-color: #4a63c6;
  --accent1-high-color: #8999d8;
  --accent2-low-color: #46aebbff;
  --accent2-mid-color: #6ec2cbff;
  --accent2-high-color: #96d1d9ff;
  --accent2-fade-color: #46aebb66; 
  --accent3-low-color: #e84a5fff;
  --accent3-mid-color: #ed7383ff;
  --accent3-high-color: #f5adb6ff;
  --not-bg-color: #fc8865;
  --edge-color: #d2d2d2;
  --quarter-edge-color: #0000001c;
  --popup-back-bg-color: #ffffffab;
  --dark-text-color: #2f2f2f;
  --dark-text-color-const: #282828ff;
  --mid-text-color: #9cb79b;
  --light-text-color: #fff;
  --light-text-color-const: #fff;
  --popup-text-color: #545454;
  --faint-shadow: #0000004a;
  --menu-text-color: #fff;
  --c1-color: #82a8ad;
  --c2-color: #7ba687;
  --c3-color: #648e62;
  --c4-color: #6cbc5f;
  --c5-color: #9fbc37;
  --c6-color: #dfa14b;
  --c7-color: #de836a;
  --c8-color: #e76d91;
  --c9-color: #b76abe;
  --c10-color: #6b6abe;
  --svg-invertion: 0%;
}