@font-face {
	font-family: "BetterFont";
	src: url("./Commissioner-Regular.woff2") format("woff2");
}

:root {
	--font: "BetterFont", "acumin-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--black: #000000;
	--red: #ff5555;
	--yellow: #ffc159;
	--green: #1c907b;
	--blue: #779bff;
	--grey: #b5b5b5;
	--update: var(--green);

	--code-keyword: yellow;
	--code-number: orange;
	--code-string: red;
	--code-comment: green;
	--code-class: #6741ff;
	--code-prop: #33dcff;
	--code-func: #d564ff;
}

/* TODO: still a copy of dark theme!
   Default theme that looks "just about grey" */
.no-theme {
	color-scheme: dark;
	--primary-button-bg: color-mix(in srgb, #777777 10%, var(--accent-color));
	--primary-bg: #303339;
	--primary-hover: #272b31;
	--primary-text: #dfdfdf;
	--primary-text-soft: #adb8b9;
	--secondary-bg: #16191b;
	--secondary-hover: #252b2c;
	--servers-bg: #151718;
	--channels-bg: #2a2d33;
	--channel-selected: #3c4046;
	--typebox-bg: #3a3e45;
	--button-bg: #4e5457;
	--button-hover: #6b7174;
	--spoiler-bg: #000000;
	--link: #5ca9ed;
	--primary-text-prominent: #efefef;
	--dock-bg: #1b1e20;
	--card-bg: #000000;
}

.WHITE-theme {
	color-scheme: light;

	--primary-button-bg: color-mix(in srgb, #000000 10%, var(--accent-color));
	--primary-bg: #fefefe;
	--primary-hover: #f6f6f9;
	--primary-text: black;
	--primary-text-soft: #656575;

	--secondary-bg: #e0e0ea;
	--secondary-hover: #d0d0dd;

	--servers-bg: #b4b4ca;
	--channels-bg: #eaeaf0;
	--channel-selected: #c7c7d9;
	--typebox-bg: #ededf4;

	--button-bg: #cacad8;
	--button-hover: #b3b3c4;
	--spoiler-bg: #dadada;
	--link: #056cd9;

	--black: #4b4b59;
	--green: #68d79d;
	--primary-text-prominent: #08080d;
	--secondary-text: #3c3c46;
	--secondary-text-soft: #4c4c5a;
	--dock-bg: #d1d1df;
	--dock-hover: #b8b8d0;

	--code-bg: #fdfdf4;
	--code-keyword: rgb(180, 180, 76);
	--code-number: rgb(161, 109, 12);
	--code-string: rgb(153, 4, 4);
	--code-comment: rgb(9, 116, 9);
	--code-class: #230a86;
	--code-prop: #027d96;
	--code-func: #6c0091;
}

.Light-theme {
	color-scheme: light;
	--primary-button-bg: white;
	--primary-bg: #aaafce;
	--primary-hover: #b1b6d4;
	--primary-text: #060415;
	--primary-text-soft: #424268;

	--secondary-bg: #9397bd;
	--secondary-hover: #9ea5cc;

	--servers-bg: #7a7aaa;
	--channels-bg: #babdd2;
	--channel-selected: #9c9fbf;
	--typebox-bg: #bac0df;

	--button-bg: #babdd2;
	--button-hover: #9c9fbf;
	--spoiler-bg: #c7c6e5;
	--link: #283c8b;

	--black: #434392;
	--red: #ca304d;
	--secondary-text-soft: #211f2e;
	--blank-bg: #494985;
}
.Dark-theme {
	color-scheme: dark;
	--primary-button-bg: color-mix(in srgb, #777777 10%, var(--accent-color));
	--primary-bg: #303339;
	--primary-hover: #272b31;
	--primary-text: #dfdfdf;
	--primary-text-soft: #adb8b9;
	--secondary-bg: #16191b;
	--secondary-hover: #252b2c;
	--servers-bg: #151718;
	--channels-bg: #2a2d33;
	--channel-selected: #3c4046;
	--typebox-bg: #3a3e45;
	--button-bg: #4e5457;
	--button-hover: #6b7174;
	--spoiler-bg: #000000;
	--link: #5ca9ed;
	--primary-text-prominent: #efefef;
	--dock-bg: #1b1e20;
	--card-bg: #000000;
}
.Dark-Accent-theme {
	color-scheme: dark;
	color-scheme: dark;
	--primary-button-bg: color-mix(in srgb, #777777 10%, var(--accent-color));
	--primary-bg: color-mix(in srgb, #3f3f3f 65%, var(--accent-color));
	--primary-hover: color-mix(in srgb, #373737 68%, var(--accent-color));
	--primary-text: #ebebeb;
	--primary-text-soft: #ebebebb8;
	--secondary-bg: color-mix(in srgb, #222222 72%, var(--accent-color));
	--secondary-hover: color-mix(in srgb, #222222 65%, var(--accent-color));
	--folder-bg: color-mix(in srgb, var(--primary-text-soft) 70%, var(--accent-color));
	--servers-bg: color-mix(in srgb, #0b0b0b 70%, var(--accent-color));
	--channels-bg: color-mix(in srgb, #292929 68%, var(--accent-color));
	--channel-selected: color-mix(in srgb, #555555 65%, var(--accent-color));
	--typebox-bg: color-mix(in srgb, #666666 60%, var(--accent-color));
	--button-bg: color-mix(in srgb, #777777 56%, var(--accent-color));
	--button-hover: color-mix(in srgb, #585858 58%, var(--accent-color));
	--spoiler: color-mix(in srgb, #101010 72%, var(--accent-color));
	--link: color-mix(in srgb, #99ccff 75%, var(--accent-color));
	--black: color-mix(in srgb, #000000 90%, var(--accent-color));
	--icon: color-mix(in srgb, #ffffff, var(--accent-color));
	--dock-bg: color-mix(in srgb, #171717 68%, var(--accent-color));
	--spoiler-hover: color-mix(in srgb, #111111 80%, var(--accent-color));
	--card-bg: color-mix(in srgb, #0b0b0b 70%, var(--accent-color));
	--spoiler-bg: #000000;
	--reaction-reacted-bg: color-mix(in srgb, var(--reaction-bg) 80%, white);
}
.NightSky-theme {
	color-scheme: dark;
	--primary-button-bg: color-mix(in srgb, #777777 10%, var(--accent-color));
	--primary-bg: #040404;
	--primary-hover: #18181b;
	--primary-text: #dfdfdf;
	--primary-text-soft: #adb8b9;
	--secondary-bg: #000000;
	--secondary-hover: #18181b;
	--servers-bg: #000000;
	--channels-bg: #0a0a0a;
	--channel-selected: #1f1f20;
	--typebox-bg: #101112;
	--button-bg: #19191a;
	--button-hover: #1f1f20;
	--spoiler-bg: #1f1f20;
	--link: #326be5;
	--primary-text-prominent: #efefef;
	--dock-bg: #000000;
	--card-bg: #000000;
	--embed-bg: #000000;
}
.NightSky-Accent-theme {
	color-scheme: dark;
	--primary-button-bg: color-mix(in srgb, #777777 20%, var(--accent-color));
	--primary-bg: color-mix(in srgb, #040404 95%, var(--accent-color));
	--primary-hover: color-mix(in srgb, #18181b 95%, var(--accent-color));
	--primary-text: #dfdfdf;
	--primary-text-soft: #adb8b9;
	--secondary-bg: color-mix(in srgb, #000000 95%, var(--accent-color));
	--secondary-hover: color-mix(in srgb, #18181b 95%, var(--accent-color));
	--folder-bg: color-mix(in srgb, var(--primary-text-soft) 95%, var(--accent-color));
	--servers-bg: color-mix(in srgb, #000000 95%, var(--accent-color));
	--channels-bg: color-mix(in srgb, #0a0a0a 95%, var(--accent-color));
	--channel-selected: color-mix(in srgb, #1f1f20 95%, var(--accent-color));
	--typebox-bg: color-mix(in srgb, #101112 95%, var(--accent-color));
	--button-bg: color-mix(in srgb, #19191a 95%, var(--accent-color));
	--button-hover: color-mix(in srgb, #1f1f20 95%, var(--accent-color));
	--spoiler: color-mix(in srgb, #101010 95%, var(--accent-color));
	--link: #326be5;
	--black: color-mix(in srgb, #000000 90%, var(--accent-color));
	--icon: color-mix(in srgb, #ffffff, var(--accent-color));
	--dock-bg: color-mix(in srgb, #000000 95%, var(--accent-color));
	--spoiler-hover: color-mix(in srgb, #111111 95%, var(--accent-color));
	--card-bg: color-mix(in srgb, #000000 95%, var(--accent-color));
	--spoiler-bg: #1f1f20;
	--reaction-reacted-bg: color-mix(in srgb, var(--reaction-bg) 95%, white);
	--primary-text-prominent: #efefef;
	--embed-bg: #000000;
}

/* Optional Variables */
body {
	--primary-text-prominent: var(--primary-text);
	--secondary-text: var(--primary-text);
	--secondary-text-soft: var(--primary-text-soft);
	--text-input-bg: var(--secondary-bg);
	--button-text: var(--primary-text);
	--button-disabled-text: color-mix(in srgb, var(--button-text), transparent);

	--icon: var(--accent-color);
	--focus: var(--accent-color);
	--shadow: color-mix(in srgb, var(--black) 30%, transparent);
	--scrollbar: var(--primary-text-soft);
	--scrollbar-track: var(--primary-hover);
	--folder-bg: var(--primary-text-soft);

	--blank-bg: var(--channels-bg);
	--divider: color-mix(in srgb, var(--primary-text), transparent);
	--channels-header-bg: var(--channels-bg);
	--channel-hover: color-mix(in srgb, var(--channel-selected) 60%, transparent);
	--dock-bg: var(--secondary-bg);
	--dock-hover: var(--secondary-hover);
	--user-info-bg: var(--dock-bg);
	--user-info-text: var(--secondary-text);

	--main-header-bg: transparent;
	--message-jump-bg: color-mix(in srgb, var(--accent-color) 20%, transparent);
	--code-bg: var(--secondary-bg);
	--code-text: var(--secondary-text);
	--spoiler-hover: color-mix(in srgb, var(--spoiler-bg), var(--primary-text-soft) 10%);
	--spoiler-unspoiled: color-mix(in srgb, var(--primary-text-soft) 15%, var(--primary-bg));
	--quote-line: color-mix(in srgb, var(--primary-text-soft), transparent);
	--reply-line: color-mix(in srgb, var(--primary-text-soft) 20%, transparent);
	--reply-text: var(--primary-text-soft);
	--reply-highlight: var(--accent-color);
	--mention: color-mix(in srgb, var(--accent-color) 80%, transparent);
	--mention-highlight: var(--yellow);
	--reaction-bg: var(--secondary-bg);
	--reaction-reacted-bg: var(--secondary-hover);
	--filename: var(--link);
	--embed-bg: var(--secondary-bg);

	--sidebar-bg: var(--channels-bg);
	--sidebar-hover: var(--channel-hover);
	--card-bg: var(--primary-bg);
	--role-bg: var(--primary-bg);
	--role-text: var(--primary-text);
	--settings-bg: var(--primary-bg);
	--settings-header-bg: var(--main-header-bg);
	--settings-panel-bg: var(--channels-bg);
	--settings-panel-selected: var(--channel-selected);
	--settings-panel-hover: color-mix(in srgb, var(--settings-panel-selected), transparent);
	--loading-bg: var(--secondary-bg);
	--loading-text: var(--secondary-text);
	--embed-bg-side: color-mix(in srgb, var(--embed-bg), black);
}
