/* Catppuccin Mocha */
:root[data-theme="mocha"], :root {
    --color-surface-0: #313244;
    /* Base */
    --color-surface-1: #45475a;
    /* Mantle */
    --color-surface-2: #585b70;
    /* Surface */
    --color-text: #cdd6f4;
    --color-base: #1e1e2e;
    /* Text */
    --color-accent: #a6e3a1;
    /* Green */
    --color-accent-hover: #89d58d;
    /* Hover Green */
    --color-border: #585b70;
    /* Overlay */
    --color-rosewater: #f5e0dc;
    --color-flamingo: #f2cdcd;
    --color-pink: #f5c2e7;
    --color-mauve: #cba6f7;
    --color-red: #f38ba8;
    --color-maroon: #eba0ac;
    --color-peach: #fab387;
    --color-yellow: #f9e2af;
    --color-teal: #94e2d5;
    --color-sky: #89dceb;
    --color-sapphire: #74c7ec;
    --color-blue: #89b4fa;
    --color-lavender: #b4befe;
    --color-overlay-0: #6c7086;
    --color-overlay-1: #7f849c;
    --color-overlay-2: #9399b2;
}

/* Catppuccin Latte */
:root[data-theme="latte"] {
    --color-surface-0: #ccd0da;
    /* Base */
    --color-surface-1: #bcc0cc;
    /* Mantle */
    --color-surface-2: #acb0be;
    /* Surface */
    --color-text: #4c4f69;
    --color-base: #eff1f5;
    /* Text */
    --color-accent: #d7827e;
    /* Peach */
    --color-accent-hover: #e04f58;
    /* Hover Peach */
    --color-border: #9ca0b0;
    /* Overlay */
    --color-rosewater: #dc8a78;
    --color-flamingo: #dd7878;
    --color-pink: #ea76cb;
    --color-mauve: #8839ef;
    --color-red: #d20f39;
    --color-maroon: #e64553;
    --color-peach: #fe640b;
    --color-yellow: #df8e1d;
    --color-teal: #40a02b;
    --color-sky: #04a5e5;
    --color-sapphire: #209fb5;
    --color-blue: #1e66f5;
    --color-lavender: #7287fd;
    --color-overlay-0: #6c6f85;
    --color-overlay-1: #8c8fa1;
    --color-overlay-2: #9ca0b0;
}

:root[data-theme="yule-night"] {
    --color-surface-0: #1b1d28;
    /* Deep midnight */
    --color-surface-1: #252936;
    /* Frosty steel */
    --color-surface-2: #343a48;
    /* Snow shadow */
    --color-text: #d4e6f4;
    /* Pale moonlight */
    --color-accent: #a3cf8e;
    /* Pine green */
    --color-accent-hover: #7fb36a;
    /* Mistletoe */
    --color-border: #475266;
    /* Frosty edges */
}

:root[data-theme="yule-day"] {
    --color-surface-0: #f5f3ed;
    /* Fresh snow */
    --color-surface-1: #ece7df;
    /* Frosty beige */
    --color-surface-2: #dcd3c3;
    /* Hearth ash */
    --color-text: #4e4b43;
    /* Warm bark */
    --color-accent: #7ea86a;
    /* Pine green */
    --color-accent-hover: #577a46;
    /* Darker pine */
    --color-border: #9d9684;
    /* Frosted wood */
}

:root[data-theme="midsummer-twilight"] {
    --color-surface-0: #241f36;
    /* Starry violet */
    --color-surface-1: #2e2746;
    /* Dusky purple */
    --color-surface-2: #403659;
    /* Twilight shadow */
    --color-text: #f6d8e8;
    /* Fading pink */
    --color-accent: #ffd983;
    /* Sunflower gold */
    --color-accent-hover: #f4be5c;
    /* Saffron yellow */
    --color-border: #6b5a89;
    /* Lavender dusk */
}

:root[data-theme="midsummer-daylight"] {
    --color-surface-0: #faf8eb;
    /* Bright sunlight */
    --color-surface-1: #f2e7c4;
    /* Sunlit field */
    --color-surface-2: #e6d399;
    /* Wheat gold */
    --color-text: #3b3a24;
    /* Tree bark */
    --color-accent: #f5c34e;
    /* Summer gold */
    --color-accent-hover: #d69a30;
    /* Sunset orange */
    --color-border: #a38a5b;
    /* Golden shadows */
}

:root[data-theme="fireworks-night"] {
    --color-surface-0: #0a0e1a;
    /* Starry sky */
    --color-surface-1: #121b32;
    /* Midnight blue */
    --color-surface-2: #1f2945;
    /* Smoke cloud */
    --color-text: #ffffff;
    /* Brilliant white */
    --color-accent: #ff4c4c;
    /* Firework red */
    --color-accent-hover: #ff726f;
    /* Flaming red */
    --color-border: #3b4e7e;
    /* Steel blue */
}

:root[data-theme="parade-day"] {
    --color-surface-0: #fafafa;
    /* White fabric */
    --color-surface-1: #eaeaea;
    /* Pale silver */
    --color-surface-2: #c9d3e3;
    /* Cerulean mist */
    --color-text: #2b2b2b;
    /* Midnight blue */
    --color-accent: #ff3b3b;
    /* Firework red */
    --color-accent-hover: #cc2a2a;
    /* Deep crimson */
    --color-border: #8795b4;
    /* Cloud blue */
}

