/**
 * TAF 2026 — typography tokens + type scale utilities
 * Prefer .text-* classes (or these vars) before one-off font sizes.
 */

:root {
	--taf-font: "interstate", "Interstate", system-ui, sans-serif;

	/* Weights */
	--font-light: 300;
	--font-regular: 400;
	--font-bold: 700;

	/* Scale (Figma: New/h2, New/h3, Web/p*, UI/*, New/Label) */
	--text-display-size: clamp(2rem, 4vw, 3rem);
	--text-display-line: 1.125;

	--text-h1-size: clamp(2rem, 4vw, 3rem);
	--text-h1-line: 1.125;

	--text-h2-size: clamp(1.5rem, 3vw, 2rem);
	--text-h2-line: 1.2;

	--text-h3-size: 1.625rem;
	--text-h3-line: 1.3;

	--text-title-size: 1.25rem;
	--text-title-line: 1.1;

	--text-article-size: 1.375rem;
	--text-article-line: 1.27;

	--text-body-size: 1.25rem;
	--text-body-line: 1.65; /* Figma Web/p1: 20/33 */

	--text-body-sm-size: 1.125rem;
	--text-body-sm-line: 1.6;

	--text-lede-size: clamp(1.375rem, 2.5vw, 1.75rem);
	--text-lede-line: 1.35;

	--text-meta-size: 0.9375rem;
	--text-meta-line: 1.6;

	--text-ui-size: 1rem;
	--text-ui-line: 1;

	--text-label-size: 0.875rem;
	--text-label-line: 1.25;
	--text-label-tracking: 0.1em;

	--text-caption-size: 0.75rem;
	--text-caption-line: 1.5;
	--text-caption-tracking: 0.04em;
}

/* ——— Type utilities ——— */

.text-display,
.text-h1 {
	font-family: var(--taf-font);
	font-weight: var(--font-bold);
	font-size: var(--text-h1-size);
	line-height: var(--text-h1-line);
}

.text-h2 {
	font-family: var(--taf-font);
	font-weight: var(--font-bold);
	font-size: var(--text-h2-size);
	line-height: var(--text-h2-line);
}

.text-h3 {
	font-family: var(--taf-font);
	font-weight: var(--font-bold);
	font-size: var(--text-h3-size);
	line-height: var(--text-h3-line);
}

.text-title {
	font-family: var(--taf-font);
	font-weight: var(--font-bold);
	font-size: var(--text-title-size);
	line-height: var(--text-title-line);
}

.text-article {
	font-family: var(--taf-font);
	font-weight: var(--font-regular);
	font-size: var(--text-article-size);
	line-height: var(--text-article-line);
}

.text-body {
	font-family: var(--taf-font);
	font-weight: var(--font-light);
	font-size: var(--text-body-size);
	line-height: var(--text-body-line);
}

/* Global reset zeros ul; restore lists in editorial / WYSIWYG content. */
.text-body ul,
.text-body ol,
.text-body-sm ul,
.text-body-sm ol,
.single-post__content ul,
.single-post__content ol,
.about-prose ul,
.about-prose ol,
.person-profile__copy ul,
.person-profile__copy ol,
.case-study__body ul,
.case-study__body ol,
.publication__body ul,
.publication__body ol {
	margin: 0 0 1.3125rem;
	padding-left: 1.875rem;
}

.text-body ul,
.text-body-sm ul,
.single-post__content ul,
.about-prose ul,
.person-profile__copy ul,
.case-study__body ul,
.publication__body ul {
	list-style: disc;
}

.text-body ol,
.text-body-sm ol,
.single-post__content ol,
.about-prose ol,
.person-profile__copy ol,
.case-study__body ol,
.publication__body ol {
	list-style: decimal;
}

.text-body li + li,
.text-body-sm li + li,
.single-post__content li + li,
.about-prose li + li,
.person-profile__copy li + li,
.case-study__body li + li,
.publication__body li + li {
	margin-top: 0.25rem;
}

.text-body li ul,
.text-body li ol,
.text-body-sm li ul,
.text-body-sm li ol,
.single-post__content li ul,
.single-post__content li ol,
.about-prose li ul,
.about-prose li ol,
.person-profile__copy li ul,
.person-profile__copy li ol,
.case-study__body li ul,
.case-study__body li ol,
.publication__body li ul,
.publication__body li ol {
	margin: 0.35em 0 0;
}

.text-lede {
	font-family: var(--taf-font);
	font-weight: var(--font-light);
	font-size: var(--text-lede-size);
	line-height: var(--text-lede-line);
	color: var(--color-text);
}

.text-body-sm {
	font-family: var(--taf-font);
	font-weight: var(--font-light);
	font-size: var(--text-body-sm-size);
	line-height: var(--text-body-sm-line);
}

.text-meta {
	font-family: var(--taf-font);
	font-weight: var(--font-light);
	font-size: var(--text-meta-size);
	line-height: var(--text-meta-line);
}

.text-ui {
	font-family: var(--taf-font);
	font-weight: var(--font-bold);
	font-size: var(--text-ui-size);
	line-height: var(--text-ui-line);
}

.text-label {
	font-family: var(--taf-font);
	font-weight: var(--font-regular);
	font-size: var(--text-label-size);
	line-height: var(--text-label-line);
	letter-spacing: var(--text-label-tracking);
	text-transform: uppercase;
}

.text-caption {
	font-family: var(--taf-font);
	font-weight: var(--font-light);
	font-size: var(--text-caption-size);
	line-height: var(--text-caption-line);
	letter-spacing: var(--text-caption-tracking);
	text-transform: uppercase;
}