/******************************************************************
Theme Name: P2E Gaming
Theme URI: http://www.jointswp.com
Description: 
Author: Your Name Here
Author URI: http://www.yoururlhere.com
Version: 5.0 (Development)
License: GNU General Public License & MIT
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: Sass
******************************************************************/

/**********/
/* GLOBAL */
/**********/

/*
 * Define component branding variables here, then assign them via their media queries below.
 * Variables are implicitly for light mode, dark is named explicitly.
 * 
 * + Provides a clear and concise view of which UI elements are mapped to which branding colors.
 * + Enables managing otherwise spread-out branding assignments from one single source of truth.
 * + Enables replacing otherwise inline hard-echoed colors with flexible color variables (ie: entertainment snipe).
 */
:root {
	--h1-font-family: "Quicksand", sans-serif;
	--h2-font-family: "Quicksand", sans-serif;
	--h3-font-family: "Quicksand", sans-serif;
	--h4-font-family: "Quicksand", sans-serif;
	--p-font-family: "Montserrat",Helvetica,Roboto,Arial, sans-serif;

	--snipe-fill: var(--secondary-medium);
	--footer-bg-color: var(--snipe-fill);

	--button-font-family: "Quicksand", sans-serif;
	--button-color: var(--neutrallight-light);
	--button-background-color: var(--secondary-medium);
	--button-background-color-focus: var(--secondary-dark);
	--button-secondary-color: var(--secondary-medium);

	--dark-button-color: var(--neutrallight-light);
	--dark-button-background-color: var(--secondary-medium);
	--dark-button-background-color-focus: var(--secondary-dark);
	--dark-button-secondary-color: var(--secondary-medium);

	--block-background-color: var(--neutrallight-medium);
	--dark-block-background-color: var(--primary-dark);

	--cta-background-color: var(--secondary-medium);
	--dark-cta-background-color: var(--primary-medium);
	--cta-color: var(--neutrallight-light);

	--gradient-bg-image: none;
	--gradient-intensity: 5;
	--block-bg: #fff;
}

@supports (color: hsl(from red h s l)) {
	.gradient-bg {
		background:
			var(--gradient-bg-image) center / cover no-repeat,
			radial-gradient(
			circle, 
			hsl(from var(--block-bg) h s calc(l + var(--gradient-intensity))) 0%,
			var(--block-bg) 30%, 
			hsl(from var(--block-bg) h s calc(l - var(--gradient-intensity))) 100%
		);
	}
}