:root {
    /* color-scheme: light dark; */
    --text-or-stroke-color: #2c2c2c;
    --border-color: transparent;
    /* This line is done differently so the opacity can be changed elsewhere lol */
    --background-color: 236, 239, 241;
    --secondary-color: #90A4AE;
    --linear-grad1: #ECEFF1;
    --optional-rnd-rect-border-color: rgba(0, 0, 0, 0);
    --default-font: "Roboto Slab";
    --optional-radius: 1rem;
    --drop-shadow-color: rgba(0, 0, 0, 0.6);
    --custom-drop-shadow:
        0 0 50px 15px rgba(0, 0, 0, 0.05),
        0 0 30px 8px rgba(0, 0, 0, 0.1),
        0 0 10px 2px rgba(0, 0, 0, 0.15);
    --custom-drop-shadow-hover:
        0 0 50px 30px rgba(0, 0, 0, 0.1),
        0 0 30px 16px rgba(0, 0, 0, 0.15),
        0 0 10px 4px rgba(0, 0, 0, 0.20);
    --show-hide: none;
    --ease-style: ease;
    overscroll-behavior: none;
    --background-split-page:
        linear-gradient(to left,
            rgba(245, 241, 230, 0.05) 0%,
            rgba(247, 238, 228, 0.10) 30%,
            rgba(249, 236, 226, 0.20) 50%,
            rgba(250, 234, 188, 0.40) 70%,
            rgba(252, 232, 190, 0.80) 90%,
            rgba(254, 230, 192, .90) 100%),
        linear-gradient(to right,
            rgba(245, 241, 230, 0.05) 0%,
            rgba(247, 238, 228, 0.10) 30%,
            rgba(249, 236, 226, 0.20) 50%,
            rgba(250, 234, 188, 0.40) 70%,
            rgba(252, 232, 190, 0.80) 90%,
            rgba(254, 230, 192, .90) 100%);

    --z-base: 0;
    --z-main-content: 10;
    --z-layered-on-main: 100;
    --z-nav-arrows: 101;
    --z-floating: 1000;
    --z-overlay: 1001;
    --z-modal: 1002;
}

[data-theme="Modern Light"] {
    --text-or-stroke-color: #2c2c2c;
    --border-color: transparent;
    --background-color: 236, 239, 241;
    --secondary-color: #90A4AE;
    --default-font: "Inter";
    --optional-radius: 1rem;
    --linear-grad1: #ECEFF1;
    --drop-shadow-color: black;
}

[data-theme="Modern Dark"] {
    --text-or-stroke-color: #c1cccc;
    color: var(--text-or-stroke-color);
    --border-color: transparent;
    --background-color: 18, 18, 18;
    --secondary-color: #1f1f1f;
    --default-font: "Inter";
    --optional-radius: 1rem;
    --linear-grad1: #121212;
    --drop-shadow-color: transparent
}

[data-theme="Classic Light"] {
    --text-or-stroke-color: black;
    --border-color: black;
    --background-color: 255, 255, 255;
    --secondary-color: rgb(173, 171, 171);
    --linear-grad1: white;
}

[data-theme="Classic Dark"] {
    --text-or-stroke-color: rgb(163, 163, 163);
    --background-color: 0, 0, 0;
    --secondary-color: rgb(41, 40, 40);
    --linear-grad1: black;
    --border-color: var(--text-or-stroke-color);
}

[data-theme="Urban Fog"] {
    --text-or-stroke-color: rgb(163, 163, 163);
    --background-color: 50, 50, 50;
    --secondary-color: rgb(66, 66, 66);
    --linear-grad1: rgb(50, 50, 50);
}

[data-theme="Paperwhite"] {
    --text-or-stroke-color: black;
    --optional-rnd-rect-border-color: black;
    --background-color: 255, 255, 255;
    --secondary-color: white;
    --linear-grad1: white;
    --ease-style: steps(1, start);
    --custom-drop-shadow: none;
    --custom-drop-shadow-hover: none;
}

[data-theme="Void Luminescence"] {
    --text-or-stroke-color: rgb(212, 212, 212);
    --background-color: 0, 0, 0;
    --secondary-color: black;
    --linear-grad1: black;
    --optional-rnd-rect-border-color: white;
}

