@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

body.dark {
    --universalRoundedCorners: 10px;
    --universalFont: 'Rubik', sans-serif;
    --universalFont2: 'Poppins', sans-serif;
    --navBackground: #111111;
    --background: #161616;
    --accentColor: #da2626;
    --accentTextColor: #ffffff;
    --navButtonSelected: #ffffff;
    --navLabel: #c9c9c9;
    --navButtonUnselected: #414141;
    --segmentedControlBorder: #414141;
    --segmentedControlSelected: #414141;
    --tableBorder: #292929;
    --primaryLabel: #c9c9c9;
    --secondary2Label: #8f8f8f;
    --secondaryLabel: #646464;
    --buttonDisabled: #414141;
    --dropdownAnimationSpeed: 250ms;
    --skeletonBackground: #111111;
    --skeletonHighlight: #161616;
    --toastBackground: #0e0e0e;
    --ticketBackgroundRed: #835c5c;
    --ticketBackgroundGreen: #5e8958;
    --ticketBackgroundYellow: #898658;
    --red: #b20000;
    --orange: #ffa500;
    --yellow: #ffff00;
    --green: #008000;
    --lime: #00ff00;
    --blue: #0000ff;
}

body.sunset {
    --universalRoundedCorners: 10px;
    --universalFont: 'Rubik', sans-serif;
    --universalFont2: 'Poppins', sans-serif;
    --navBackground: #1b120e;
    --background: #2a1714;
    --accentColor: #ff8f5a;
    --accentTextColor: #fff7f2;
    --navButtonSelected: #ffe3d1;
    --navLabel: #f4d7c6;
    --navButtonUnselected: #5e3f35;
    --segmentedControlBorder: #7d5648;
    --segmentedControlSelected: #9a4b35;
    --tableBorder: #472b27;
    --primaryLabel: #fff1ea;
    --secondary2Label: #e7b49b;
    --secondaryLabel: #c98c77;
    --buttonDisabled: #5e3f35;
    --dropdownAnimationSpeed: 250ms;
    --skeletonBackground: #1b120e;
    --skeletonHighlight: #311d1a;
    --toastBackground: #180d0a;
    --ticketBackgroundRed: #a86868;
    --ticketBackgroundGreen: #5d8763;
    --ticketBackgroundYellow: #b9954c;
    --red: #ff5f5f;
    --orange: #ff8f5a;
    --yellow: #ffd166;
    --green: #62c68e;
    --lime: #d4f88d;
    --blue: #67a9ff;
}

body.ocean {
    --universalRoundedCorners: 10px;
    --universalFont: 'Rubik', sans-serif;
    --universalFont2: 'Poppins', sans-serif;
    --navBackground: #071d29;
    --background: #0d2635;
    --accentColor: #5ad2f0;
    --accentTextColor: #061a22;
    --navButtonSelected: #ebffff;
    --navLabel: #cfeaf8;
    --navButtonUnselected: #35576e;
    --segmentedControlBorder: #456d88;
    --segmentedControlSelected: #1f6d8d;
    --tableBorder: #1b3d52;
    --primaryLabel: #ebf9ff;
    --secondary2Label: #9fc9dd;
    --secondaryLabel: #7ea8be;
    --buttonDisabled: #35576e;
    --dropdownAnimationSpeed: 250ms;
    --skeletonBackground: #071d29;
    --skeletonHighlight: #133449;
    --toastBackground: #071922;
    --ticketBackgroundRed: #8c627e;
    --ticketBackgroundGreen: #4d8b7d;
    --ticketBackgroundYellow: #b79b56;
    --red: #ff728a;
    --orange: #ff9d64;
    --yellow: #ffd166;
    --green: #4fd1c1;
    --lime: #9bf4d7;
    --blue: #65a8ff;
}

body.violet {
    --universalRoundedCorners: 10px;
    --universalFont: 'Rubik', sans-serif;
    --universalFont2: 'Poppins', sans-serif;
    --navBackground: #180f2a;
    --background: #201536;
    --accentColor: #bd86ff;
    --accentTextColor: #f4ebff;
    --navButtonSelected: #f3ebff;
    --navLabel: #e0d5ff;
    --navButtonUnselected: #483a65;
    --segmentedControlBorder: #665383;
    --segmentedControlSelected: #7146c8;
    --tableBorder: #36294b;
    --primaryLabel: #f7f2ff;
    --secondary2Label: #d7c4ff;
    --secondaryLabel: #b69de4;
    --buttonDisabled: #483a65;
    --dropdownAnimationSpeed: 250ms;
    --skeletonBackground: #180f2a;
    --skeletonHighlight: #2d1f43;
    --toastBackground: #130d21;
    --ticketBackgroundRed: #9d5c77;
    --ticketBackgroundGreen: #5b8d7d;
    --ticketBackgroundYellow: #a48f52;
    --red: #ff7b9d;
    --orange: #ff9e6d;
    --yellow: #f7d56b;
    --green: #78e0b7;
    --lime: #c6ffca;
    --blue: #7db8ff;
}

