/**
 * Global typography system.
 */

@font-face {
	font-family: "Inter";
	src: url("../../fonts/inter-variable.woff2") format("woff2");
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
}

@font-face {
	font-family: "Barlow Condensed";
	src: url("../../fonts/barlow-condensed-bold.woff2") format("woff2");
	font-style: normal;
	font-weight: 700;
	font-display: swap;
}

@font-face {
	font-family: "Barlow Condensed";
	src: url("../../fonts/barlow-condensed-extrabold.woff2") format("woff2");
	font-style: normal;
	font-weight: 800;
	font-display: swap;
}

:root {
	--font-heading: "Barlow Condensed", "Arial Narrow", sans-serif;
	--font-body: "Inter", Arial, sans-serif;

	--font-size-xs: 0.75rem;
	--font-size-sm: 0.875rem;
	--font-size-body: 1rem;
	--font-size-lead: clamp(1.125rem, 1.4vw, 1.25rem);
	--font-size-h4: clamp(1.25rem, 2vw, 1.5rem);
	--font-size-h3: clamp(1.5rem, 2.8vw, 2rem);
	--font-size-h2: clamp(2.25rem, 5vw, 4rem);
	--font-size-h1: clamp(3rem, 8vw, 6.5rem);

	--line-height-tight: 0.95;
	--line-height-heading: 1.05;
	--line-height-body: 1.65;

	--letter-spacing-tight: -0.02em;
	--letter-spacing-uppercase: 0.04em;
	--letter-spacing-eyebrow: 0.14em;
}

body {
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	font-weight: 400;
	line-height: var(--line-height-body);
	font-optical-sizing: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-block: 0;
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-weight: 800;
	line-height: var(--line-height-heading);
	letter-spacing: var(--letter-spacing-tight);
	text-wrap: balance;
}

h1 {
	font-size: var(--font-size-h1);
	line-height: var(--line-height-tight);
}

h2 {
	font-size: var(--font-size-h2);
}

h3 {
	font-size: var(--font-size-h3);
}

h4 {
	font-size: var(--font-size-h4);
}

p {
	margin-block: 0;
}

a {
	color: inherit;
}

strong,
b {
	font-weight: 700;
}

.heading-uppercase {
	letter-spacing: var(--letter-spacing-uppercase);
	text-transform: uppercase;
}

.eyebrow {
	color: var(--color-accent-strong);
	font-size: var(--font-size-xs);
	font-weight: 700;
	letter-spacing: var(--letter-spacing-eyebrow);
	line-height: 1.3;
	text-transform: uppercase;
}

.text-lead {
	font-size: var(--font-size-lead);
	line-height: 1.55;
}

.text-small {
	font-size: var(--font-size-sm);
}