@import url('https://fonts.googleapis.com/css2?family=Fascinate&display=swap');
@import url('https://fonts.googleapis.com/css2?family=TASA+Explorer:wght@400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

:root {
	--bg-color: #f2f2f2;
	--bg-color-2: #e5e5e5;
	--fg-color: #1a202c;
	--fg-hover: #5a607c;
	--fg-link: #3b415d;
	--fg-subtle: #6a707c;
	--beep-color: #3a404c;
	--bg-code: #e2e2e2;
	--fg-code: #66ad66;

	--fg-text: #696969;

	--btn-bg: #5a607c;
	--btn-fg: var(--bg-color);
	--btn-hover: #3a405c;

	--normal-font: "TASA Explorer", Arial, Helvetica, sans-serif;
	--title-font: Fascinate, Arial, Helvetica, sans-serif;
	--code-font: "JetBrains Mono", monospace;
}

[data-theme="dark"] {
	--bg-color: #202020;
	--bg-color-2: #2e2e2e;
	--fg-color: #c5bab0;
	--fg-hover: #e6dbd0;
	--fg-link: #a59a90;
	--fg-subtle: #a6fda6;
	--beep-color: #a6fda6;
	--bg-code: #323232;
	--fg-code: #9ab0cc;

	--fg-text: #a59a90;

	--btn-bg: var(--fg-subtle);
	--btn-fg: var(--bg-color);
	--btn-hover: #b7feb7;
}

[data-theme="gruvbox"] {
	--bg-color: #282828;
	--bg-color-2: #2e2e2e;
	--fg-color: #ebdbb2;
	--fg-hover: #fb4934;
	--fg-link: #83a598;
	--fg-subtle: #b8bb26;
	--beep-color: #a89984;
	--bg-code: #383838;
	--fg-code: #d79921;

	--fg-text: #cbbb92;

	--btn-bg: var(--fg-hover);
	--btn-fg: var(--fg-color);
	--btn-hover: #db2914;
}

[data-theme="onedark"] {
	--bg-color: #282c34;
	--bg-color-2: #383c44;
	--fg-color: #abb2bf;
	--fg-hover: #61afef;
	--fg-link: #56b6c2;
	--fg-subtle: #e5c07b;
	--beep-color: #e06c75;
	--bg-code: #484c54;
	--fg-code: #98c379;

	--fg-text: #8b929f;

	--btn-bg: var(--fg-hover);
	--btn-fg: var(--bg-color);
	--btn-hover: #418fcf;
}

[data-theme="everforest"] {
	--bg-color: #333c43;
	--bg-color-2: #434f55;
	--fg-color: #d3c6aa;
	--fg-hover: #63a072;
	--fg-link: #83c092;
	--fg-subtle: #d699b6;
	--beep-color: #a7c080;
	--bg-code: #555f66;
	--fg-code: #dbbc7f;

	--fg-text: #b3a68a;

	--btn-bg: var(--fg-hover);
	--btn-fg: var(--bg-color);
	--btn-hover: #438052;
}