/** 
 (useCssVariablesGlobalRootReplace = true) 
 *
 *	ALERT! 
 *		Only global variables may be declared and must be placed inside the :root section! 
 *		Other native CSS Variable / CSS Custom Properties functionality like 
 *		    the possibility of changing the variables locally (local scope), 
 *		    declaring variables inline, 
 *		    var() fallbacks etc 
 *		will not work with this set up!
 *		The variables will be extracted and be physically replaced where they are use in the css 
 *		so that older browsers that do not support CSS Variables will see the same result when the 
 *		CSS file is generated on the live site.
 *
 */

body.debug{
	/* visibility: visible; */
}

:root{
	/** = START === COLOR KEY === */

		/** TEXT BODY - (TEXT color:body text) */
		--color-text-body: #544333;
	
		/** TEXT HEADING */
		--color-text-heading: #382a1e;
	
		/** LINK - (link, button, link gradient,button border) */
		--color-link:		#0b7ea0;
		--color-link-dark:	#09658d;
	
		/** PRICE - (Pricing, some titles, button, button border) */
		--color-price:		#fb501d;
		--color-price-dark:	#fa3b15;
	
		/** ALERT - (button, button gradient, button border) */
		--color-alert:		#c32108;
		--color-alert-dark:	#b71a06;
	
		/** WARNING ERROR */
		
		
		--color-warning:		#FF0000;
		/* --color-warning:		#9a1500; */
		--color-warning-dark:	#861100;

		/** RATING: YELLOW */
		--color-rating:			#fdb128;
		--color-rating-dark:	#fda120;

		/** BASE: ORANGE - (active state) */
		--color-base:		#f1881d;
		--color-base-dark:	#ee7017;

		/** BLACKISH Background and text color in Header and footer */
		--color-text-blackish: #b3aaac;
		--color-background-blackish: #1A1717;

	
		/** DARKGRAY - (Usually same as TEXT BODY) */
		--color-darkgray:		#544333;
		--color-darkgray-dark:	#433629;
	
		/** MIDGRAY - (menu, menu gradient) */
		--color-midgray:		#b8a087;
		--color-midgray-dark:	#aa8d6f;
	
		/** LIGHTGRAY - (body bg, dotted heading border, search-text, search-text input border bg etc) */
		/* --color-lightgray:		#fbf8f5; */
		--color-lightgray:		#ffffff;
		--color-lightgray-dark:	#f7f2ec;



		/** PRIMARY BACKGROUND - dark text on light background or light text on dark background ('Dark Mode') */
		--color-background-text: #fff;
	
		/** ACCENT - (CTA 'Call to action': button, button border, gradient) */
		--color-accent:			#f7740c;
		--color-accent-dark:	#f55d0a;
	
		/** COMPLEMENTARY 1 - YELLOW (button, button gradient, button border) */
		--color-1:		#fdb128;
		--color-1-dark:	#fda120;
	
		/** COMPLEMENTARY 2 - BROWN (button, button gradient, button border) */
		--color-2:		#a6580a;
		--color-2-dark:	#944608;

		/** COMPLEMENTARY 3 - GREEN (button, button gradient, button border) */
		--color-3:		#7fdb0f;

		/** PREAMBLE */
		--color-preamble:		#616161;

		--color-print-text-body:		var(--color-text-body);
		--color-print-text-heading:		var(--color-text-heading);
		--color-print-link:				var(--color-link);
		--color-print-rating:			var(--color-rating);
		--color-print-lightgray:		var(--color-lightgray);
		--color-print-lightgray-dark:	var(--color-lightgray-dark);


		--color-bgmenu-gradient-from: var(--color-accent);
		--color-bgmenu-gradient-to: var(--color-1);


	/** = END === color KEY === */

	/** = START === charterTourlistV5_inc.asp ('CharterTourlist.css') COLOR KEY === */
		--color-ct-heading: var(--color-text-heading);
		
		--color-ct-link: var(--color-link);
		--color-ct-link-dark: var(--color-link-dark);	
	
		--color-ct-preamble: var(--color-preamble);
		--color-ct-preamble-dark: var(--color-preamble-dark);	
	
		/* --color-ct-lightgray: var(--color-lightgray); */
		/* --color-ct-lightgray-dark: var(--color-lightgray-dark);	 */
		--color-ct-lightgray: #f5f0ec;
		--color-ct-lightgray-dark: #f2ece6;	
	
		/* --color-ct-midgray: var(--color-midgray); */
		/* --color-ct-midgray-dark: var(--color-midgray-dark);	 */
		--color-ct-midgray: #747273;
		--color-ct-midgray-dark: #6a6869;	
	
		/* --color-ct-darkgray: var(--color-darkgray); */
		/* --color-ct-darkgray-dark: var(--color-darkgray-dark);	 */
		--color-ct-darkgray: #5a5a5a;
		--color-ct-darkgray-dark: #484848;	
	
		--color-ct-accent: var(--color-accent);
		--color-ct-accent-dark: var(--color-accent-dark);
	
		--color-ct-price: var(--color-price);
		--color-ct-price-dark: var(--color-price-dark);
		
	/** = END === charterTourlistV5_inc.asp ('CharterTourlist.css') COLOR KEY === */

	/** = START === font KEY === */

		/** FONT BODY - (TEXT color:body text) */
		--font-family-body: 'Roboto',Helvetica,sans-serif;
		/* --font-weight-body: 100; */
		--font-weight-body: 300;

		--font-family-body-bold: 'Roboto',Helvetica,sans-serif;
		/* --font-weight-body-bold: 400; */
		--font-weight-body-bold: 500;
		/* --font-weight-body-bold: 700; */
		/* --font-weight-body-bold: 900; */

		/** FONT QUOTATION */
		--font-family-preamble: 'Noto Serif',serif;
		--font-weight-preamble: 400;
		--font-style-preamble:italic;

		/** FONT HEADING */
		--font-family-heading: 'Dosis',Arial,Helvetica,sans-serif;
		/* --font-weight-heading: 200; */
		--font-weight-heading: 300;
		/* --text-transform-heading: uppercase; */
		--text-transform-heading: none;

		--font-family-heading-bold: 'Dosis',Arial,Helvetica,sans-serif;
		/* --font-weight-heading-bold: 400; */
		/* --font-weight-heading-bold: 500; */
		--font-weight-heading-bold: 600;
		/* --font-weight-heading-bold: 700; */
		/* --font-weight-heading-bold: 800; */
		/* --text-transform-heading-bold: uppercase; */
		--text-transform-heading-bold: none;

	/** = END === font KEY === */	

	
}