/** 
 * CSS custom properties (variables)
 * Keith Parent [keithp@bbqguys.com]
 * @URL: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
 * The custom property names are based on the MUI Theme design tokens.
 * To insure that using the follow custom properties don't break styles if they aren't present 
 * is to use the fallback syntax, `color: var(--text-primary, #282b2d);`
 * 
 */

@layer theme {
	:root {
		/* Common */
		--black:         #000;
		--white:         #fff;
		/* BBQGuys Brand Color Palettes */
		/* 'Fresh' Branding */
		--emberorange:   #e86412;
		--goldenyellow:  #f4a128;
		--salered:       #c10900;
		--promored:      #ba0c2f;
		--brightred:     #f83d34;
		--pronavy:       #003d72;
		--brightblue:    #00bdd8;
		--darkgreen:     #006500;
		--lightgreen:    #add171;
		--mediumtan:     #dac4a7;
		--lighttan:      #f2e8dc;
		--lightesttan:   #faf6f2;
		--offwhite:      #fdf9f5;
		--charcoalblack: #171717;
		/* 'Outdoor Living Experts' Branding */
		--signatureorange: #f06000;
		--ivory:           #faf9f6;
		--softstone:       #e3e9ed;
		--fern:            #10605a;
		--freshgrass:      #9bc85e;
		--matcha:          #d2dcce;
		--flameflicker:    #ed8728;
		--sun:             #ffb624;
		--softcitrus:      #ffe6a8;
		--ceramicblue:     #004080;
		--poolside:        #0097c4;
		--sky:             #bde1f4;
		--brick:           #52000d;
		--deepruby:        #aa0303;
		--spanishpink:     #f8b8bc;
		/* Interface Branding */
		--freeshipping: #2d8442;
		--promooverlay: #9f2429;
		/* Custom Material Design Palettes */
		/* Grey */
		--grey-50:       #fffdfb;
		--grey-100:      #f7f5f3;
		--grey-200:      #edf0f1;
		--grey-300:      #d7dbdd;
		--grey-400:      #babec1;
		--grey-500:      #84888d;
		--grey-600:      #707377;
		--grey-700:      #63676d;
		--grey-800:      #42484d;
		--grey-900:      #282b2d;
		/* Primary - Ember Orange */
		--primary-50:    #fffdfb;
		--primary-100:   #ffefe9;
		--primary-200:   #ffc599;
		--primary-300:   #ff8a33;
		--primary-400:   #ff7624;
		--primary-500:   var(--emberorange);
		--primary-600:   #cc4d02;
		--primary-700:   #bb4902;
		--primary-800:   #893b0b;
		--primary-900:   #712a0c;
		/* BBQGuys MUI Theme */
		--text-primary:       var(--grey-900);
		--text-secondary:     var(--grey-700);
		--text-disabled:      var(--grey-400);
		--primary-main:       var(--primary-600);
		--primary-dark:       var(--primary-700);
		--primary-light:      var(--primary-500);
		--primary-lightest:   var(--primary-300);
		--primary-contrast:   var(--white);
		--secondary-main:     var(--grey-800);
		--secondary-dark:     var(--grey-900);
		--secondary-light:    var(--grey-700);
		--secondary-contrast: var(--lightesttan);
		/* [PRO] */
		--pro-main:           #1167b1;
		--pro-light:          var(--brightblue);
		--pro-dark:           var(--pronavy);
		--pro-contrast:       var(--white);
		--pro-contrast-alt:   #fbfdff;
		/* Background */
		--bg-default:         var(--white);
		--bg-paper:           #fdfdfa;
		--bg-pages:           #fefefc;
		--bg-table-header:    #f9f9f6;
		--bg-table-row-even:  #fbfbf8;
		--bg-table-row-hover: var(--primary-50);
		--bg-banner:          #faf9f4;
		--bg-inset:           var(--lightesttan);
		/* Animation/Transition */
		--ani-duration-fast:   .109s;
		--ani-duration-normal: .218s;
		--ani-duration-slow:   .436s;
		--ani-linear:          cubic-bezier(0.0,  0.0, 1.0,  1.0);
		--ani-ease:            cubic-bezier(0.25, 0.1, 0.25, 1.0);
		--ani-ease-in:         cubic-bezier(0.42, 0.0, 1.0,  1.0);
		--ani-ease-out:        cubic-bezier(0.0,  0.0, 0.58, 1.0);
		--ani-ease-in-out:     cubic-bezier(0.42, 0.0, 0.58, 1.0);
		--ani-ease-bounce:     cubic-bezier(0.47, 1.64, 0.41, 0.8);
		/* Aspect Ratios */
		--aspect-ratio-auto:     auto;
		--aspect-ratio-square:   1;
		--aspect-ratio-full:     4/3;
		--aspect-ratio-wide:     16/9;
		--aspect-ratio-phi:      1.618/1;
		/* Reversed */
		--aspect-ratio-wide-rev: 9/16;
		/* The golden ratio, or φ (phi), is 1:1.618 */
		--ratio-phi-large:       61.8;
		--ratio-phi-small:       38.2;
		/* Border */
		--divider-color:         var(--grey-300);
		--outlined-border-color: rgba(0, 0, 0, .2);
		--border-width-thin:     max(0.08em, 1px);
		--border-width-medium:   min(2px, 0.16em);
		--border-width-thick:    min(4px, 0.32em);
		--border-radius:         0.1875em;
		--border-radius-none:    0;
		--border-radius-small:   0.09375em;
		--border-radius-medium:  0.375em;
		--border-radius-large:   0.75em;
		--border-radius-rounded: 3em;
		--border-radius-round:   50%;
		/* Components */
		/* Page */
		--page-bg:   var(--bg-default);
		--page-text: var(--text-primary);
		/* Text */
		--text-negative-color: var(--secondary-dark);
		--text-neutral-color:  var(--secondary-light);
		--text-positive-color: var(--freeshipping);
		--text-code-color:     rebeccapurple;
		/* Link */
		--link-color:                 var(--secondary-main);
		--link-color-hover:           var(--primary-600);
		--link-color-focus:           var(--primary-300);
		--link-underline-color:       var(--grey-400);
		--link-underline-color-hover: var(--primary-300);
		--link-underline-color-focus: var(--primary-200);
		--link-underline-width:       var(--border-width-thin);
		--link-underline-width-hover: var(--border-width-medium);
		--link-underline-offset:      0.15em;
		/* Focus */
		--focus-outline-color:        rgba(255, 138, 51, .8);
		--focus-outline-width:        0.25em;
	}
}