[data-theme="Ocean Depths"] {
    --text-or-stroke-color: rgb(183, 226, 255);
    --background-color: 49, 81, 150;
    --secondary-color: rgb(78, 101, 152);
    --linear-grad1: rgb(49, 81, 150);
}

[data-theme="Emerald Canopy"] {
    --text-or-stroke-color: rgb(212, 255, 199);
    --background-color: 44, 110, 37;
    --secondary-color: rgb(34, 83, 28);
    --linear-grad1: rgb(44, 110, 37);
}

[data-theme="Twilight Bloom"] {
    --text-or-stroke-color: rgb(245, 194, 255);
    --background-color: 123, 66, 129;
    --secondary-color: rgb(123, 103, 128);
    --linear-grad1: rgb(123, 66, 129);
}

[data-theme="Frosted Horizon"] {
    --text-or-stroke-color: #051230;
    --border-color: #051230;
    --background-color: 151, 172, 200;
    --secondary-color: #b6bfc1;
    --linear-grad1: #97acc8;
}

[data-theme="Sunset Marina"] {
    --text-or-stroke-color: #eeb480;
    --border-color: #eeb480;
    --background-color: 0, 91, 141;
    --secondary-color: #7c4226;
    --linear-grad1: #005b8d;
}

[data-theme="Skyline Mist"] {
    --text-or-stroke-color: #064f6e;
    --border-color: #064f6e;
    --background-color: 167, 212, 228;
    --secondary-color: #c2ae93;
    --linear-grad1: #a7d4e4;
}

[data-theme="Velvet Dusk"] {
    --text-or-stroke-color: #b0b4c4;
    --border-color: #b0b4c4;
    --background-color: 140, 76, 98;
    --secondary-color: #59256a;
    --linear-grad1: #8c4c62;
}

[data-theme="Meadow Breeze"] {
    --text-or-stroke-color: #333941;
    /* Original light blue too light */
    --border-color: #333941;
    --background-color: 150, 209, 170;
    --secondary-color: #8fa071;
    --linear-grad1: #96d1aa;
}

[data-theme="Golden Ember"] {
    --text-or-stroke-color: #111314;
    --border-color: #111314;
    --background-color: 235, 211, 162;
    --secondary-color: #d96629;
    --linear-grad1: #ebd3a2;
}

[data-theme="Seafoam Serenity"] {
    --text-or-stroke-color: #34454c;
    --border-color: #34454c;
    --background-color: 181, 222, 204;
    --secondary-color: #96d1aa;
    --linear-grad1: #b5decc;
}

[data-theme="Desert Mirage"] {
    --text-or-stroke-color: #111314;
    --border-color: #111314;
    --background-color: 180, 205, 194;
    --secondary-color: #a36752;
    --linear-grad1: #b4cdc2;
}

[data-theme="Golden Harvest"] {
    --text-or-stroke-color: #051230;
    --border-color: #051230;
    --background-color: 166, 161, 89;
    --secondary-color: #f68c50;
    --linear-grad1: #a6a159;
}

[data-theme="Stormy Harbor"] {
    --text-or-stroke-color: #005b8d;
    --border-color: #005b8d;
    --background-color: 112, 114, 124;
    --secondary-color: #b5b1d8;
    --linear-grad1: #70727c;
}

[data-theme="Charcoal Ember"] {
    --text-or-stroke-color: #111314;
    --border-color: #111314;
    --background-color: 182, 191, 193;
    --secondary-color: #a62c37;
    --linear-grad1: #b6bfc1;
}

[data-theme="Sunlit Blush"] {
    --text-or-stroke-color: #a62c37;
    --border-color: #a62c37;
    --background-color: 255, 239, 174;
    --secondary-color: #b6bfc1;
    --linear-grad1: #ffefae;
}

[data-theme="Autumn Fog"] {
    --text-or-stroke-color: #253122;
    --border-color: #253122;
    --background-color: 182, 191, 193;
    --secondary-color: #f3a257;
    --linear-grad1: #b6bfc1;
}