/* ==========================================================================
   Typography System
   ========================================================================== */


/* --------------------------------------------------------------------------
   Google Fonts
   -------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');


/* --------------------------------------------------------------------------
   Base Typography
   -------------------------------------------------------------------------- */

body {

	font-family: var(--font-primary);

	font-size: var(--fs-base);

	font-weight: var(--fw-regular);

	line-height: var(--lh-body);

	color: var(--color-text);

	background-color: var(--color-background);

}


/* --------------------------------------------------------------------------
   Headings
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {

	font-family: var(--font-primary);

	font-weight: var(--fw-semibold);

	line-height: var(--lh-heading);

	letter-spacing: -0.03em;

	color: var(--color-text);

}


h1 {

	font-size: clamp(
		3rem,
		7vw,
		6rem
	);

	font-weight: var(--fw-bold);

}


h2 {

	font-size: clamp(
		2.25rem,
		5vw,
		4rem
	);

}


h3 {

	font-size: clamp(
		1.75rem,
		3vw,
		2.5rem
	);

}


h4 {

	font-size: var(--fs-xl);

}


h5 {

	font-size: var(--fs-lg);

}


h6 {

	font-size: var(--fs-md);

}


/* --------------------------------------------------------------------------
   Paragraphs
   -------------------------------------------------------------------------- */

p {

	font-size: var(--fs-base);

	line-height: var(--lh-body);

	color: var(--color-text-light);

}


/* --------------------------------------------------------------------------
   Links
   -------------------------------------------------------------------------- */

a {

	transition: var(--transition-base);

}


/* --------------------------------------------------------------------------
   Text Utilities
   -------------------------------------------------------------------------- */

.text-uppercase {

	text-transform: uppercase;

	letter-spacing: 0.15em;

}


.text-muted {

	color: var(--color-text-light);

}


.text-primary {

	color: var(--color-primary);

}


/* --------------------------------------------------------------------------
   Section Typography
   -------------------------------------------------------------------------- */


.section-label {

	display: inline-flex;

	align-items: center;

	gap: 10px;

	font-size: var(--fs-sm);

	font-weight: var(--fw-medium);

	text-transform: uppercase;

	letter-spacing: .12em;

	color: var(--color-primary);

}


.section-title {

	max-width: 900px;

	margin-top: var(--space-3);

}


/* --------------------------------------------------------------------------
   Hero Typography
   -------------------------------------------------------------------------- */


.hero-title {

	font-size: clamp(
		3.5rem,
		8vw,
		7rem
	);

	line-height: .95;

	letter-spacing: -0.06em;

}


.hero-description {

	max-width: 600px;

	font-size: var(--fs-lg);

}


/* --------------------------------------------------------------------------
   Buttons Typography
   -------------------------------------------------------------------------- */

.btn {

	font-size: var(--fs-sm);

	font-weight: var(--fw-semibold);

	letter-spacing: .02em;

}


/* --------------------------------------------------------------------------
   Code / Technical Text
   -------------------------------------------------------------------------- */

.code-text {

	font-family: var(--font-secondary);

	letter-spacing: 0;

}