/* =========================================================
   FONT FACE DECLARATIONS (OPTIMIZED WITH SWAP)
   ========================================================= */

/* ---------------- INTER ---------------- */
@font-face {
	font-family: "inter-regular";
	src: url("../fonts/inter/Inter-Regular.otf") format("opentype");
	font-display: swap;
}
@font-face {
	font-family: "inter-medium";
	src: url("../fonts/inter/Inter-Medium.otf") format("opentype");
	font-display: swap;
}
@font-face {
	font-family: "inter-semibold";
	src: url("../fonts/inter/Inter-SemiBold.otf") format("opentype");
	font-display: swap;
}
@font-face {
	font-family: "inter-bold";
	src: url("../fonts/inter/Inter-Bold.otf") format("opentype");
	font-display: swap;
}
@font-face {
	font-family: "inter-light";
	src: url("../fonts/inter/Inter-Light-BETA.otf") format("opentype");
	font-display: swap;
}

/* ---------------- JOST ---------------- */
@font-face {
	font-family: "jost-regular";
	src: url("../fonts/jost/Jost-Regular.ttf") format("truetype");
	font-display: swap;
}
@font-face {
	font-family: "jost-medium";
	src: url("../fonts/jost/Jost-Medium.ttf") format("truetype");
	font-display: swap;
}
@font-face {
	font-family: "jost-semibold";
	src: url("../fonts/jost/Jost-SemiBold.ttf") format("truetype");
	font-display: swap;
}
@font-face {
	font-family: "jost-bold";
	src: url("../fonts/jost/Jost-Bold.ttf") format("truetype");
	font-display: swap;
}
@font-face {
	font-family: "jost-black";
	src: url("../fonts/jost/Jost-Black.ttf") format("truetype");
	font-display: swap;
}

/* ---------------- TOMATO ---------------- */
@font-face {
	font-family: "tomato-regular";
	src: url("../fonts/tomato/TomatoGrotesk-Regular.otf") format("opentype");
	font-display: swap;
}
@font-face {
	font-family: "tomato-medium";
	src: url("../fonts/tomato/TomatoGrotesk-Medium.otf") format("opentype");
	font-display: swap;
}
@font-face {
	font-family: "tomato-semibold";
	src: url("../fonts/tomato/TomatoGrotesk-SemiBold.otf") format("opentype");
	font-display: swap;
}
@font-face {
	font-family: "tomato-black";
	src: url("../fonts/tomato/TomatoGrotesk-Black.otf") format("opentype");
	font-display: swap;
}
@font-face {
	font-family: "tomato-bold";
	src: url("../fonts/tomato/TomatoGrotesk-Bold.otf") format("opentype");
	font-display: swap;
}

/* ---------------- TEKO ---------------- */
@font-face {
	font-family: "teko-regular";
	src: url("../fonts/teko/Teko-Regular.ttf") format("truetype");
	font-display: swap;
}
@font-face {
	font-family: "teko-medium";
	src: url("../fonts/teko/Teko-Medium.ttf") format("truetype");
	font-display: swap;
}
@font-face {
	font-family: "teko-semibold";
	src: url("../fonts/teko/Teko-SemiBold.ttf") format("truetype");
	font-display: swap;
}
@font-face {
	font-family: "teko-bold";
	src: url("../fonts/teko/Teko-Bold.ttf") format("truetype");
	font-display: swap;
}
@font-face {
	font-family: "teko-black";
	src: url("../fonts/teko/Teko-Black.ttf") format("truetype");
	font-display: swap;
}

/* =========================================================
   ROOT VARIABLES (CLEAN & SCALABLE)
   ========================================================= */

:root {
	/* Inter – Default UI */
	--font-inter-regular: "inter-regular", sans-serif;
	--font-inter-medium: "inter-medium", sans-serif;
	--font-inter-semibold: "inter-semibold", sans-serif;
	--font-inter-bold: "inter-bold", sans-serif;
	--font-inter-light: "inter-light", sans-serif;

	/* Jost – Headings */
	--font-jost-regular: "jost-regular", sans-serif;
	--font-jost-medium: "jost-medium", sans-serif;
	--font-jost-semibold: "jost-semibold", sans-serif;
	--font-jost-bold: "jost-bold", sans-serif;
	--font-jost-black: "jost-black", sans-serif;

	/* Tomato – Premium Accent */
	--font-tomato-regular: "tomato-regular", sans-serif;
	--font-tomato-medium: "tomato-medium", sans-serif;
	--font-tomato-semibold: "tomato-semibold", sans-serif;
	--font-tomato-black: "tomato-black", sans-serif;
	--font-tomato-bold: "tomato-bold", sans-serif;

	/* Teko – Display / Hero */
	--font-teko-regular: "teko-regular", sans-serif;
	--font-teko-medium: "teko-medium", sans-serif;
	--font-teko-semibold: "teko-semibold", sans-serif;
	--font-teko-bold: "teko-bold", sans-serif;
	--font-teko-black: "teko-black", sans-serif;
}

