@import "@/styles/variables.scss";

:root {
    @include define-color("ui-background", hsl(0, 0%, 60%));
    @include define-color("ui-color", hsl(0, 0%, 30%));
    @include define-color("ui-color-on-background", hsl(0, 0%, 100%));
    @include define-color("main-color", hsl(0, 0%, 5%));
    @include define-color("main-background", hsl(0, 0%, 100%));
    @include define-color("second-background", hsl(0, 0%, 93%));
    @include define-color("theme-color", hsl(213, 100%, 50%));
    @include define-color("success-color", hsl(115, 100%, 40%));
    @include define-color("warning-color", hsl(0, 100%, 40%));
}

[theme="light"] {
}

[theme="dark"] {
    @include define-color("ui-background", hsl(0, 0%, 55%));
    @include define-color("ui-color", hsl(0, 0%, 30%));
    @include define-color("ui-color-on-background", hsl(0, 0%, 95%));
    @include define-color("main-color", hsl(0, 0%, 93%));
    @include define-color("main-background", hsl(213, 0%, 17%));
    @include define-color("second-background", hsl(213, 0%, 10%));
    @include define-color("theme-color", hsl(213, 100%, 45%));
    @include define-color("success-color", hsl(115, 100%, 30%));
    @include define-color("warning-color", hsl(0, 100%, 30%));
}
