:root {
	/* semi-transparent-1 = 80 */
	/* semi-transparent-2 = 33 */
	/* semi-transparent-3 = 1a */

	/* blue */
	--blue-light: rgb(233, 235, 241);
	--blue-light-hover: rgb(221, 225, 234);
	--blue-light-active: rgb(186, 193, 212);

	--blue-light-bright: rgb(243, 245, 250);
	--blue-light-bright-hover: rgb(226, 235, 248);
	--blue-light-bright-active: rgb(191, 203, 226);

	--blue-normal: #1f3875;
	--blue-normal-hover: #1c3269;
	--blue-normal-active: #192d5e;
	--blue-normal-active-semi-2: #192d5e33;

	--blue-accent: rgb(from var(--blue-normal) calc(r + 20) calc(g + 34) calc(b + 50));

	--blue-dark: #172a58;
	--blue-dark-hover: #132246;
	--blue-dark-hover-semi-1: #13224680;
	--blue-dark-active: #0e1935;

	--blue-darker: #0b1429;

	/* red */
	--red-light: #fcebea;
	--red-light-hover: #f9d8d6;
	--red-light-active: #f4a29c;

	--red-normal: #b91c1c;
	--red-normal-hover: #991b1b;
	--red-normal-active: #791616;

	--red-dark: #63171b;
	--red-dark-hover: #4a0e0e;
	--red-dark-active: #2f0808;

	--red-darker: #1b0404;

	/* green */
	--green-normal: #3f8262;

	/* gray*/
	--gray-light: #e0e3ea;
	--gray-light-hover: #cfd5e1;
	--gray-light-active: #a0a4b8;
	--gray: #6b7280;
	--gray-hover: #5a6670;
	--gray-active: #4b5563;
	--gray-dark: #4b5563;
	--gray-darker: #374151;

	/* black */
	--black: #000513;
	--black-semi-1: #00051380;
	--black-semi-2: #00051333;
	--black-semi-3: #0005131a;

	/* white */
	--white: #fefdff;
	--blueish-white: #f8fafc;
	--reddish-white: #fff1f2;

	/* emerald */
	--emerald-light: #E9F0EF;
	--emerald-light-hover: #DDE9E7;
	--emerald-light-active: #BAD1CC;
	--emerald-normal: #1F6B5C;
	--emerald-normal-hover: #1C6053;
	--emerald-normal-active: #19564A;
	--emerald-normal-active-semi-2: #19564A33;
	--emerald-dark: #175045;
	--emerald-dark-hover: #134037;
	--emerald-dark-hover-semi-1: #13403780;
	--emerald-dark-active: #0E3029;
	--emerald-darker: #0B2520;

	--emerald-accent: rgb(from var(--emerald-normal) calc(r * 1.01) calc(g * 1.02) calc(b * 1.01));

	/* warm sand */
	--warm-sand-light: #FEFDFC;
	--warm-sand-light-hover: #FDFCFA;
	--warm-sand-light-active: #FBF8F4;
	--warm-sand-normal: #F2E9DC;
	--warm-sand-normal-hover: #DAD2C6;
	--warm-sand-normal-active: #C2BAB0;
	--warm-sand-dark: #B6AFA5;
	--warm-sand-dark-hover: #918C84;
	--warm-sand-dark-active: #6D6963;
	--warm-sand-darker: #55524D;

	/* coral summer */
	--coral-summer-light: #FFF0ED;
	--coral-summer-light-hover: #FFE9E4;
	--coral-summer-light-active: #FFD1C7;
	--coral-summer-normal: #FF6B4A;
	--coral-summer-normal-hover: #E66043;
	--coral-summer-normal-active: #CC563B;
	--coral-summer-dark: #BF5038;
	--coral-summer-dark-hover: #99402C;
	--coral-summer-dark-active: #733021;
	--coral-summer-darker: #59251A;

	/* light aqua */
	--light-aqua-light: #FAFDFD;
	--light-aqua-light-hover: #F8FCFC;
	--light-aqua-light-active: #F0F9F8;
	--light-aqua-normal: #CFEDE8;
	--light-aqua-normal-hover: #BAD5D1;
	--light-aqua-normal-active: #A6BEBA;
	--light-aqua-dark: #9BB2AE;
	--light-aqua-dark-hover: #7C8E8B;
	--light-aqua-dark-active: #5D6B68;
	--light-aqua-darker: #485351;

	/* deep navy */
	--deep-navy-light: #E8E9EA;
	--deep-navy-light-hover: #DDDDDF;
	--deep-navy-light-active: #B9BABD;
	--deep-navy-normal: #1C1F2A;
	--deep-navy-normal-hover: #191C26;
	--deep-navy-normal-active: #161922;
	--deep-navy-dark: #151720;
	--deep-navy-dark-hover: #111319;
	--deep-navy-dark-active: #0D0E13;
	--deep-navy-darker: #0A0B0F;

	/* soft white */
	--soft-white-light: #FFFFFE;
	--soft-white-light-hover: #FEFEFE;
	--soft-white-light-active: #FDFDFD;
	--soft-white-normal: #FAFAF8;
	--soft-white-normal-hover: #E1E1DF;
	--soft-white-normal-active: #C8C8C6;
	--soft-white-dark: #BCBCBA;
	--soft-white-dark-hover: #969695;
	--soft-white-dark-active: #707070;
	--soft-white-darker: #585857;
}