:root{--base-hue: 240;--base-saturation: 80%;--base-lightness: 100%;--bg-color: hsl(var(--base-hue), var(--base-saturation), var(--base-lightness));--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) - 60%));--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-hover: hsl(0, 100%, 60%);--destructive-color: hsl(0, 100%, 70%);--success-color: hsl(120, 100%, 70%);--success-color-hover: hsl(120, 100%, 40%);--border-color: var(--default-text);--default-text: hsl(var(--base-hue), var(--base-saturation), 0%);--minor-text: #777;--default-text-inv: hsl(var(--base-hue), var(--base-saturation), 100%)}.red-theme{--base-hue: 0}.blue-theme{--base-hue: 240}.green-theme{--base-hue: 120}.grey-theme{--base-hue: 0;--base-saturation: 0%}