/*---------------------------------------------------------------------------*\
	#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: var( --ast-normal-container-width, 1200px );
	--container--width--narrow: var( --ast-narrow-container-width, 800px );


	/* A gap is the default font-size * line-height. This should also equals the paragraph margin. */
	--gap: var( --wp--preset--spacing--medium, calc( var( --font-size ) * var( --line-height ) ) );
	--gap--xs: var( --wp--preset--spacing--x-small, calc( var( --gap ) * .25 ) );
	--gap--sm: var( --wp--preset--spacing--small, calc( var( --gap ) * .5 ) );
	--gap--md: var( --gap );
	--gap--lg: var( --wp--preset--spacing--large, calc( var( --gap ) * 2 ) );
	--gap--xl: var( --wp--preset--spacing--x-large, calc( var( --gap ) * 4 ) );



	/* Border */
	--border-color: var( --wp--custom--border--color, --color--chinese-silver );
	/* 2px border width with 16px default font-size */
	--border-width: var( --wp--custom--border--width, max( 1px, .125rem ) );


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