/*
Theme Name: Betheme Child
Theme URI: https://themes.muffingroup.com/betheme
Author: Muffin group
Author URI: https://muffingroup.com
Description: Child Theme for Betheme
Template: betheme
Version: 2.0.2
*/


/* Root Stylings */
:root {
	/* Font Pairings */	
	  --font-primary: "SangBleu OG Sans Regular";
	  --font-secondary: "Red Hat Display";
	  --decorative-font: "SangBleu OG Sans Regular";	
	/* Font Sizes */ /* @link https://utopia.fyi/type/calculator?c=300,16,1.15,1240,16,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */	
  --step--2: clamp(0.64rem, 0.7932rem + -0.1977vw, 0.7561rem);
  --step--1: clamp(0.8rem, 0.8918rem + -0.1184vw, 0.8696rem);
  --step-0: clamp(1rem, 1rem + 0vw, 1rem);
  --step-1: clamp(1.15rem, 1.1181rem + 0.1702vw, 1.25rem);
  --step-2: clamp(1.3225rem, 1.2459rem + 0.4085vw, 1.5625rem);
  --step-3: clamp(1.5209rem, 1.3829rem + 0.7357vw, 1.9531rem);
  --step-4: clamp(1.749rem, 1.528rem + 1.1786vw, 2.4414rem);
  --step-5: clamp(2.0114rem, 1.6793rem + 1.7709vw, 3.0518rem);
	/* Colors */
		--blue: #35455E;
		--tan: #CDAD86;
		--green: #4D835D;
		--brown: #5A4B40;
		--white: #ffffff;
		--off-white: #c9c9c9;
	
		--font-grey: oklch(0.4 0.01 0);
	
		--green-3: oklch(0.161 0.024 152);
		--green-2: oklch(0.293 0.043 152);
  		--green-1: oklch(0.424 0.063 152);
 		--green0: oklch(0.561 0.0827 152);
 		--green_1: oklch(0.687 0.101 152);
  		--green_2: oklch(0.819 0.121 152);
		--green_3: oklch(0.950 0.046 152);

		--tan-2: oklch(0.464 0.039 72.1);
		--tan-1: oklch(0.561 0.047 72.1);
		--tan0: oklch(0.766 0.064 72.1);
		--tan_1: oklch(0.853 0.047 72.1);
		--tan_2: oklch(0.950 0.015 72.1);
}

	/* Font Color Classes*/
.color-blue {color: var(--blue);}
.color-tan {color: var(--tan);}
.color-green {color: var(--green);}
.color-brown {color: var(--brown);}
.color-white {color: var(--white);}
.color-off-white {color: var(--off-white);}


	/* Custom Font Family Classes */
.font-family-primary, .font-family-primary .title {font-family: var(--font-primary), sans-serif;}
.font-family-secondary, .font-family-secondary .title {font-family: var(--font-secondary), sans-serif;}
.font-family-decorative {font-family: var(--decorative-font), serif;}
.font-family-decorative .title {font-family: var(--decorative-font), serif;}

	/* Custom Font Size Classes */
.font-size--2, .font-size--2 .title {font-size: var(--step--2) !important; line-height: 150%  !important;}
.font-size--1, .font-size--1 .title {font-size: var(--step--1) !important; line-height: 150%  !important;}
.font-size-0, .font-size-0 .title {font-size: var(--step-0) !important; line-height: 150%  !important;}
.font-size-1, .font-size-1 .title {font-size: var(--step-1) !important; line-height: 130%  !important;}
.font-size-2, .font-size-2 .title {font-size: var(--step-2) !important; line-height: 130% !important;}
.font-size-3, .font-size-3 .title {font-size: var(--step-3) !important; line-height: 140%  !important;}
.font-size-4, .font-size-4 .title {font-size: var(--step-4) !important; line-height: 140%  !important;}
.font-size-5, .font-size-5 .title {font-size: var(--step-5) !important; line-height: 140% !important;}

.tan-text {color:var(--tan); background-image: radial-gradient(at center center, var(--white) 0%, var(--white) 100%);}

	/* Custom Font Weights */
.thin-text-weight, .thin-text-weight .title, .thin-text-weight span {font-weight: 300;}
.medium-text-weight, .medium-text-weight .title, .medium-text-weight span {font-weight: 400;} 
.heavy-text-weight, .heavy-text-weight .title, .heavy-text-weight span {font-weight: 700 !important;}

	/* Custom Letter Spacing */
.thin-letter-spacing, .thin-letter-spacing .title {letter-spacing: -2px;}
.medium-letter-spacing, .medium-letter-spacing .title {letter-spacing: 0;}
.heavy-letter-spacing, .heavy-letter-spacing .title {letter-spacing: 2px;}


	/* Default UTOPIA Styles, Sizes, and everything-in-between */
h1 {
	font-size: var(--step-5); line-height: 140%;
	font-family: var(--font-secondary), sans-serif;
	color: var(--green-2);
	letter-spacing: 0px;
	font-weight: 600;
}
h2 {
	font-size: var(--step-4); line-height: 140%;
	font-family: var(--font-secondary), sans-serif;
	color: var(--green-2);
	letter-spacing: 0px;
	font-weight: 600;
}
h3 {
	font-size: var(--step-3); line-height: 140%;
	font-family: var(--font-secondary), sans-serif;
	color: var(--green-2);
	letter-spacing: 0px;
	font-weight: 600;
}
h4 {
	font-size: var(--step-2); line-height: 130%;
	font-family: var(--font-secondary), sans-serif;
	color: var(--green-2);
	letter-spacing: 0px;
	font-weight: 700;
}
h5 {
	font-size: var(--step-1); line-height: 130% ;
	font-family: var(--font-secondary), sans-serif;
	color: var(--green-2);
	letter-spacing: 0px;
	font-weight: 700;
}
h6 {
	font-size: var(--step-0); line-height: 150%;
	font-family: var(--font-secondary), sans-serif;
	color: var(--green-2);
	letter-spacing: 0px;
	font-weight: 700;
}

p.lead, p.big {
	font-size: var(--step-1) !important; line-height: 150%  !important;
	font-family: var(--font-secondary), sans-serif;
	letter-spacing: 0px;
	font-weight: 500;
	
}

body, p, span, ul li, ol li, div.desc {
	font-size: var(--step-0); line-height: 150%  !important;
	font-family: var(--font-secondary), sans-serif;
	letter-spacing: 0;
	font-weight: 500;
}

.button_label {
	font-size: var(--step-0); line-height: 150%  !important;
	font-family: var(--font-secondary), sans-serif;
	letter-spacing: 0px;
	font-weight: 600;
	
}
/* END Root Stylings */