@property --hue {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

@keyframes rgb-cycle {
    from {--hue: 0;}
    to {--hue: 360;}
}

@keyframes bg-cycle {
    0%   { --bg-color: #30DDE4; --bg-alt-color: #23cad0; --control-hover-color: #989796;}
    25%  { --bg-color: #EDEBE4; --bg-alt-color: #e1dfd8; --control-hover-color: #E0211F;}
    50%  { --bg-color: #F9E700; --bg-alt-color: #F2CC03; --control-hover-color: #989796;}
    75%  { --bg-color: #FAB106; --bg-alt-color: #F19303; --control-hover-color: #989796;}
}

:root {
    --font-sans: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --font-serif: "EB Garamond", serif;

    --font-ui: var(--font-sans);
    --font-display: var(--font-serif);

    --bg-color: #f8f4ef;
    --bg-alt-color: #f1ebe3;
    --accent-color: #C5B4E2;
    --text-color: #2f241c;
    --sub-color: #6b625a;
}

body.theme-aguila {
    --bg-color: #DED9CF;
    --bg-alt-color: #FFFFFF;
    --accent-color: #BA8C2D;
    --text-color: #262626;
    --sub-color: #BA8C2D;
}

body.theme-calm {
    --bg-color: #F0E1C8;
    --bg-alt-color: #e3d5bc;
    --accent-color: #B48126;
    --text-color: #382C21;
    --sub-color: #847E78;
}

body.theme-cheesecake {
    --bg-color: #FDF0D5;
    --bg-alt-color: #F3E2BF;
    --accent-color: #8E2949;
    --text-color: #D91C81;
    --sub-color: #3A3335;

    --hero-color: var(--sub-color);
    --sub-alt-color: var(--text-color);
}

body.theme-frozen-llama {
    --bg-color: #9BF2EA;
    --bg-alt-color: #80E6DE;
    --accent-color: #6D44A5;
    --text-color: #B690FD;
    --sub-color: #FFFFFF;

    --hero-color: var(--sub-color);
    --sub-alt-color: var(--text-color);
}

body.theme-laser {
    --bg-color: #221B43;
    --bg-alt-color: #1E173B;
    --accent-color: #019EAE;
    --text-color: #B82355;
    --sub-color: #DBE7E8;

    --hero-color: var(--sub-color);
    --sub-alt-color: var(--text-color);
}

body.theme-lavender {
    --bg-color: #ADA6C2;
    --bg-alt-color: #A19BB9;
    --accent-color: #E4E3E8;
    --text-color: #E4E3E8;
    --sub-color: #2F2A41;

    --hero-color: var(--sub-color);
    --sub-alt-color: var(--text-color);
}

body.theme-muted {
    --bg-color: #525252;
    --bg-alt-color: #494949;
    --accent-color: #C5B4E2;
    --text-color: #939EAD;
    --sub-color: #B1E3E3;

    --hero-color: var(--sub-color);
    --sub-alt-color: var(--text-color);
}

body.theme-nebula {
    --bg-color: #212135;
    --bg-alt-color: #191928;
    --accent-color: #BF3C87;
    --text-color: #1BB3B8;
    --sub-color: #828686;

    --hero-color: var(--sub-color);
    --sub-alt-color: var(--text-color);
}

body.theme-olivia {
    --bg-color: #1C1B1D;
    --bg-alt-color: #262223;
    --accent-color: #DEAF9D;
    --text-color: #4D3E3E;
    --sub-color: #F2EFED;

    --hero-color: var(--sub-color);
    --sub-alt-color: var(--text-color);
}

body.theme-paper {
    --bg-color: #EEEEEE;
    --bg-alt-color: #DDDDDD;
    --accent-color: #444444;
    --text-color: #B2B2B2;
    --sub-color: #444444;

    --hero-color: var(--sub-color);
    --sub-alt-color: var(--text-color);
}

body.theme-pastel {
    --bg-color: #E0B2BD;
    --bg-alt-color: #D29FAB;
    --accent-color: #FBF4B6;
    --text-color: #B4E8FF;
    --sub-color: #6D5C6F;

    --hero-color: var(--sub-color);
    --sub-alt-color: var(--text-color);
}

body.theme-quiet {
    --bg-color: #4A4A4D;
    --bg-alt-color: #3e3e41;
    --accent-color: #009DDD;
    --text-color: #EBEBF5;
    --sub-color: #A7A7AF;
}

body.theme-rgb {
    --hue: 0;
    animation: rgb-cycle 8s linear infinite;
    --bg-color: #111111;
    --bg-alt-color: #1A1A1A;
    --accent-color: hsl(var(--hue), 100%, 60%);
    --text-color: #444444;
    --sub-color: #EEEEEE;

    --hero-color: var(--sub-color);
    --sub-alt-color: var(--accent-color);
    --bottom-bar-hover-color: var(--accent-color);
}

body.theme-sagada-cellar-door {
    animation: bg-cycle 180s ease-in-out infinite;
    --bg-color: #30DDE4;
    --bg-alt-color: #23cad0;
    --accent-color: #FFFFFF;
    --text-color: #1C222A;
    --sub-color: #989796;

    --theme-color: var(--text-color);
    --theme-bg-hover-color: var(--text-color);
    --theme-hover-color: var(--sub-color);
    --theme-active-bg-color: var(--text-color);
    --theme-active-color: var(--sub-color);
}

body.theme-trackspec {
    --bg-color: #FFFFFF;
    --bg-alt-color: #fafafa;
    --accent-color: #EB0028;
    --text-color: #2E2925;
    --sub-color: #A3A9AC;
}

body.theme-trackspec-dark {
    --bg-color: #2E2925;
    --bg-alt-color: #3a342f;
    --accent-color: #EB0028;
    --text-color: #FFFFFF;
    --sub-color: #A3A9AC;
}

body.theme-ube {
    --bg-color: #B3BAFF;
    --bg-alt-color: #A3A7DF;
    --accent-color: #130F1A;
    --text-color: #706C91;
    --sub-color: #130F1A;

    --hero-color: var(--sub-color);
    --sub-alt-color: var(--text-color);
}

.theme-option[data-theme="aguila"] {
    --swatch-bg-color: #DED9CF;
    --swatch-accent-color: #BA8C2D;
    --swatch-text-color: #262626;
    --swatch-sub-color: #BA8C2D;
}

.theme-option[data-theme="calm"] {
    --swatch-bg-color: #F1E1C7;
    --swatch-accent-color: #B48126;
    --swatch-text-color: #382C21;
    --swatch-sub-color: #847E78;
}

.theme-option[data-theme="cheesecake"] {
    --swatch-bg-color: #FDF0D5;
    --swatch-accent-color: #8E2949;
    --swatch-text-color: #D91C81;
    --swatch-sub-color: #3A3335;
}

.theme-option[data-theme="frozen-llama"] {
    --swatch-bg-color: #9BF2EA;
    --swatch-accent-color: #6D44A5;
    --swatch-text-color: #B690FD;
    --swatch-sub-color: #FFFFFF;
}

.theme-option[data-theme="laser"] {
    --swatch-bg-color: #221B43;
    --swatch-accent-color: #019EAE;
    --swatch-text-color: #B82355;
    --swatch-sub-color: #DBE7E8;
}

.theme-option[data-theme="lavender"] {
    --swatch-bg-color: #ADA6C2;
    --swatch-accent-color: #E4E3E8;
    --swatch-text-color: #E4E3E8;
    --swatch-sub-color: #2F2A41;
}

.theme-option[data-theme="muted"] {
    --swatch-bg-color: #525252;
    --swatch-accent-color: #C5B4E2;
    --swatch-text-color: #939EAD;
    --swatch-sub-color: #B1E3E3;
}

.theme-option[data-theme="nebula"] {
    --swatch-bg-color: #212135;
    --swatch-accent-color: #BF3C87;
    --swatch-text-color: #1BB3B8;
    --swatch-sub-color: #828686;
}

.theme-option[data-theme="olivia"] {
    --swatch-bg-color: #1C1B1D;
    --swatch-accent-color: #DEAF9D;
    --swatch-text-color: #4D3E3E;
    --swatch-sub-color: #F2EFED;
}

.theme-option[data-theme="paper"] {
    --swatch-bg-color: #EEEEEE;
    --swatch-accent-color: #444444;
    --swatch-text-color: #B2B2B2;
    --swatch-sub-color: #444444;
}

.theme-option[data-theme="pastel"] {
    --swatch-bg-color: #E0B2BD;
    --swatch-accent-color: #FBF4B6;
    --swatch-text-color: #B4E8FF;
    --swatch-sub-color: #6D5C6F;
}

.theme-option[data-theme="quiet"] {
    --swatch-bg-color: #4A4A4D;
    --swatch-accent-color: #009DDD;
    --swatch-text-color: #EBEBF5;
    --swatch-sub-color: #A7A7AF;
}

.theme-option[data-theme="rgb"] {
    --swatch-bg-color: #111111;
    --swatch-accent-color: #FFFFFF;
    --swatch-text-color: #444444;
    --swatch-sub-color: #EEEEEE;
}

.theme-option[data-theme="sagada-cellar-door"] {
    --swatch-bg-color: #30DDE4;
    --swatch-accent-color: #FFFFFF;
    --swatch-text-color: #1C222A;
    --swatch-sub-color: #989796;
}

.theme-option[data-theme="trackspec"] {
    --swatch-bg-color: #FFFFFF;
    --swatch-accent-color: #EB0028;
    --swatch-text-color: #2E2925;
    --swatch-sub-color: #A3A9AC;
}

.theme-option[data-theme="trackspec-dark"] {
    --swatch-bg-color: #2E2925;
    --swatch-accent-color: #EB0028;
    --swatch-text-color: #FFFFFF;
    --swatch-sub-color: #A3A9AC;
}

.theme-option[data-theme="ube"] {
    --swatch-bg-color: #B3BAFF;
    --swatch-accent-color: #130F1A;
    --swatch-text-color: #706C91;
    --swatch-sub-color: #130F1A;
}