/* =========================
   FONT LOADING OPTIMIZED
   ========================= */

/* Space Grotesk */
@font-face {
	font-family: "spacegrotesk";
	font-weight: 400;
	src: url("../fonts/spacegrotesk/SpaceGrotesk-Regular.ttf");
	font-display: swap;
}

@font-face {
	font-family: "spacegrotesk";
	font-weight: 500;
	src: url("../fonts/spacegrotesk/SpaceGrotesk-Medium.ttf");
	font-display: swap;
}

@font-face {
	font-family: "spacegrotesk";
	font-weight: 600;
	src: url("../fonts/spacegrotesk/SpaceGrotesk-SemiBold.ttf");
	font-display: swap;
}

@font-face {
	font-family: "spacegrotesk";
	font-weight: 700;
	src: url("../fonts/spacegrotesk/SpaceGrotesk-Bold.ttf");
	font-display: swap;
}

/* DM Sans */
@font-face {
	font-family: "dmsans";
	font-weight: 100;
	src: url("../fonts/dmsans/DMSans-Thin.ttf");
	font-display: swap;
}

@font-face {
	font-family: "dmsans";
	font-weight: 200;
	src: url("../fonts/dmsans/DMSans-ExtraLight.ttf");
	font-display: swap;
}

@font-face {
	font-family: "dmsans";
	font-weight: 400;
	src: url("../fonts/dmsans/DMSans-Regular.ttf");
	font-display: swap;
}

@font-face {
	font-family: "dmsans";
	font-weight: 500;
	src: url("../fonts/dmsans/DMSans-Medium.ttf");
	font-display: swap;
}

@font-face {
	font-family: "dmsans";
	font-weight: 600;
	src: url("../fonts/dmsans/DMSans-SemiBold.ttf");
	font-display: swap;
}

@font-face {
	font-family: "dmsans";
	font-weight: 700;
	src: url("../fonts/dmsans/DMSans-Bold.ttf");
	font-display: swap;
}

/* Inter */
@font-face {
	font-family: "inter";
	font-weight: 400;
	src: url("../fonts/inter/Inter-Regular.otf");
	font-display: swap;
}

@font-face {
	font-family: "inter";
	font-weight: 500;
	src: url("../fonts/inter/Inter-Medium.otf");
	font-display: swap;
}

@font-face {
	font-family: "inter";
	font-weight: 600;
	src: url("../fonts/inter/Inter-SemiBold.otf");
	font-display: swap;
}

@font-face {
	font-family: "inter";
	font-weight: 700;
	src: url("../fonts/inter/Inter-Bold.otf");
	font-display: swap;
}

/* =========================
   ROOT VARIABLES
   ========================= */

:root {
	--font-space: "spacegrotesk", sans-serif;
	--font-dm: "dmsans", sans-serif;
	--font-inter: "inter", sans-serif;
}

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

/* Space Grotesk */
.primary-font,
.heading-font {
	font-family: var(--font-space);
	font-weight: 700;
}

.secondary-regular-font {
	font-family: var(--font-space);
	font-weight: 400;
}
.secondary-medium-font {
	font-family: var(--font-space);
	font-weight: 500;
}
.secondary-semibold-font {
	font-family: var(--font-space);
	font-weight: 600;
}
.secondary-bold-font {
	font-family: var(--font-space);
	font-weight: 700;
}

/* DM Sans */
.primary-regular-font,
.text-font {
	font-family: var(--font-dm);
	font-weight: 400;
}

.primary-medium-font {
	font-family: var(--font-dm);
	font-weight: 500;
}
.primary-semibold-font {
	font-family: var(--font-dm);
	font-weight: 600;
}
.primary-bold-font {
	font-family: var(--font-dm);
	font-weight: 700;
}

.primary-thin-font {
	font-family: var(--font-dm);
	font-weight: 100;
}
.primary-light-font {
	font-family: var(--font-dm);
	font-weight: 200;
}

/* Inter */
.inter-regular-font {
	font-family: var(--font-inter);
	font-weight: 400;
}
.inter-medium-font {
	font-family: var(--font-inter);
	font-weight: 500;
}
.inter-semibold-font {
	font-family: var(--font-inter);
	font-weight: 600;
}
.inter-bold-font {
	font-family: var(--font-inter);
	font-weight: 700;
}

/* =========================
   FONT SIZES (UNCHANGED)
   ========================= */

.level-1 {
	font-size: 70px;
}
.level-2-lg {
	font-size: 46px;
}
.level-2 {
	font-size: 34px;
}
.level-3-lg {
	font-size: 30px;
}
.level-3 {
	font-size: 26px;
}
.level-4 {
	font-size: 22px;
}
.level-5-lg {
	font-size: 20px;
}
.level-5 {
	font-size: 18px;
}
.level-6 {
	font-size: 16px;
}
.level-7 {
	font-size: 14px;
}
.level-8 {
	font-size: 13px;
}
.level-9 {
	font-size: 12px;
}
.level-10 {
	font-size: 10px;
}
.level-11 {
	font-size: 9px;
}