:root {
  --color-primary: #8aa2d3;
  --color-primary-active: #9db1da;
  --color-success: #77ccb0;
  --color-success-active: #8ad3bb;
  --color-danger: #d38aa2;
  --color-danger-active: #da9db1;
  --color-bg: #fafafa;
  --color-bg-active: #f0f0f0;
  --color-backdrop: rgba(255, 255, 255, 0.8);
  --color-backdrop-active: rgba(255, 255, 255, 0.65);
  --color-backdrop-wrapper: rgba(255, 255, 255, 0.65);
  --color-backdrop-border: #bbbbbb;
  --color-body: #f2f2f2;
  --color-wrapper: #f1f1f1;
  --color-border: #dadfe6;
  --color-font: #24292f;
  --color-font-inverse: #fdfdfd;
  --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  --box-shadow-backdrop: 0 8px 24px rgba(0, 0, 0, 0.1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #474b51;
    --color-bg-active: #585c61;
    --color-backdrop: rgba(71, 75, 81, 0.9);
    --color-backdrop-active: rgba(255, 255, 255, 0.1);
    --color-backdrop-wrapper: rgba(255, 255, 255, 0.1);
    --color-backdrop-border: #bbbbbb;
    --color-body: #2f3136;
    --color-wrapper: #34373d;
    --color-border: #34373d;
    --color-font: #e1e1e1;
    --color-font-inverse: #24292f;
    --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    --box-shadow-backdrop: 0 8px 24px rgba(0, 0, 0, 0.2);
  }
}

body[data-theme=dark] {
  --color-bg: #474b51;
  --color-bg-active: #585c61;
  --color-backdrop: rgba(71, 75, 81, 0.9);
  --color-backdrop-active: rgba(255, 255, 255, 0.1);
  --color-backdrop-wrapper: rgba(255, 255, 255, 0.1);
  --color-backdrop-border: #bbbbbb;
  --color-body: #2f3136;
  --color-wrapper: #34373d;
  --color-border: #34373d;
  --color-font: #e1e1e1;
  --color-font-inverse: #24292f;
  --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  --box-shadow-backdrop: 0 8px 24px rgba(0, 0, 0, 0.2);
}