:root {
  --color-background: hsl(0 0 10);
  --color-background-middle: hsl(0 0 15);
  --color-background-top: hsl(0 0 20);
  --color-border: hsl(0 0 30);
  --color-text-active: hsl(0 0 95);
  --color-text-muted: hsl(0 0 85);
  --color-text-inactive: hsl(0 0 65);
  --color-primary: hsl(200 69 57);
  --color-secondary: hsl(202 54 65);
  --color-tertiary: hsl(200 44 69);
  --color-accent: hsl(113 31 56);
  --color-success: hsl(121 31 57);
  --color-error: hsl(15 64 63);
  --color-warning: hsl(48 50 48);
}

:root[data-theme="light"] {
  --color-background: hsl(0 0 90);
  --color-background-middle: hsl(0 0 85);
  --color-background-top: hsl(0 0 80);
  --color-text-active: hsl(0 0 5);
  --color-text-muted: hsl(0 0 15);
  --color-text-inactive: hsl(0 0 35);
}

body {
  background-color: var(--color-background) !important;
}

.bg {
  background-color: var(--color-background) !important;
}

.bg-middle {
  background-color: var(--color-background-middle) !important;
}

.bg-top {
  background-color: var(--color-background-top) !important;
}

.border {
  border-color: var(--color-border) !important;
  border-width: 1px !important;
}

.text-active {
  color: var(--color-text-active) !important;
}

.text-muted {
  color: var(--color-text-muted) !important;
}

.text-inactive {
  color: var(--color-text-inactive) !important;
}

.primary {
  color: var(--color-primary) !important;
}
.bg-primary {
  background-color: var(--color-primary) !important;
}

.secondary {
  color: var(--color-secondary) !important;
}
.bg-secondary {
  background-color: var(--color-secondary) !important;
}

.tertiary {
  color: var(--color-tertiary) !important;
}
.bg-tertiary {
  background-color: var(--color-tertiary) !important;
}

.accent {
  color: var(--color-accent) !important;
}
.bg-accent {
  background-color: var(--color-accent) !important;
}

.success {
  color: var(--color-success) !important;
}
.bg-success {
  background-color: var(--color-success) !important;
}

.error {
  color: var(--color-error) !important;
}
.bg-error {
  background-color: var(--color-error) !important;
}

.warning {
  color: var(--color-warning) !important;
}
.bg-warning {
  background-color: var(--color-warning) !important;
}