@import url('https://fonts.googleapis.com/css2?family=Bungee+Hairline&family=Doto:wght,ROND@100..900,100&family=Just+Me+Again+Down+Here&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
*{
    transition: all ease-in 0.2s;
}

:root {
    --bg-dark: oklch(0.1 0.01 292);
    --bg: oklch(0.15 0.01 292);
    --bg-light: oklch(0.2 0.01 292);

    --text: oklch(0.96 0.02 292);
    --text-muted: oklch(0.76 0.02 292);

    --highlight: oklch(0.6 0.02 292);
    --border: oklch(0.3 0.02 292);
    --border-muted: oklch(0.2 0.02 292);

    --border-cart: solid 1px var(--border);
    --shadow: oklch(0.25 0.01 292) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;

    --primary: oklch(0.55 0.15 292);
    --primary-hover: oklch(0.6 0.15 292);
    --secondary: oklch(0.76 0.11 112);

    --gradient-bg-direction: 0deg;
    --gradient-bg: linear-gradient(var(--gradient-bg-direction), var(--bg-dark) 80%, tranparent);
    --gradient: linear-gradient(0deg, var(--bg) 95%, var(--bg-light));
    --gradient-hover: linear-gradient(0deg, var(--bg), var(--bg-light));

    --danger: oklch(0.7 0.05 30);
    --warning: oklch(0.7 0.05 100);
    --success: oklch(0.7 0.05 160);
    --info: oklch(0.7 0.05 260);

    --transition-standard: all 0.2s ease;
    --transition-theme: 
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        background-image 0.2s ease;
}

body.light {
    --bg-dark: oklch(0.92 0.01 292);
    --bg: oklch(0.96 0.01 292);
    --bg-light: oklch(1 0.01 292);

    --text: oklch(0.15 0.02 292);
    --text-muted: oklch(0.4 0.02 292);

    --highlight: oklch(1 0.02 292);
    --border: oklch(0.6 0.02 292);
    --border-muted: oklch(0.7 0.02 292);

    --border-cart: solid 1px var(--bg);


    --primary: oklch(0.6 0.1 292);
    --primary-hover: oklch(0.65 0.1 292);
    --secondary: oklch(0.4 0.1 112);

    --gradient: linear-gradient(0deg, var(--bg), var(--bg-light) 95%);
    --gradient-hover: linear-gradient(0deg, var(--bg), var(--bg-light));
    --box-shadow-muted: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;

    --danger: oklch(0.5 0.05 30);
    --warning: oklch(0.5 0.05 100);
    --success: oklch(0.5 0.05 160);
    --info: oklch(0.5 0.05 260);
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: brown;
    border-radius: 50%;
}