.light-properties {
	--surface-1: #ebebeb;
	--surface-2: #f5f5f5;
	--surface-3: #f8f8f8;
	--surface-4: #ffffff;
	--surface-5: #e6e6e6;

	--color-red-50: #fef2f2;
	--color-red-100: #fee5e7;
	--color-red-200: #fccfd3;
	--color-red-300: #faa7b1;
	--color-red-400: #f67687;
	--color-red-500: #ed4661;
	--color-red-600: #cb2245;
	--color-red-700: #b7193d;
	--color-red-800: #9a1739;
	--color-red-900: #841738;
	--color-red-950: #490819;
	--color-red: var(--color-red-600);

	--color-orange-50: #fdf8ed;
	--color-orange-100: #f9eacc;
	--color-orange-200: #f2d495;
	--color-orange-300: #ecb85d;
	--color-orange-400: #e7a038;
	--color-orange-500: #e08325;
	--color-orange-600: #c66019;
	--color-orange-700: #a44419;
	--color-orange-800: #86351a;
	--color-orange-900: #6e2d19;
	--color-orange-950: #3f1509;
	--color-orange: var(--color-orange-500);

	--color-green-50: #eefff6;
	--color-green-100: #d7ffeb;
	--color-green-200: #b2ffd9;
	--color-green-300: #76ffbc;
	--color-green-400: #33f598;
	--color-green-500: #09de78;
	--color-green-600: #00af5c;
	--color-green-700: #04914f;
	--color-green-800: #0a7141;
	--color-green-900: #0a5d38;
	--color-green-950: #00341d;
	--color-green: var(--color-green-600);

	--color-blue-50: #f2f7fd;
	--color-blue-100: #e4ecfa;
	--color-blue-200: #c3d9f4;
	--color-blue-300: #8ebaeb;
	--color-blue-400: #5196df;
	--color-blue-500: #2b79cc;
	--color-blue-600: #1f68c0;
	--color-blue-700: #184b8c;
	--color-blue-800: #184174;
	--color-blue-900: #193861;
	--color-blue-950: #112340;
	--color-blue: var(--color-blue-600);

	--color-purple-50: #faf5ff;
	--color-purple-100: #f2e7ff;
	--color-purple-200: #e7d3ff;
	--color-purple-300: #d4b1ff;
	--color-purple-400: #ba7eff;
	--color-purple-500: #9f4dff;
	--color-purple-600: #8e32f3;
	--color-purple-700: #761ad6;
	--color-purple-800: #651bae;
	--color-purple-900: #53178c;
	--color-purple-950: #370368;
	--color-purple: var(--color-purple-600);

	--color-gray-50: #f5f5f6;
	--color-gray-100: #e5e5e8;
	--color-gray-200: #cecfd3;
	--color-gray-300: #adb0b3;
	--color-gray-400: #83868d;
	--color-gray-500: #686a72;
	--color-gray-600: #595b61;
	--color-gray-700: #4c4e52;
	--color-gray-800: #434447;
	--color-gray-900: #3b3b3e;
	--color-gray-950: #252627;
	--color-gray: var(--color-gray-600);

	--color-text-primary: #1a202c;
	--color-text-default: #2c2e31;
	--color-text-tertiary: #484d54;

	// ===

	--color-bg: var(--surface-1);
	--color-raised-bg: var(--surface-3);
	--color-super-raised-bg: var(--surface-4);

	--color-button-bg: var(--surface-4);
	--color-button-border: rgba(161, 161, 161, 0.35);
	--color-scrollbar: #96a2b0;

	--color-divider: var(--surface-2);
	--color-divider-dark: #c8cdd3;

	--color-base: var(--color-text-default);
	--color-secondary: var(--color-text-tertiary);
	--color-contrast: var(--color-text-primary);
	--color-accent-contrast: #ffffff;

	--color-red-highlight: rgba(203, 34, 69, 0.25);
	--color-orange-highlight: rgba(224, 131, 37, 0.25);
	--color-green-highlight: rgba(0, 175, 92, 0.25);
	--color-blue-highlight: rgba(31, 104, 192, 0.25);
	--color-purple-highlight: rgba(142, 50, 243, 0.25);
	--color-gray-highlight: rgba(89, 91, 97, 0.25);

	--color-red-bg: rgba(203, 34, 69, 0.1);
	--color-orange-bg: rgba(224, 131, 37, 0.1);
	--color-green-bg: rgba(0, 175, 92, 0.1);
	--color-blue-bg: rgba(31, 104, 192, 0.1);
	--color-purple-bg: rgba(142, 50, 243, 0.1);

	--color-brand: var(--color-green);
	--color-brand-highlight: var(--color-green-highlight);
	--color-brand-shadow: rgba(0, 175, 92, 0.7);

	--shadow-inset-lg: inset 0px -2px 2px hsla(221, 39%, 91%, 0.1);
	--shadow-inset: inset 0px -2px 2px hsla(221, 39%, 91%, 0.05);
	--shadow-inset-sm: inset 0px -1px 2px hsla(221, 39%, 91%, 0.15);

	--shadow-raised-lg: 0px 2px 4px hsla(221, 39%, 11%, 0.2);
	--shadow-raised: 0.3px 0.5px 0.6px hsl(var(--shadow-color) / 0.15),
		1px 2px 2.2px -1.7px hsl(var(--shadow-color) / 0.12),
		4.4px 8.8px 9.7px -3.4px hsl(var(--shadow-color) / 0.09);
	--shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
		hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, hsla(0, 0%, 0%, 0.1) 0px 2px 4px -1px;

	--shadow-card: rgba(50, 50, 100, 0.1) 0px 2px 4px 0px;

	--brand-gradient-bg: linear-gradient(
		0deg,
		rgba(68, 182, 138, 0.175) 0%,
		rgba(58, 250, 112, 0.125) 100%
	);
	--brand-gradient-strong-bg: linear-gradient(
		270deg,
		rgba(68, 182, 138, 0.175) 0%,
		rgba(36, 225, 91, 0.12) 100%
	);
	--brand-gradient-button: rgba(255, 255, 255, 0.5);
	--brand-gradient-border: rgba(32, 64, 32, 0.15);
	--brand-gradient-fade-out-color: linear-gradient(to bottom, rgba(213, 235, 224, 0), #d0ece0 70%);

	--color-button-bg-selected: var(--color-brand);
	--color-button-text-selected: var(--color-accent-contrast);

	--color-gradient-button-bg: linear-gradient(180deg, #f8f9fa 0%, #dce0e6 100%);

	--loading-bar-gradient: linear-gradient(to right, var(--color-brand) 0%, #00af5c 100%);

	--color-platform-fabric: #8a7b71;
	--color-platform-quilt: #8b61b4;
	--color-platform-forge: #5b6197;
	--color-platform-neoforge: #dc895c;
	--color-platform-liteloader: #4c90de;
	--color-platform-bukkit: #e78362;
	--color-platform-bungeecord: #c69e39;
	--color-platform-folia: #6aa54f;
	--color-platform-paper: #e67e7e;
	--color-platform-purpur: #7763a3;
	--color-platform-spigot: #cd7a21;
	--color-platform-velocity: #4b98b0;
	--color-platform-waterfall: #5f83cb;
	--color-platform-sponge: #c49528;
	--color-platform-ornithe: #6097ca;
	--color-platform-bta-babric: #5ba938;
	--color-platform-legacy-fabric: #6879f6;
	--color-platform-nilloader: #dd5088;

	--hover-brightness: 0.9;
}

html {
	@extend .light-properties;
	--dark-color-base: #b0bac5;
	--dark-color-contrast: #ecf9fb;

	--gap-xs: 0.25rem;
	--gap-sm: 0.5rem;
	--gap-md: 0.75rem;
	--gap-lg: 1rem;
	--gap-xl: 1.5rem;

	--radius-xs: 0.25rem;
	--radius-sm: 0.5rem;
	--radius-md: 0.75rem;
	--radius-lg: 1rem;
	--radius-xl: 1.25rem;
	--radius-max: 999999999px;

	--color-tooltip-text: var(--dark-color-contrast);
	--color-tooltip-bg: #000;

	--color-ad: rgba(125, 75, 162, 0.2);
	--color-ad-raised: rgba(190, 140, 243, 0.5);
	--color-ad-contrast: black;
	--color-ad-highlight: var(--color-purple);

	--color-link: var(--color-blue) !important;
	--color-link-hover: var(--color-blue) !important; // DEPRECATED, use filters in future
	--color-link-active: var(--color-blue) !important; // DEPRECATED, use filters in future
}

.light-mode,
.light {
	@extend .light-properties;
}

.dark-mode,
.dark,
:root[data-theme='dark'] {
	--surface-1: #16181c;
	--surface-2: #1d1f23;
	--surface-3: #27292e;
	--surface-4: #34363c;
	--surface-5: #42444a;

	--color-red-50: #fff0f1;
	--color-red-100: #ffe2e6;
	--color-red-200: #ffcad3;
	--color-red-300: #ff9fae;
	--color-red-400: #ff6984;
	--color-red-500: #ff496e;
	--color-red-600: #ed1148;
	--color-red-700: #c8083d;
	--color-red-800: #a8093a;
	--color-red-900: #8f0c38;
	--color-red-950: #50011a;
	--color-red: var(--color-red-500);

	--color-orange-50: #fff8ed;
	--color-orange-100: #ffefd4;
	--color-orange-200: #ffdba8;
	--color-orange-300: #ffc171;
	--color-orange-400: #ffa347;
	--color-orange-500: #fe7e11;
	--color-orange-600: #ef6307;
	--color-orange-700: #c64808;
	--color-orange-800: #9d3a0f;
	--color-orange-900: #7e3110;
	--color-orange-950: #441606;
	--color-orange: var(--color-orange-400);

	--color-green-50: #effef5;
	--color-green-100: #dafee8;
	--color-green-200: #b8fad2;
	--color-green-300: #81f4af;
	--color-green-400: #42e686;
	--color-green-500: #1bd96a;
	--color-green-600: #0faa4f;
	--color-green-700: #0f8642;
	--color-green-800: #126937;
	--color-green-900: #11562f;
	--color-green-950: #033018;
	--color-green: var(--color-green-500);

	--color-blue-50: #eef6ff;
	--color-blue-100: #daeaff;
	--color-blue-200: #bddaff;
	--color-blue-300: #90c4ff;
	--color-blue-400: #4f9cff;
	--color-blue-500: #357ffc;
	--color-blue-600: #1f5ff1;
	--color-blue-700: #1749de;
	--color-blue-800: #193cb4;
	--color-blue-900: #1a378e;
	--color-blue-950: #152356;
	--color-blue: var(--color-blue-400);

	--color-purple-50: #faf5ff;
	--color-purple-100: #f4e7ff;
	--color-purple-200: #ead4ff;
	--color-purple-300: #dab2ff;
	--color-purple-400: #c78aff;
	--color-purple-500: #ac51fb;
	--color-purple-600: #972eef;
	--color-purple-700: #821ed2;
	--color-purple-800: #6e1eab;
	--color-purple-900: #5a198a;
	--color-purple-950: #3d0566;
	--color-purple: var(--color-purple-400);

	--color-gray-50: #f5f7f8;
	--color-gray-100: #edeff2;
	--color-gray-200: #dfe2e6;
	--color-gray-300: #cad0d7;
	--color-gray-400: #b4bac5;
	--color-gray-500: #9fa4b3;
	--color-gray-600: #8a8da1;
	--color-gray-700: #777b8b;
	--color-gray-800: #616472;
	--color-gray-900: #52555d;
	--color-gray-950: #303136;
	--color-gray: var(--color-gray-500);

	--color-text-primary: #ffffff;
	--color-text-default: #b0bac5;
	--color-text-tertiary: #80878f;

	// ===

	--color-bg: var(--surface-1);
	--color-raised-bg: var(--surface-3);
	--color-super-raised-bg: var(--surface-4);

	--color-button-bg: var(--surface-4);
	--color-button-border: rgba(193, 190, 209, 0.12);
	--color-scrollbar: var(--color-button-bg);

	--color-divider: var(--color-button-bg);
	--color-divider-dark: #646c75;

	--color-base: var(--color-text-default);
	--color-secondary: var(--color-text-tertiary);
	--color-contrast: var(--color-text-primary);
	--color-accent-contrast: #000000;

	--color-red-highlight: rgba(255, 73, 110, 0.25);
	--color-orange-highlight: rgba(255, 163, 71, 0.25);
	--color-green-highlight: rgba(27, 217, 106, 0.25);
	--color-blue-highlight: rgba(79, 156, 255, 0.25);
	--color-purple-highlight: rgba(199, 138, 255, 0.25);
	--color-gray-highlight: rgba(159, 164, 179, 0.25);

	--color-red-bg: rgba(255, 73, 110, 0.2);
	--color-orange-bg: rgba(255, 163, 71, 0.2);
	--color-green-bg: rgba(27, 217, 106, 0.2);
	--color-blue-bg: rgba(79, 156, 255, 0.2);
	--color-purple-bg: rgba(199, 138, 255, 0.2);

	--color-brand: var(--color-green);
	--color-brand-highlight: rgba(27, 217, 106, 0.25);
	--color-brand-shadow: rgba(27, 217, 106, 0.7);

	--shadow-inset-lg: inset 0px -2px 2px hsla(221, 39%, 11%, 0.1);
	--shadow-inset: inset 0px -2px 2px hsla(221, 39%, 11%, 0.05);
	--shadow-inset-sm: inset 0px -1px 1px hsla(221, 39%, 11%, 0.25);

	--shadow-raised-lg: 0px 2px 4px hsla(221, 39%, 11%, 0.2);
	--shadow-raised: 0px -2px 4px hsla(221, 39%, 11%, 0.1);
	--shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
		hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;

	--shadow-card: rgba(0, 0, 0, 0.25) 0px 2px 4px 0px;

	--brand-gradient-bg: linear-gradient(0deg, rgba(14, 35, 19, 0.2) 0%, rgba(55, 137, 73, 0.1) 100%);
	--brand-gradient-strong-bg: linear-gradient(270deg, #09110d 10%, #131f17 100%);
	--brand-gradient-button: rgba(255, 255, 255, 0.08);
	--brand-gradient-border: rgba(155, 255, 160, 0.08);
	--brand-gradient-fade-out-color: linear-gradient(to bottom, rgba(24, 30, 31, 0), #171d1e 80%);

	--color-button-bg-selected: var(--color-brand-highlight);
	--color-button-text-selected: var(--color-brand);

	--color-gradient-button-bg: linear-gradient(180deg, #3a3d47 0%, #33363d 100%);

	--loading-bar-gradient: linear-gradient(to right, var(--color-brand) 0%, #1ffa9a 100%);

	--color-platform-fabric: #dbb69b;
	--color-platform-quilt: #c796f9;
	--color-platform-forge: #959eef;
	--color-platform-neoforge: #f99e6b;
	--color-platform-liteloader: #7ab0ee;
	--color-platform-bukkit: #f6af7b;
	--color-platform-bungeecord: #d2c080;
	--color-platform-folia: #a5e388;
	--color-platform-paper: #eeaaaa;
	--color-platform-purpur: #c3abf7;
	--color-platform-spigot: #f1cc84;
	--color-platform-velocity: #83d5ef;
	--color-platform-waterfall: #78a4fb;
	--color-platform-sponge: #f9e580;
	--color-platform-ornithe: #87c7ff;
	--color-platform-bta-babric: #72cc4a;
	--color-platform-legacy-fabric: #6879f6;
	--color-platform-nilloader: #f45e9a;

	--hover-brightness: 1.25;
}

.oled-mode {
	@extend .dark-mode;
	--surface-1: #000000;
	--surface-2: #101013;
	--surface-3: #1b1b20;
	--surface-4: #25262b;
	--surface-5: #2e2f34;

	--color-ad: #0d1828;

	--brand-gradient-bg: linear-gradient(
		0deg,
		rgba(22, 66, 51, 0.15) 0%,
		rgba(55, 137, 73, 0.1) 100%
	);
	--brand-gradient-strong-bg: linear-gradient(
		270deg,
		rgba(9, 18, 14, 0.6) 10%,
		rgba(19, 31, 23, 0.5) 100%
	);

	--color-gradient-button-bg: linear-gradient(180deg, #1b1b20 0%, #25262b 100%);
}

.retro-mode {
	--brand-gradient-strong-bg: #3a3b38;
}