:root{--base-hue: 240;--base-saturation: 80%;--base-lightness: 0%;--form-control-bg: #333;--bg-color: hsl(var(--base-hue), var(--base-saturation), var(--base-lightness));--bg-outline-hover: hsl(var(--base-hue), var(--base-saturation), calc(var(--base-lightness) + 10%));--primary-color: hsl(var(--base-hue), var(--base-saturation), calc(var(--base-lightness) + 70%));--primary-hover-color: hsl(var(--base-hue), var(--base-saturation), calc(var(--base-lightness) + 80%));--secondary-color: hsl(var(--base-hue), var(--base-saturation), calc(var(--base-lightness) + 20%));--secondary-hover-color: hsl(var(--base-hue), var(--base-saturation), calc(var(--base-lightness) + 30%));--nav-background-color: hsl(var(--base-hue), var(--base-saturation), calc(var(--base-lightness) + 5%));--destructive-color: hsl(0, 100%, 40%);--destructive-color-hover: hsl(0, 100%, 50%);--success-color: hsl(120, 100%, 30%);--success-color-hover: hsl(120, 100%, 40%);--border-color: var(--default-text);--default-text: hsl(var(--base-hue), var(--base-saturation), 100%);--minor-text: #aaa;--default-text-inv: hsl(var(--base-hue), var(--base-saturation), 0%)}.red-theme{--base-hue: 0}.blue-theme{--base-hue: 240}.green-theme{--base-hue: 120}.grey-theme{--base-hue: 0;--base-saturation: 0%}