:root[data-theme="harvest-twilight"] {
    --color-surface-0: #1d1b13;
    /* Shadowed wheat field */
    --color-surface-1: #29231a;
    /* Earthen soil */
    --color-surface-2: #4b3b27;
    /* Golden dusk */
    --color-text: #f2e5ce;
    /* Pale harvest moon */
    --color-accent: #e4a672;
    /* Pumpkin orange */
    --color-accent-hover: #c88752;
    /* Rusted leaves */
    --color-border: #5d4633;
    /* Bark brown */
}

:root[data-theme="golden-hour"] {
    --color-surface-0: #fef6e6;
    /* Golden wheat */
    --color-surface-1: #fdecc8;
    /* Honey glow */
    --color-surface-2: #fcd399;
    /* Pumpkin yellow */
    --color-text: #533c24;
    /* Harvest bark */
    --color-accent: #e78a4b;
    /* Autumn orange */
    --color-accent-hover: #d06b34;
    /* Deep amber */
    --color-border: #a88a5f;
    /* Field shadows */
}

:root[data-theme="stargazer"] {
    --color-surface-0: #0d1321;
    /* Midnight sky */
    --color-surface-1: #1c2533;
    /* Cloudy night */
    --color-surface-2: #283142;
    /* Subtle twilight */
    --color-text: #d6e0f5;
    /* Starlight */
    --color-accent: #62b6cb;
    /* Cool cyan */
    --color-accent-hover: #89d3ed;
    /* Soft teal */
    --color-border: #3e506a;
    /* Lunar blue */
}

:root[data-theme="daydreamer"] {
    --color-surface-0: #f9f9fc;
    /* Light paper */
    --color-surface-1: #eceef3;
    /* Morning mist */
    --color-surface-2: #d7dcea;
    /* Overcast sky */
    --color-text: #2e3440;
    /* Quiet gray */
    --color-accent: #5e81ac;
    /* Blue-gray calm */
    --color-accent-hover: #81a1c1;
    /* Brighter sky blue */
    --color-border: #b2c4d4;
    /* Subtle frost */
}

// Use SCSS features to create 100-950 shades of all colors (tailwindify)
// Increments of 100, 200, (steps of 100) until 900, 950, HSL
// 100 being 90% lightness, 950 being 5% lightness
// 100 being the most light (nearly white), 950 being the least light (nearly black)
// Generate 100-900

// These are root variables that don't care what the theme is
// for loop, 100 increment each
@for $j from 1 through 9 {
    $i: $j * 100;
    // Compute lightness value before setting color
    $lightness: 100% - $j * 10%;


    :root {
        // Take brightness of active color (var(--color-surface-1)) and adjust its lightness
        --color-surface-1-#{$i}: hsl(hue(var(--color-surface-1)), 100%, #{$lightness});
        --color-surface-2-#{$i}: hsl(hue(var(--color-surface-2)), 100%, #{$lightness});
        --color-text-#{$i}: hsl(hue(var(--color-text)), 100%, #{$lightness});
        --color-accent-#{$i}: hsl(hue(var(--color-accent)), 100%, #{$lightness});
        --color-accent-hover-#{$i}: hsl(hue(var(--color-accent-hover)), 100%, #{$lightness});
        --color-border-#{$i}: hsl(hue(var(--color-border)), 100%, #{$lightness});
        --color-rosewater-#{$i}: hsl(hue(var(--color-rosewater)), 100%, #{$lightness});
        --color-flamingo-#{$i}: hsl(hue(var(--color-flamingo)), 100%, #{$lightness});
        --color-pink-#{$i}: hsl(hue(var(--color-pink)), 100%, #{$lightness});
        --color-mauve-#{$i}: hsl(hue(var(--color-mauve)), 100%, #{$lightness});
        --color-red-#{$i}: hsl(hue(var(--color-red)), 100%, #{$lightness});
        --color-maroon-#{$i}: hsl(hue(var(--color-maroon)), 100%, #{$lightness});
        --color-peach-#{$i}: hsl(hue(var(--color-peach)), 100%, #{$lightness});
        --color-yellow-#{$i}: hsl(hue(var(--color-yellow)), 100%, #{$lightness});
        --color-blue-#{$i}: hsl(hue(var(--color-blue)), 100%, #{$lightness});
        --color-teal-#{$i}: hsl(hue(var(--color-teal)), 100%, #{$lightness});
        --color-sky-#{$i}: hsl(hue(var(--color-sky)), 100%, #{$lightness});
        --color-sapphire-#{$i}: hsl(hue(var(--color-sapphire)), 100%, #{$lightness});
        --color-lavender-#{$i}: hsl(hue(var(--color-lavender)), 100%, #{$lightness});
        --color-overlay-0-#{$i}: hsl(hue(var(--color-overlay-0)), 100%, #{$lightness});
        --color-overlay-1-#{$i}: hsl(hue(var(--color-overlay-1)), 100%, #{$lightness});
        --color-overlay-2-#{$i}: hsl(hue(var(--color-overlay-2)), 100%, #{$lightness});
        --color-base-#{$i}: hsl(hue(var(--color-base)), 100%, #{$lightness});
    }
}

p, h1, h2, h3, h4, h5, h6, small, a, span, div, li, td, th, label, input, textarea, select, button {
    color: var(--color-text);
}

// Set background for things like buttons, dropdowns, etc.
button, input, select, textarea {
    @apply border-accent border rounded-sm m-1;
    background-color: var(--color-surface-1);
}

body {
    background-color: var(--color-base);
}