/* =========================================================
   GLOBAL BASE
   ========================================================= */



/* =========================================================
   FONT UTILITY CLASSES
   ========================================================= */

/* INTER */
.inter-regular { font-family: var(--font-inter-regular); }
.inter-medium { font-family: var(--font-inter-medium); }
.inter-semibold { font-family: var(--font-inter-semibold); }
.inter-bold { font-family: var(--font-inter-bold); }
.inter-light { font-family: var(--font-inter-light); }

/* JOST */
.jost-regular { font-family: var(--font-jost-regular); }
.jost-medium { font-family: var(--font-jost-medium); }
.jost-semibold { font-family: var(--font-jost-semibold); }
.jost-bold { font-family: var(--font-jost-bold); }
.jost-black { font-family: var(--font-jost-black); }

/* TOMATO */
.tomato-regular { font-family: var(--font-tomato-regular); }
.tomato-medium { font-family: var(--font-tomato-medium); }
.tomato-semibold { font-family: var(--font-tomato-semibold); }
.tomato-black { font-family: var(--font-tomato-black); }
.tomato-bold { font-family: var(--font-tomato-bold); }


/* TEKO */
.teko-regular { font-family: var(--font-teko-regular); }
.teko-medium { font-family: var(--font-teko-medium); }
.teko-semibold { font-family: var(--font-teko-semibold); }
.teko-bold { font-family: var(--font-teko-bold); }
.teko-black { font-family: var(--font-teko-black); }

/* =========================================================
   FONT SIZE SCALE
   ========================================================= */

.level-1 { font-size: 58px; }
.level-2-lg { font-size: 46px; }
.level-2 { font-size: 34px; }
.level-3-lg {font-size: 28px;}
.level-3 { font-size: 24px; }
.level-4 { font-size: 20px; }
.level-5 { font-size: 18px; }
.level-6 { font-size: 16px; }
.level-7 { font-size: 14px; }
.level-8 { font-size: 12px; }
.level-10 { font-size: 10px; }


/* Global Responsive Here */
@media (max-width: 1536px) {
	.level-1 {
		font-size: 50px;
	}
}

@media (max-width: 1400px) {
	.level-1 {
		font-size: 45px;
	}

	.level-2 {
		font-size: 30px;
	}

	.level-4-lg {
		font-size: 22px;
	}

	.level-4 {
		font-size: 19px;
	}

	.level-5 {
		font-size: 16px;
	}

	.level-6 {
		font-size: 14px;
	}

	.level-7 {
		font-size: 13px;
	}

}

@media (max-width: 1200px) {
	.level-1 {
		font-size: 43px;
	}

	.level-2 {
		font-size: 40px;
	}

	.level-4-lg {
		font-size: 21px;
	}

	.level-4 {
		font-size: 18px;
	}

	.level-5 {
		font-size: 15px;
	}

	.level-6 {
		font-size: 13px;
	}

	.level-7 {
		font-size: 12px;
	}
}

@media (max-width: 991px) {
	.level-1 {
		font-size: 40px;
	}

	.level-2 {
		font-size: 37px;
	}

	.level-4-lg {
		font-size: 18px;
	}

	.level-4 {
		font-size: 16px;
	}

	.level-5 {
		font-size: 14px;
	}

	.level-6 {
		font-size: 13px;
	}

	.level-7 {
		font-size: 13px;
	}

}

@media (max-width: 768px) {
	.level-1 {
		font-size: 35px;
	}

	.level-2 {
		font-size: 31px;
	}

	.level-4-lg {
		font-size: 18px;
	}

	.level-4 {
		font-size: 15px;
	}

	.level-5 {
		font-size: 13px;
	}

	.level-6 {
		font-size: 13px;
	}

	.level-7 {
		font-size: 13px;
	}

}

@media (max-width: 576px) {
	.level-1 {
		font-size: 32px;
	}

	.level-2 {
		font-size: 27px;
	}

	.level-3-sm {
		font-size: 20px;
	}

	.level-4-lg {
		font-size: 17px;
	}

	.level-4 {
		font-size: 14px;
	}

	.level-5 {
		font-size: 13px;
	}

	.level-6 {
		font-size: 13px;
	}

	.level-7 {
		font-size: 13px;
	}

}