/* Settings might be replaced with theme.json or must be synchronized! */
/*---------------------------------------------------------------------------*\
	#Font
\*---------------------------------------------------------------------------*/

:root {
	--font-family: 'Open Sans', sans-serif;


	--font-size: 1rem;

	--h1--font-size: calc(var(--font-size) * 2.0);
	--h2--font-size: calc(var(--font-size) * 1.5);
	--h3--font-size: calc(var(--font-size) * 1.25);
	--h4--font-size: calc(var(--font-size) * 1.0);
	--h5--font-size: calc(var(--font-size) * 0.75);
	--h6--font-size: calc(var(--font-size) * 0.625);

	--small--font-size: calc(var(--font-size) * 0.75);


	/* Font weight as formulated value. */
	--font-weight--thin: 100;
	--font-weight--extra-light: 200;
	--font-weight--light: 300;
	--font-weight--regular: 400;
	--font-weight--medium: 500;
	--font-weight--semi-bold: 600;
	--font-weight--bold: 700;
	--font-weight--extra-bold: 800;
	--font-weight--black: 900;


	/* Line height as a numerical value to calculate! */
	--line-height: 1.6;
	--heading--line-height: 1.4;
}





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

:root {
	/*
	 * Color name postfixes:
	 * -dark:     10% black overlay
	 * -darker:   20% black overlay
	 * -bright:   10% white overlay
	 * -brighter: 20% white overlay
	 */
	--color--primary: #0077b3;
	--color--primary-dark: #006ba1;
	--color--primary-darker: #005f8e;
	--color--primary-bright: #1a85bb;
	--color--primary-brighter: #3292c2;

	--color--secondary: #5fb300;
	--color--secondary-dark: #55a100;
	--color--secondary-darker: #4c8e00;
	--color--secondary-bright: #6fbb1a;
	--color--secondary-brighter: #7ec232;

	--color--gentle-taupe: #ebe8e2;

	--color--black: #000;
	/* About 80% black */
	--color--dark-charcoal: #333333;
	/* About 75% black */
	--color--black-olive: #404040;
	/* About 70% black */
	--color--neutral-dark-gray: #4d4d4d;

	--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;


	/* Gradients */
	--gradient--primary: linear-gradient(35deg, var(--color--primary-darker) 0%, var(--color--primary) 50%, var(--color--primary-brighter) 100%);
	--gradient--secondary: linear-gradient(35deg, var(--color--secondary-darker) 0%, var(--color--secondary) 50%, var(--color--secondary-brighter) 100%);


	/* Background */
	--background-color--site: var(--color--gentle-taupe);
	--background-color--content: var(--color--white );

/*CONTINUE HERE*/
	/* Text */
	--text--color: var( --color--black );
	--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: 67.5rem;
	--container--width--narrow: 45rem;


	/* 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--xxs: var( --wp--preset--spacing--x-small, calc( var( --gap ) * .125 ) );
	--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 );
}