@media (prefers-color-scheme: light) {
    :root {
        --bg-dark: hsl(235 51% 92%);
        --bg: hsl(235 100% 98%);
        --bg-light: hsl(235 100% 100%);
        --text: hsl(244 63% 8%);
        --text-muted: hsl(238 19% 32%);
        --highlight: hsl(236 100% 100%);
        --border: hsl(237 15% 55%);
        --border-muted: hsl(236 22% 67%);
        --primary: hsl(241 33% 37%);
        --secondary: hsl(54 100% 12%);
        --danger: hsl(9 21% 41%);
        --warning: hsl(52 23% 34%);
        --success: hsl(147 19% 36%);
        --info: hsl(217 22% 41%);
    }
    .sold {
        filter: grayscale(0.8);
    }
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg-dark: hsl(241 60% 3%);
        --bg: hsl(239 39% 6%);
        --bg-light: hsl(238 24% 10%);
        --text: hsl(236 100% 100%);
        --text-muted: hsl(236 29% 75%);
        --highlight: hsl(237 15% 43%);
        --border: hsl(238 19% 32%);
        --border-muted: hsl(239 25% 22%);
        --primary: hsl(238 70% 80%);
        --secondary: hsl(53 40% 57%);
        --danger: hsl(9 26% 64%);
        --warning: hsl(52 19% 57%);
        --success: hsl(146 17% 59%);
        --info: hsl(217 28% 65%);
    }
    .sold {
        filter: grayscale(0.65);
    }
}