body {
  --text-normal: var(--color-base-60);
  --text-muted: var(--color-base-70);
  --text-faint: var(--color-base-80);
  --text-on-accent: var(--color-base-20);
  --modal-border-color: var(--color-base-30, var(--background-modifier-border-focus));
  --prompt-border-color: var(--color-base-30, var(--background-modifier-border-focus));

  --radius-s: 3px;
  --radius-m: 6px;
  --radius-l: 8px;
  --radius-xl: 10px;
  --modal-radius: var(--radius-m);
  --input-radius: var(--radius-s);
  --tab-radius: var(--radius-m);
  --tab-radius-active: var(--radius-m);
  --checkbox-radius: var(--radius-s);
  --toggle-radius: var(--radius-s);
  --toggle-thumb-radius: var(--radius-s);
  --slider-thumb-radius: var(--radius-s);
}

.theme-dark {
  --accent-h: 132;
  --accent-s: 79%;
  --accent-l: 83%;
  --color-accent-1: hsl(calc(var(--accent-h) - 1), calc(var(--accent-s) * 1.03), calc(var(--accent-l) * 1.05));
  --color-accent-2: hsl(calc(var(--accent-h) - 3), calc(var(--accent-s) * 1.05), calc(var(--accent-l) * 1.15));
  --color-red-rgb: 255, 192, 185;
  --color-red: #ffc0b9;
  --color-yellow-rgb: 254, 224, 148;
  --color-yellow: #fce094;
  --color-green-rgb: 179, 246, 192;
  --color-green: #b3f6c0;
  --color-cyan-rgb: 140, 248, 247;
  --color-cyan: #8cf8f7;
  --color-blue-rgb: 166, 219, 255;
  --color-blue: #a6dbff;
  --color-purple-rgb: 255, 202, 255;
  --color-purple: #ffcaff;
  --color-base-10: #07080d;
  --color-base-20: #14161b;
  --color-base-30: #2c2e33;
  --color-base-40: #4f5258;
  --color-base-50: #9b9ea4;
  --color-base-60: #c4c6cd;
  --color-base-70: #e0e2ea;
  --color-base-80: #eef1f8;
}

.theme-light {
  --accent-h: 145;
  --accent-s: 100%;
  --accent-l: 17%;
  --color-accent-1: hsl(calc(var(--accent-h) - 1), calc(var(--accent-s) * 1.01), calc(var(--accent-l) * 1.15));
  --color-accent-2: hsl(calc(var(--accent-h) - 3), calc(var(--accent-s) * 1.02), calc(var(--accent-l) * 1.50));
  --color-red-rgb: 89, 0, 8;
  --color-red: #590008;
  --color-yellow-rgb: 107, 83, 0;
  --color-yellow: #6b5300;
  --color-green-rgb: 0, 85, 35;
  --color-green: #005523;
  --color-cyan-rgb: 0, 115, 115;
  --color-cyan: #007373;
  --color-blue-rgb: 0, 76, 115;
  --color-blue: #004c73;
  --color-purple-rgb: 71, 0, 69;
  --color-purple: #470045;
  --color-base-10: #eef1f8;
  --color-base-20: #e0e2ea;
  --color-base-30: #c4c6cd;
  --color-base-40: #9b9ea4;
  --color-base-50: #4f5258;
  --color-base-60: #2c2e33;
  --color-base-70: #14161b;
  --color-base-80: #07080d;
}

.theme-dark,
.theme-light {
  --background-primary: var(--color-base-20);
  --background-primary-alt: var(--color-base-30);
  --background-secondary: var(--color-base-20);
  --background-secondary-alt: var(--color-base-30);
  --background-modifier-form-field: var(--color-base-30);
  --text-accent: var(--color-accent);
  --text-accent-hover: var(--color-accent-2);
  --background-modifier-border: var(--color-base-30);
  --background-modifier-border-hover: var(--color-base-30);
  --background-modifier-border-focus: var(--color-base-40);
  --interactive-normal: var(--color-base-10);
  --interactive-hover: var(--color-base-20);
}