html {
  --color-white: #fff;
  --color-black: #000;
  --color-primary: #7f3f98;
  --color-primary-hover: #a360bd;
  --color-primary-muted: #7f3f9830;
  --color-primary-muted-hover: #7f3f9860;
  --color-secondary: #585858;
  --color-secondary-hover: #727272;
  --color-tertiary: #161616;
  --color-tertiary-hover: #303030;
  --color-danger: #e74c3c;
  --color-danger-hover: #ed7669;
  --color-success: #2ecc71;
  --color-success-hover: #54d98c;
  --color-warning: #f1c40f;
  --color-warning-hover: #f4d03f;
  --color-highlight: #2ecc71;
  --color-highlight-backdrop: #2ecc7133;
  --color-background: #0a0a0a;
  --color-text-primary: #fff;
  --color-text-secondary: #a2a2a2;
  --color-border: #252525;
  --color-spinner-background: #ffffff4d;
  --color-spinner-foreground: #fff;
}

html.light {
  --color-primary: #7f3f98;
  --color-primary-hover: #5f2f71;
  --color-primary-muted: #7f3f9830;
  --color-primary-muted-hover: #7f3f9860;
  --color-secondary: #dedede;
  --color-secondary-hover: #bcbcbc;
  --color-tertiary: #f7f7f7;
  --color-tertiary-hover: #d5d5d5;
  --color-danger: #e74c3c;
  --color-danger-hover: #c72918;
  --color-success: #1abc9c;
  --color-success-hover: #12806a;
  --color-warning: #e67e22;
  --color-warning-hover: #b05d14;
  --color-highlight: #1abc9c;
  --color-highlight-backdrop: #1abc9c33;
  --color-background: #fff;
  --color-text-primary: #121212;
  --color-text-secondary: #686868;
  --color-border: #dedede;
  --color-spinner-background: #0000004d;
  --color-spinner-foreground: #000;}