/*---------------------------------------------------------------------------*\
	#Font
	- Most of these settings should be made with the Astra Theme in the
	  Customizer.
\*---------------------------------------------------------------------------*/

:root {
	--font-size: 1rem;
	--line-height: 1.6;
}





/*---------------------------------------------------------------------------*\
	#Color
\*---------------------------------------------------------------------------*/

:root {
	--color--primary: #2b7c51;
	/* Primary + 10% black overlay. */
	--color--primary-dark: #277049;
	/* Primary + 20% black overlay. */
	--color--primary-darker: #236441;
	/* Primary + 10% white overlay. */
	--color--primary-bright: #408962;
	/* Primary + 20% white overlay. */
	--color--primary-brighter: #559673;

	--color--black: #000;
	/* About 75% black */
	--color--black-olive: #404040;

	--color--gray: #808080;

	--color--white: #fff;
	/* About 97.5% white */
	--color--ghost-white: #f9f9f9;
	/* About 95% white */
	--color--anti-flash-white: #f3f3f3;
	/* About 90% white */
	--color--platinum: #e6e6e6;
	/* About 85% white */
	--color--light-silver: #d9d9d9;
	/* About 80% white */
	--color--chinese-silver: #cccccc;
	/* About 75% white */
	--color--argent: #c0c0c0;


	/* Background */
	--page-background--color: var( --color--anti-flash-white );


	/* Text */
	--text--color--dark: var( --color--black );
	--text--color--light: var( --color--white );
	--text--color--gray: var( --color--gray );

	--link--color: var( --color--primary );
	--link--color--hover: var( --color--black-olive );


	/* Form elements */
	--button--color--primary: var( --color--primary );
	--button--color--secondary: var( --color--argent );
	/* Active is with 20% white overlay */
	--button--color--primary-active: var( --color--primary-brighter );
	--button--color--secondary-active: var( --color--chinese-silver );
}





/*---------------------------------------------------------------------------*\
	#Miscellaneous
\*---------------------------------------------------------------------------*/

:root {
	--container--width: 1200px;
	--container--width--narrow: 800px;


	--gap: calc( var( --font-size ) * var( --line-height ) );


	/* Border */
	--border-color: var( --color--light-silver );
	--border-width: .7mm;


	/* Chart */
	--chart--color: var( --color--ghost-white );
	--chart--border-color: var( --color--anti-flash-white );
}