@layer reset, tokens, utilities, components;

@layer tokens {

	:root {
		--valid-color:#8AC74C; /* { readonly: true } */
		--invalid-color: #F34039; /* { readonly: true } */
		--highlight-color: #0066EE; /* { readonly: true } */

		--buttons: #E8872A;
		--secondary: #1E1E1E;
		--accent: #1A8490;
		--accent-alt: #6EC4CB;
		--link-alt: #6EC4CB;
		--main-bg-alt: #073D48;
		--link: #1A8490;
		--inner-bg-alt: #0F5668;
		--primary: #073D48;
		--main-bg: #F4F9F8;
		--inner-bg: #CBE9E3;
		--text: #1A1A1A;
		--primary-alt: #FFFFFF;
		--black: #000000;
		--secondary-alt: #E0F2EE;
		--text-alt: #FFFFFF;
		
		--lt-fnt-big: var(--primary); /* { friendly: 'Light Theme Big Title Color', group: 'Colors' } */
		--lt-fnt-co: var(--primary); /* { friendly: 'Light Theme Callout Title Color', group: 'Colors' } */
		--lt-fnt-k: var(--secondary); /* { friendly: 'Light Theme Title Kicker Color', group: 'Colors' } */
		
		--lt-fnt-1: var(--primary); /* { friendly: 'Light Theme Title 1 Color', group: 'Colors' } */
		--lt-fnt-2: var(--secondary); /* { friendly: 'Light Theme Title 2 Color', group: 'Colors' } */
		--lt-fnt-3: var(--secondary); /* { friendly: 'Light Theme Title 3 Color', group: 'Colors' } */
		--lt-fnt-4: var(--secondary); /* { friendly: 'Light Theme Title 4 Color', group: 'Colors' } */
		--lt-fnt-5: var(--secondary); /* { friendly: 'Light Theme Title 5 Color', group: 'Colors' } */
		--lt-fnt-6: var(--secondary); /* { friendly: 'Light Theme Title 6 Color', group: 'Colors' } */
		--lt-fnt-itm: var(--secondary); /* { friendly: 'Light Theme Title Item Color', group: 'Colors' } */
		--lt-fnt-nt: var(--text); /* { friendly: 'Light Theme Title Note Color', group: 'Colors' } */
		
		--lt-fnt-qte: var(--text); /* { friendly: 'Light Theme Review Quote Color', group: 'Colors' } */
		--lt-fnt-atr: var(--secondary); /* { friendly: 'Light Theme Review Author Color', group: 'Colors' } */
		--lt-fnt-phn: var(--text); /* { friendly: 'Light Theme Phone Number Color', group: 'Colors' } */
		--lt-frm-lbl: var(--text); /* { friendly: 'Light Theme Form Label Color', group: 'Colors' } */
		
		
		--lt-bdr-clr: var(--text); /* { friendly: 'Light Theme Border Color', group: 'Colors' } */
		
		--dk-fnt-big: var(--text-alt); /* { friendly: 'Dark Theme Big Title Color', group: 'Colors' } */
		--dk-fnt-co: var(--primary-alt); /* { friendly: 'Dark Theme Callout Title Color', group: 'Colors' } */
		--dk-fnt-k: var(--secondary-alt); /* { friendly: 'Dark Theme Title Kicker Color', group: 'Colors' } */
		
		--dk-fnt-1: var(--primary-alt); /* { friendly: 'Dark Theme Title 1 Color', group: 'Colors' } */
		--dk-fnt-2: var(--secondary-alt); /* { friendly: 'Dark Theme Title 2 Color', group: 'Colors' } */
		--dk-fnt-3: var(--secondary-alt); /* { friendly: 'Dark Theme Title 3 Color', group: 'Colors' } */
		--dk-fnt-4: var(--secondary-alt); /* { friendly: 'Dark Theme Title 4 Color', group: 'Colors' } */
		--dk-fnt-5: var(--secondary-alt); /* { friendly: 'Dark Theme Title 5 Color', group: 'Colors' } */
		--dk-fnt-6: var(--secondary-alt); /* { friendly: 'Dark Theme Title 6 Color', group: 'Colors' } */
		--dk-fnt-itm: var(--text-alt); /* { friendly: 'Dark Theme Title Item Color', group: 'Colors' } */
		--dk-fnt-nt: var(--text-alt); /* { friendly: 'Dark Theme Title Note Color', group: 'Colors' } */
		
		--dk-fnt-qte: var(--text-alt); /* { friendly: 'Dark Theme Review Quote Color', group: 'Colors' } */
		--dk-fnt-atr: var(--text-alt); /* { friendly: 'Dark Theme Review Author Color', group: 'Colors' } */
		--dk-fnt-phn: var(--text-alt); /* { friendly: 'Dark Theme Phone Number Color', group: 'Colors' } */	
		--dk-frm-lbl: var(--text-alt); /* { friendly: 'Dark Theme Form Label Color', group: 'Colors' } */
		
		
		--dk-bdr-clr: var(--text-alt); /* { friendly: 'Dark Theme Border Color', group: 'Colors' } */
	}

	/* Light Colors */
	@scope ( .lt-bg, .wht-bg, .dk-bg :is(.ulk-bg, .alt-bg) ) to (.lt-bg .ulk-bg) {
		
		:scope {
			--background: var(--main-bg);
			--inner-theme: var(--inner-bg);
			
			--text-color: var(--text);
			--link-color: var(--link);
			--link-hover: var(--text);
			
			--fnt-t-big: var(--lt-fnt-big);
			--fnt-t-co: var(--lt-fnt-co);
			--fnt-t-k: var(--lt-fnt-k);
			
			--fnt-t-1: var(--lt-fnt-1);
			--fnt-t-2: var(--lt-fnt-2);
			--fnt-t-3: var(--lt-fnt-3);
			--fnt-t-4: var(--lt-fnt-4);
			--fnt-t-5: var(--lt-fnt-5);
			--fnt-t-6: var(--lt-fnt-6);
			--fnt-t-itm: var(--lt-fnt-itm);
			--fnt-t-nt: var(--lt-fnt-nt);
			
			--fnt-qte: var(--lt-fnt-qte);
			--fnt-atr: var(--lt-fnt-atr);
			--fnt-phn: var(--lt-fnt-phn);
			--frm-lbl: var(--lt-frm-lbl);
			
			--flr-hdr-clr: var(--lt-flr-hdr-clr);
			
			--bg-bx-bdr-clr: var(--text);
			
			--bdr-clr: var(--lt-bdr-clr);

		}
		
		&.wht-bg {
			--background: var(--white);
			
			.alt-bg {
				--inner-theme: var(--main-bg);
				--text-color: var(--text);
				--link-color: var(--link);
			}
		}
		
		&.alt-bg {
			--background: var(--inner-bg);
			--inner-theme: var(--main-bg);
		}
		
		.ulk-bg, .alt-bg {
			--text-color: var(--text-alt);
			--link-color: var(--link-alt);
		}
		
		.ulk-bg {
			--inner-theme: var(--inner-bg-alt);
		}
		
		.alt-bg {
			--inner-theme: var(--main-bg-alt);
		}
		
		.clr-swp {
			--link-color: var(--text-color);
			--link-hover: var(--link);
		}
		
		.btn-clr {
			--background: var(--buttons);
			--text-color: var(--text-alt);
			
			&.active {
				--background: var(--main-bg-alt);
				--text-color: var(--text-alt);
			}
			
			@media (hover: hover) and (pointer: fine) {
				&:is(a:hover,a:focus-visible),
				&:is(button:hover,button:focus-visible),
				a:is(:hover,:focus-visible) {
					--background: var(--main-bg-alt);
					--text-color: var(--text-alt);
					--link-hover: var(--text-color);
				}
			}
		}
		
		.clr-pry {
			--text-color: var(--primary);
		}
		
		.clr-sec {
			--text-color: var(--secondary);
		}
		
		.clr-acc {
			--text-color: var(--accent);
		}
		
		.clr-lnk {
			--text-color: var(--link);
		}
		
		.clr-blk {
			--text-color: var(--black);
		}
		
	}

	/* Dark Colors */
	@scope ( .dk-bg, .lt-bg .ulk-bg, .lt-bg:not(.wht-bg) .alt-bg ) to (.dk-bg .ulk-bg) {
		
		:scope {
			--background: var(--main-bg-alt);
			--inner-theme: var(--inner-bg-alt);
			
			--text-color: var(--text-alt);
			--link-color: var(--link-alt);
			--link-hover: var(--text-alt);
			
			--fnt-t-big: var(--dk-fnt-big);
			--fnt-t-co: var(--dk-fnt-co);
			--fnt-t-k: var(--dk-fnt-k);
			
			--fnt-t-1: var(--dk-fnt-1);
			--fnt-t-2: var(--dk-fnt-2);
			--fnt-t-3: var(--dk-fnt-3);
			--fnt-t-4: var(--dk-fnt-4);
			--fnt-t-5: var(--dk-fnt-5);
			--fnt-t-6: var(--dk-fnt-6);
			--fnt-t-itm: var(--dk-fnt-itm);
			--fnt-t-nt: var(--dk-fnt-nt);
			
			--fnt-qte: var(--dk-fnt-qte);
			--fnt-atr: var(--dk-fnt-atr);
			--fnt-phn: var(--dk-fnt-phn);
			--frm-lbl: var(--dk-frm-lbl);
			
			--flr-hdr-clr: var(--dk-flr-hdr-clr);
			
			--bg-bx-bdr-clr: var(--text-alt);
			
			--bdr-clr: var(--dk-bdr-clr);
		}
		
		&.alt-bg {
			--background: var(--inner-bg-alt);
			--inner-theme: var(--main-bg-alt);
		}
		
		.ulk-bg, .alt-bg {
			--text-color: var(--text);
			--link-color: var(--link);
			
			.btn-clr {
				
				@media (hover: hover) and (pointer: fine) {
					&:is(a:hover,a:focus-visible),
					a:is(:hover,:focus-visible) {
						--background: var(--main-bg-alt);
						--text-color: var(--text-alt);
						--link-hover: var(--text-color);
					}
				}
			}
		}
		
		.ulk-bg {
			--inner-theme: var(--inner-bg);
		}
		
		.alt-bg {
			--inner-theme: var(--main-bg);
		}
		
		.clr-swp {
			--link-color: var(--text-color);
			--link-hover: var(--link-alt);
		}
		
		.btn-clr {
			--background: var(--buttons);
			--text-color: var(--text-alt);
			
			&.active {
				--background: var(--main-bg);
				--text-color: var(--text);
			}
			
			@media (hover: hover) and (pointer: fine) {
				&:is(a:hover,a:focus-visible),
				&:is(button:hover,button:focus-visible),
				a:is(:hover,:focus-visible) {
					--background: var(--main-bg);
					--text-color: var(--text);
					--link-hover: var(--text-color);
				}
			}
		}
		
		.clr-pry {
			--text-color: var(--primary-alt);
		}
		
		.clr-sec {
			--text-color: var(--secondary-alt);
		}
		
		.clr-acc {
			--text-color: var(--accent-alt);
		}
		
		.clr-lnk {
			--text-color: var(--link-alt);
		}
		
		.clr-blk {
			--text-color: var(--black);
		}

	}

	@scope (.lt-bg :is(.alt-bg, .ulk-bg) :is(.alt-bg, .ulk-bg) )   {
  :scope {
    --background: var(--inner-bg);
    --inner-theme: var(--inner-bg);

    --text-color: var(--text);
    --link-color: var(--link);
    --link-hover: var(--text);

    --fnt-t-big: var(--lt-fnt-big);
    --fnt-t-co:  var(--lt-fnt-co);
    --fnt-t-k:   var(--lt-fnt-k);

    --fnt-t-1: var(--lt-fnt-1);
    --fnt-t-2: var(--lt-fnt-2);
    --fnt-t-3: var(--lt-fnt-3);
    --fnt-t-4: var(--lt-fnt-4);
    --fnt-t-5: var(--lt-fnt-5);
    --fnt-t-6: var(--lt-fnt-6);
    --fnt-t-itm: var(--lt-fnt-itm);
    --fnt-t-nt:  var(--lt-fnt-nt);

    --fnt-qte: var(--lt-fnt-qte);
    --fnt-atr: var(--lt-fnt-atr);
    --fnt-phn: var(--lt-fnt-phn);
    --frm-lbl: var(--lt-frm-lbl);

    --flr-hdr-clr: var(--lt-flr-hdr-clr);
    --bg-bx-bdr-clr: var(--text);
    --bdr-clr: var(--lt-bdr-clr);
    --bg-color: var(--text);
    
    --txt-hlt-bg: var(--buttons);
    
    &.alt-bg {
    	--inner-theme: var(--main-bg);
    }
  }
}

@scope (.dk-bg :is(.alt-bg, .ulk-bg) :is(.alt-bg, .ulk-bg) ) {
  :scope {
    --background: var(--main-bg-alt);
	--inner-theme: var(--inner-bg-alt);
	
	--text-color: var(--text-alt);
	--link-color: var(--link-alt);
	--link-hover: var(--text-alt);
	
	--fnt-t-big: var(--dk-fnt-big);
	--fnt-t-co: var(--dk-fnt-co);
	--fnt-t-k: var(--dk-fnt-k);
	
	--fnt-t-1: var(--dk-fnt-1);
	--fnt-t-2: var(--dk-fnt-2);
	--fnt-t-3: var(--dk-fnt-3);
	--fnt-t-4: var(--dk-fnt-4);
	--fnt-t-5: var(--dk-fnt-5);
	--fnt-t-6: var(--dk-fnt-6);
	--fnt-t-itm: var(--dk-fnt-itm);
	--fnt-t-nt: var(--dk-fnt-nt);
	
	--fnt-qte: var(--dk-fnt-qte);
	--fnt-atr: var(--dk-fnt-atr);
	--fnt-phn: var(--dk-fnt-phn);
	--frm-lbl: var(--dk-frm-lbl);
	
	--flr-hdr-clr: var(--dk-flr-hdr-clr);
	
	--bg-bx-bdr-clr: var(--text-alt);
	
	--bdr-clr: var(--dk-bdr-clr);
	
	--bg-color: var(--text-alt);
	
	--txt-hlt-bg: var(--text-alt);
    
    &.alt-bg {
    	--inner-theme: var(--main-bg-alt);
    }
  }
}



} /* end @layer tokens */
/* Apply It */
:where(.lt-bg, .dk-bg) {
	--blt-clr: var(--buttons);
	
	background-color: var(--background);
	color: var(--text-color);

	.bg-bx {
		color: var(--text-color);
		
		&:not(.no-bg, .bdr-bg) {
			background-color: var(--inner-theme);
		}
		
		.bg-bx {
			--inner-theme: var(--background);
		}
	}
	
	a, button {
		color: var(--link-color);
	}
	
	.flr_hd {
		color: var(--flr-hdr-clr);
	}
	
	:is( h1, h2, h3, h4, h5, h6, [class*='fnt_']:not(a), header > *:first-child:not(a) ) {
		color: var(--title-color);
	}
	
	.fnt_t-big {
		--title-color: var(--fnt-t-big);
	}
	
	
	.fnt_t-co {
		--title-color: var(--fnt-t-co);
	}
	
	:where(h1 > em, .fnt_t-k) {
		--title-color: var(--fnt-t-k);
	}
	
	h1,
	.fnt_t-1,
	header > *:first-child:not( a, [class*='fnt_t'] ),
	.cnt-stl:not(.xpnd) > :first-child:is( h1, h2, h3, h4, h5, h6 ) {
		--title-color: var(--fnt-t-1);
	}
	
	h2,
	.fnt_t-2,
	header > *:nth-child(2):not(p, [class*='fnt_t'], .flr_hd),
	.cnt-stl > :nth-child(2):is( h1, h2, h3, h4, h5, h6 ) {
		--title-color: var(--fnt-t-2);
	}
	
	h3, .fnt_t-3 {
		--title-color: var(--fnt-t-3);
	}
	
	h4, .fnt_t-4 {
		--title-color: var(--fnt-t-4);
	}
	
	h5, .fnt_t-5 {
		--title-color: var(--fnt-t-5);
	}
	
	h6, .fnt_t-6 {
		--title-color: var(--fnt-t-6);
	}
	
	.fnt_t-itm {
		--title-color: var(--fnt-t-itm);
	}
	
	.fnt_t-nt {
		--title-color: var(--fnt-t-nt);
	}
	
	.fnt_qte {
		--title-color: var(--fnt-qte);
	}
	
	.fnt_atr {
		--title-color: var(--fnt-atr);
	}
	
	[href^=tel]:not([class*="btn"]) {
		--link-color: var(--fnt-phn);
		--link-hover: var(--fnt-phn);
	}
	
	.cnt-stl ul li:before {
		background-color: var(--blt-clr);
	}
	
	.btn-clr {
		background-color: var(--background);
		color: var(--text-color);
		transition: background-color var(--btn-trn-sp) var(--btn-trn-tf) 0s, color var(--btn-trn-sp) var(--btn-trn-tf) 0s;
	}
	
	[class*="clr-"] {
		color: var(--text-color);
		
		&.clr-btn {
			--text-color: var(--buttons);
		}
		
		&.clr-txt {
			--text-color: inherit;
		}
		
		&.clr-swp.selected {
			color: var(--link-hover);
		}
	}
	
	[data-role="arrows"] button {
		color: var(--link-color);
	}
	
	@media (hover: hover) and (pointer: fine) {
		
		a:is(:hover, :focus-visible),
		button:is(:hover, :focus-visible),
		[data-role="arrows"] button:is(:hover, :focus-visible) {
			color: var(--link-hover);
		}
	}
	
	select option {
	    color: var(--text);
	}
}