:root {
	/* These don't change in dark mode */
	--yellow: #fed800;
	--green: hsl(87, 71%, 35%);
	--light-green: #f1ffdc;
	--lightest-green: #e7ede4;
	--lightest-yellow: #e7ede4;
	--red: #d10000;
	--gray: #c5c5c5;
	--lightest-gray: #ebeef1;
	--light-red: #ffdada;
	--lightest-red: #e9dbde;
	--light-blue: #ebf0f5;
	--lightest-blue: #f0f2f5;
	--blue-gray: #222e40;
	--always-black: #16202c;
	--always-white: #fff;
	--light-yellow: #fed80026;
	--non-active-state: #98a9bc;
	--dt-black-3: #28323e;
	--subtle-dark-background: #d8d8d8;

	/* These change in dark mode */
	--main-bg-color: #f3f3f3;
	--black-light: #f6fbff;
	--white: #ffffff;
	--black: #16202c;
	--light-black: rgba(0, 0, 0, 0.7);
	--lightest-black: rgba(0, 0, 0, 0.5);
	--dark-blue: #1d2638;
	--light-dark-blue: #6f8094;
	--light-gray: #e8e8e8;
	--scrollbar-color: #dedede;
	--active-state: #374957;
	--gray-100: #e1e1e1;
	--light-gray-border: #e8e8e8;
	--black-dark-10: #ffffff;
	--line-11: #e8e8e8;
	--black-dark-20: #ffffff;

	--margin-top: 80px;
	--margin-top-without-nav: 43px;
	--margin-bottom: 55px;
	--padding-bottom: 70px;
	--base-padding-edges: 20px;
	--base-margin: 5px;
	--base-padding: 10px;
	--base-radius: 4px;
	--desktop-header-offset: 0px;

	--font: "Inter";
	--font-massive: 24px;
	--font-largest: 18px;
	--font-large: 16px;
	--font-medium: 14px;
	--font-normal: 14px;
	--font-small: 12px;
	--font-smallest: 10px;
	--font-tiny: 8px;

	--font-weight-lighter: 300;
	--font-weight-normal: normal;
	--font-weight-medium: 500;
	--font-weight-bold: bold;

	--shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);

	--notifications-info-color: #31708f;
	--notifications-info-bg: #bce8f1;
	--notifications-info-border: #bce8f1;

	--notifications-success-color: #3c763d;
	--notifications-success-bg: #dff0d8;
	--notifications-success-border: #d6e9c6;

	--notifications-warning-color: #8a6d3b;
	--notifications-warning-bg: #fcf8e3;
	--notifications-warning-border: #faebcc;

	--notifications-error-color: #a94442;
	--notifications-error-bg: #f2dede;
	--notifications-error-border: #ebccd1;

	--input-border-darkgray: #e4e4e4;
}

html.dark {
	--main-bg-color: #23313d;
	--black-light: #23313d;
	--white: #16202c;
	--black: #ffffff;
	--light-black: rgba(255, 255, 255, 0.7);
	--lightest-black: rgba(255, 255, 255, 0.5);
	--dark-blue: #f0f2f5;
	--light-dark-blue: rgba(240, 242, 245, 0.7);
	--light-gray: #23313d;
	--lightest-gray: #374957;
	--light-blue: #23313d;
	--lightest-blue: #23313d;
	--active-state: #ffffff;
	--gray-100: #6f8094;
	--lightest-green: #374957;
	--lightest-red: #dff0d8;
	--light-gray-border: transparent;

	--black-dark-10: #15202d;
	--black-dark-20: #23313d;

	--line-11: #2d4458;

	--scrollbar-color: #34495a;

	--notifications-info-color: #31708f;
	--notifications-info-bg: #23313d;
	--notifications-info-border: #23313d;

	--notifications-success-color: #3c763d;
	--notifications-success-bg: #23313d;
	--notifications-success-border: #23313d;

	--notifications-warning-color: #8a6d3b;
	--notifications-warning-bg: #23313d;
	--notifications-warning-border: #23313d;

	--notifications-error-color: #a94442;
	--notifications-error-bg: #23313d;
	--notifications-error-border: #23313d;
}

@media (min-width: 1023px) {
	:root {
		--margin-top: 0;
		--margin-top-without-nav: 0;
		--margin-bottom: 0;
		--desktop-header-offset: 87px;
		/* --font-massive: 24px;
		--font-largest: 18px;
		--font-large: 16px;
		--font-medium: 12px;
		--font-normal: 12px;
		--font-small: 12px;
		--font-smallest: 10px;
		--font-tiny: 8px; */
	}
}