/**
 * SDC Theme Typography Primitives
 *
 * Primitive text classes based on Figma typography specifications
 *
 * @package SDC_Theme
 * @since 0.1.0
 */

/* ========================================
   HEADING PRIMITIVES
   ======================================== */

.text-h1 {
	font-family: var(--font-primary);
	font-size: var(--text-h1);
	font-weight: var(--font-weight-bold);
	font-style: var(--font-style-normal);
	line-height: var(--leading-normal);
	letter-spacing: var(--tracking-tight);
	text-transform: none;
}

.text-h2 {
	font-family: var(--font-primary);
	font-size: var(--text-h2);
	font-weight: var(--font-weight-bold);
	font-style: var(--font-style-normal);
	line-height: var(--leading-normal);
	letter-spacing: var(--tracking-normal);
	text-transform: none;
}

.text-h3 {
	font-family: var(--font-primary);
	font-size: var(--text-h3);
	font-weight: var(--font-weight-bold);
	font-style: var(--font-style-normal);
	line-height: var(--leading-normal);
	letter-spacing: var(--tracking-normal);
	text-transform: none;
}

.text-h4 {
	font-family: var(--font-primary);
	font-size: var(--text-h4);
	font-weight: var(--font-weight-bold);
	font-style: var(--font-style-normal);
	line-height: var(--leading-normal);
	letter-spacing: var(--tracking-normal);
	text-transform: none;
}

.text-h5 {
	font-family: var(--font-primary);
	font-size: var(--text-h5);
	font-weight: var(--font-weight-bold);
	font-style: var(--font-style-normal);
	line-height: var(--leading-normal);
	letter-spacing: var(--tracking-normal);
	text-transform: none;
}

.text-h6 {
	font-family: var(--font-primary);
	font-size: var(--text-h6);
	font-weight: var(--font-weight-demi-bold);
	font-style: var(--font-style-normal);
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}

/* ========================================
   BODY TEXT PRIMITIVES
   ======================================== */

.text-body {
	font-family: var(--font-primary);
	font-size: var(--text-body);
	font-weight: var(--font-weight-regular);
	font-style: var(--font-style-normal);
	line-height: var(--leading-loose);
	letter-spacing: var(--tracking-normal);
}

.text-body-medium {
	font-family: var(--font-primary);
	font-size: var(--text-body-medium);
	font-weight: var(--font-weight-regular);
	font-style: var(--font-style-normal);
	line-height: var(--leading-loose);
	letter-spacing: var(--tracking-normal);
}

/* ========================================
   LABEL & CODE PRIMITIVES
   ======================================== */

.text-label {
	font-family: var(--font-primary);
	font-size: var(--text-label);
	font-weight: var(--font-weight-medium);
	font-style: var(--font-style-normal);
	line-height: var(--leading-normal);
	letter-spacing: var(--tracking-normal);
}

.text-code {
	font-family: var(--font-code);
	font-size: var(--text-code);
	font-weight: var(--font-weight-regular);
	font-style: var(--font-style-normal);
	line-height: var(--leading-normal);
	letter-spacing: var(--tracking-normal);
}

/* ========================================
   BUTTON TEXT PRIMITIVE
   ======================================== */

.text-button {
	font-family: var(--font-primary);
	font-size: var(--text-button);
	font-weight: var(--font-weight-bold);
	font-style: var(--font-style-normal);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-normal);
}

/* ========================================
   RESPONSIVE HEADINGS
   Using fluid typography via clamp()
   ======================================== */

@media (max-width: 1024px) {
	.text-h1 {
		font-size: clamp(48px, 8vw, var(--text-h1));
	}

	.text-h2 {
		font-size: clamp(32px, 5vw, var(--text-h2));
	}

	.text-h3 {
		font-size: clamp(24px, 4vw, var(--text-h3));
	}

	.text-h4 {
		font-size: clamp(20px, 3vw, var(--text-h4));
	}
}

@media (max-width: 768px) {
	.text-h1 {
		font-size: clamp(36px, 10vw, 48px);
	}

	.text-h2 {
		font-size: clamp(28px, 8vw, 32px);
	}

	.text-h3 {
		font-size: clamp(22px, 6vw, 24px);
	}

	.text-h4 {
		font-size: clamp(18px, 5vw, 20px);
	}

	.text-h5,
	.text-h6 {
		font-size: var(--text-h5);
	}
}