:root {
	/* Main */
	--color-primary: var(--color-blue-450);
	--color-primary-light: var(--color-blue-800);
	--color-primary-light-opacity: rgba(1, 40, 100, 0.75);
	--color-primary-2: var(--color-blue-500);
	--color-primary-2-light: var(--color-blue-750);
	--color-primary-2-light-opacity: rgba(0, 59, 146, 0.64);

	--color-secondary-opacity: rgba(193, 203, 215, 0.16);
	--color-secondary-2-opacity: rgba(193, 203, 215, 0.32);
	--color-secondary-3-opacity: rgba(193, 203, 215, 0.38);

	--color-positive: var(--color-green-450);
	--color-positive-opacity: rgba(0, 102, 44, 0.75);
	--color-positive-light: var(--color-green-800);
	--color-positive-light-opacity: rgba(0, 89, 38, 0.47);
	--color-positive-2: var(--color-green-500);
	--color-positive-2-light: var(--color-green-750);
	--color-positive-2-light-opacity: rgba(0, 102, 44, 0.75);

	--color-warning: var(--color-orange-450);
	--color-warning-opacity: rgba(255, 170, 51, 0.3);
	--color-warning-light: var(--color-orange-800);
	--color-warning-light-opacity: rgba(109, 64, 1, 0.61);
	--color-warning-2: var(--color-orange-500);
	--color-warning-2-light: var(--color-orange-750);
	--color-warning-2-light-opacity: rgba(161, 97, 0, 0.58);

	--color-negative: var(--color-red-450);
	--color-negative-opacity: rgba(234, 65, 50, 0.3);
	--color-negative-light: var(--color-red-800);
	--color-negative-light-opacity: rgba(117, 10, 0, 0.50);
	--color-negative-2: var(--color-red-500);
	--color-negative-2-light: var(--color-red-750);
	--color-negative-2-light-opacity: rgba(136, 23, 0, 0.66);

	/* Text */
	--color-text-1: var(--color-theme-975);
	--color-text-2: var(--color-theme-750);
	--color-text-3: var(--color-theme-550);
	--color-text-4: var(--color-theme-450);
	--color-text: var(--color-text-1);

	--color-text-secondary: var(--color-gray-750);
	--color-text-secondary-2: var(--color-gray-650);

	--color-text-link: var(--color-blue-500);
	--color-text-link-hover: var(--color-blue-450);

	--color-overlay: rgba(0, 0, 0, 0.3);

	--color-placeholder: var(--color-gray-350);
	--color-placeholder-active: var(--color-gray-450);

	/* Background colors */
	--color-bg-1: rgba(21, 23, 25, 1);
	--color-bg-2: rgba(26, 28, 31, 1);
	--color-bg-3: rgba(38, 41, 46, 1);

	/* Line colors */
	--color-line-1-opacity: rgba(193, 203, 215, 0.1);
	--color-line-2-opacity: rgba(68, 74, 87, 0.67);
	--color-line-3-opacity: rgba(104, 110, 126, 0.67);

	/* Scroll */
	--scroll-thumb-color: var(--color-gray-750);
	--scroll-thumb-color-hover: var(--color-gray-700);
	--scroll-thumb-color-active: var(--color-gray-650);

	/* Page */
	--body-background-color: var(--content-background-color);
	--content-background-color: var(--color-bg-3);

	/* Theme */
	--color-theme-0: var(--color-bg-3);
	--color-theme-25: rgba(40, 43, 48, 1);
	--color-theme-50: rgba(41, 45, 51, 1);
	--color-theme-75: rgba(44, 49, 56, 1);
	--color-theme-100: rgba(48, 52, 59, 1);
	--color-theme-125: rgba(52, 56, 64, 1);
	--color-theme-150: rgba(54, 59, 69, 1);
	--color-theme-200: rgba(58, 63, 74, 1);
	--color-theme-250: rgba(61, 66, 77, 1);
	--color-theme-300: rgba(64, 70, 82, 1);
	--color-theme-350: rgba(68, 74, 87, 1);
	--color-theme-400: rgba(75, 81, 94, 1);
	--color-theme-450: rgba(82, 87, 99, 1);
	--color-theme-500: rgba(90, 95, 107, 1);
	--color-theme-525: rgba(98, 103, 115, 1);
	--color-theme-550: rgba(108, 112, 122, 1);
	--color-theme-600: rgba(116, 120, 130, 1);
	--color-theme-650: rgba(128, 131, 140, 1);
	--color-theme-700: rgba(142, 145, 153, 1);
	--color-theme-750: rgba(157, 160, 166, 1);
	--color-theme-800: rgba(174, 177, 184, 1);
	--color-theme-850: rgba(193, 196, 201, 1);
	--color-theme-875: rgba(211, 214, 219, 1);
	--color-theme-900: rgba(235, 237, 240, 1);
	--color-theme-925: rgba(240, 242, 245, 1);
	--color-theme-950: rgba(245, 246, 247, 1);
	--color-theme-975: rgba(250, 251, 252, 1);
	--color-theme-1000: rgba(255, 255, 255, 1);

	/* top-shadow */
	--top-shadow-s:
		0px 0px 3px rgba(0, 0, 0, 0.11),
		0px 5px 25px rgba(0, 0, 0, 0.17);
	--top-shadow:
		0px 0px 4px rgba(0, 0, 0, 0.14),
		0px 4px 32px rgba(0, 0, 0, 0.2);
	--top-shadow-b:
		0px 0px 4px rgba(0, 0, 0, 0.15),
		0px 18px 32px rgba(0, 0, 0, 0.34);

	--top-shadow-darken: inset 1000px 1000px 1000px 1000px rgba(0, 0, 0, 0.03);
	--top-shadow-darken-2: inset 1000px 1000px 1000px 1000px rgba(0, 0, 0, 0.07);
	--top-shadow-darken-3: inset 1000px 1000px 1000px 1000px rgba(0, 0, 0, 0.14);
}

/* forms */
:root {
	--top-forms-border-color: var(--color-line-1-opacity);
	--top-forms-border-color-hover: var(--color-line-2-opacity);

	--top-forms-background-color: var(--color-bg-3);
	--top-forms-background-color-hover: var(--color-bg-3);
}