@mixin lightVariables() {
    --code: 0 0.24% 96.06%;
    --background: 0 0% 100%;
    --foreground: 0 0.02% 3.94%;
    --card: 0 0% 100%;
    --card-foreground: 0 0.02% 3.94%;
    --muted: 0 0.24% 96.06%;
    --muted-foreground: 0 0.01% 45.16%;
    --primary: 0 0.02% 9.06%;
    --primary-foreground: 0 0.5% 98.03%;
    --secondary: 0 0.24% 96.06%;
    --secondary-foreground: 0 0.02% 9.06%;
    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
    --border: 0 0.09% 89.82%;
    --input: 0 0.09% 89.82%;
    --destructive: 351.72 100% 40.53%;
    --accent: 0 0.24% 96.06%;
    --accent-foreground: 0 0.02% 9.06%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0.02% 3.94%;
    --sidebar-background: 0 0.5% 98.03%;
    --sidebar-foreground: 0 0.02% 3.94%;
    --sidebar-accent: 0 0.24% 96.06%;
    --sidebar-accent-foreground: 0 0.02% 9.06%;
    --sidebar-ring: 0 0% 41.09%;
}

@media (prefers-color-scheme: light) {
    :root {
        @include lightVariables();
    }
}

html[data-theme="light"] {
    @include lightVariables();
}