body.emerald {
    --universalRoundedCorners: 10px;
    --universalFont: 'Rubik', sans-serif;
    --universalFont2: 'Poppins', sans-serif;
    --navBackground: #0d1d18;
    --background: #12281f;
    --accentColor: #47d3a0;
    --accentTextColor: #06150f;
    --navButtonSelected: #e8fff5;
    --navLabel: #c5e8d6;
    --navButtonUnselected: #2f5d55;
    --segmentedControlBorder: #447163;
    --segmentedControlSelected: #147d5a;
    --tableBorder: #1e3d33;
    --primaryLabel: #edfff8;
    --secondary2Label: #9ed5c0;
    --secondaryLabel: #7ab7a0;
    --buttonDisabled: #2f5d55;
    --dropdownAnimationSpeed: 250ms;
    --skeletonBackground: #0d1d18;
    --skeletonHighlight: #14382f;
    --toastBackground: #0a1713;
    --ticketBackgroundRed: #8d615f;
    --ticketBackgroundGreen: #5fb07c;
    --ticketBackgroundYellow: #a79652;
    --red: #ff7a83;
    --orange: #ffb45b;
    --yellow: #f1d97b;
    --green: #4ade9d;
    --lime: #b0f9c2;
    --blue: #5da9ff;
}

body.midnight {
    --universalRoundedCorners: 10px;
    --universalFont: 'Rubik', sans-serif;
    --universalFont2: 'Poppins', sans-serif;
    --navBackground: #101827;
    --background: #172131;
    --accentColor: #8ec5ff;
    --accentTextColor: #08131f;
    --navButtonSelected: #edf6ff;
    --navLabel: #d3def4;
    --navButtonUnselected: #41556f;
    --segmentedControlBorder: #526985;
    --segmentedControlSelected: #2d5b8c;
    --tableBorder: #24344d;
    --primaryLabel: #edf5ff;
    --secondary2Label: #acbddb;
    --secondaryLabel: #8295b5;
    --buttonDisabled: #41556f;
    --dropdownAnimationSpeed: 250ms;
    --skeletonBackground: #101827;
    --skeletonHighlight: #1b2a3e;
    --toastBackground: #09111d;
    --ticketBackgroundRed: #8a6778;
    --ticketBackgroundGreen: #5f8d7b;
    --ticketBackgroundYellow: #a48d5d;
    --red: #ff6e8b;
    --orange: #ffb266;
    --yellow: #ffe082;
    --green: #74d8b4;
    --lime: #b8f7d6;
    --blue: #79a9ff;
}

body.crimson {
    --universalRoundedCorners: 10px;
    --universalFont: 'Rubik', sans-serif;
    --universalFont2: 'Poppins', sans-serif;
    --navBackground: #18080d;
    --background: #220d13;
    --accentColor: #ff4d6d;
    --accentTextColor: #fff5f7;
    --navButtonSelected: #ffe5ea;
    --navLabel: #ffd1db;
    --navButtonUnselected: #5f2a39;
    --segmentedControlBorder: #7f3a4d;
    --segmentedControlSelected: #b8264d;
    --tableBorder: #3a1a22;
    --primaryLabel: #fff4f7;
    --secondary2Label: #f8a9b9;
    --secondaryLabel: #d97d92;
    --buttonDisabled: #5f2a39;
    --dropdownAnimationSpeed: 250ms;
    --skeletonBackground: #18080d;
    --skeletonHighlight: #30131d;
    --toastBackground: #11070b;
    --ticketBackgroundRed: #9c495d;
    --ticketBackgroundGreen: #5f8d63;
    --ticketBackgroundYellow: #b59352;
    --red: #ff5a5f;
    --orange: #ff8c69;
    --yellow: #ffd166;
    --green: #5ad1a0;
    --lime: #b7ff8f;
    --blue: #66a7ff;
}