/* Color palette + semantic aliases */

:root
{
	/* Palette */
	--dark-red: #B12B1A;
	--red: #FF3625;
	--coral: #FF7360;
	--apricot: #ffc89f;
	--brown: #BD531F;

	--dark-olive: #4D4615;
	--olive: #81741D;
	--light-olive: #B6A327;
	--pale-green: #ACF28D;
	--lime: #3FEA37;
	--light-green: #28C11F;
	--green: #15880F;
	--dark-green: #0D5014;

	--dark-aqua: #06AC82;
	--aqua: #6FD5BB;
	--pale-blue: #A8F6FF;
	--lighter-blue: #72D5E9;
	--light-blue: #41B9D1;
	--blue: #117093;
	--dark-blue: #2C5176;
	--navy: #0D3153;

	--dark-purple: #544087;
	--purple: #8367C9;
	--light-purple: #B9A8E5;
	--light-pink: #ECAAE7;
	--dark-pink: #AE4EA5;

	--black: #000000;
	--dark-gray: #393D3F;
	--gray: #505559;
	--light-gray: #737980;
	--lighter-gray: #959EA6;
	--pale-gray: #BDC3C7;
	--white: #ffffff;

	/* Semantic */
	--bg: var(--white);
	--page-bg: var(--bg);
	--text: var(--black);
	--subtle: var(--lighter-gray);
	
	--accent: var(--red);
	--accent-subtle: var(--apricot);
	--accent-strong: var(--dark-red);
	
	--link: var(--blue);
	--link-subtle: var(--light-blue);
	--link-strong: var(--navy);
	
	--nav-link: var(--accent-strong);
	--nav-link-hover: var(--accent);
}

@media (prefers-color-scheme: dark)
{
	:root
	{
		--bg: var(--black);
		--page-bg: var(--black);
		--text: var(--white);
		--subtle: var(--gray);
		
		--accent: var(--coral);
		--accent-subtle: var(--dark-red);
		--accent-strong: var(--red);
		
		--link: var(--light-blue);
		--link-subtle: var(--blue);
		--link-strong: var(--lighter-blue);
	}
}