/* Default Content Links */
#content a:not(.btn), 
#content a:not(.btn):hover, 
#content a:not(.btn):focus, 
#content a:not(.btn):active {
	text-decoration: underline;
}
#content a:not(.btn) {
	color: var(--link-color, #42484d);
	text-decoration-color: var(--link-underline-color, #babec1);
	text-decoration-thickness: 1px;
	text-underline-offset: var(--link-underline-offset, 0.15em);
	transition: all var(--ani-duration-normal, .216s) var(--ani-ease-in-out, cubic-bezier(0.42, 0.0, 0.58, 1.0));
}
#content a:not(.btn):hover {
	color: var(--link-color-hover, #cc4d02);
	text-decoration-color: var(--link-underline-color-hover, #ff8a33);
	text-decoration-thickness: var(--link-underline-width-hover, min(2px, 0.16em));
}
#content a:not(.btn):focus, 
#content a:not(.btn):active,
#content a:not(.btn):focus-visible {
	color: var(--link-color-focus, #ff8a33);
	text-decoration-color: var(--link-underline-color-focus, #ffc599);
}
/* Link :focus and :focus-visible styles */
#content a:not(.btn):not([tabindex="-1"]):focus { -webkit-box-shadow: none; box-shadow: none; outline: none; }
#content a:not(.btn):not([tabindex="-1"]):focus-visible { 
	border-radius: var(--border-radius, 0.1875em); 
	outline: var(--focus-outline-width, 0.25em) solid var(--focus-outline-color, rgba(255, 138, 51, .8));
}
@supports not selector(:focus-visible) { 
	#content a:not(.btn):not([tabindex="-1"]):focus { 
		border-radius: var(--border-radius, 0.1875em); 
		outline: var(--focus-outline-width, 0.25em) solid var(--focus-outline-color, rgba(255, 138, 51, .8));
	}
}