/* Text styles on the SGP master type scale.
 * Steps, weights and tracking come from the library tokens (--sgp-text-*,
 * --sgp-weight-*, --sgp-tracking-*); see SGP-Design/design-system
 * system/foundations/typography.md. Class = t-<step>-<emphasis>[-caps].
 * Content files reference these by name. Mobile sizes are variables: on
 * phones each --type-* step drops one step down the scale (80 to 45, 45 to
 * 36, 36 to 28, 28 to 24); 24 and below keep their size. Weight never
 * changes. A "Name:" comment above a style says what the site mainly uses
 * it for; two styles sharing a name do the same job. The viewer reads these.
 * The live site's 40-odd sizes were mapped to the nearest step
 * (26 and 18 split by weight: regular to 24/16, semibold and bold to 28/20).
 */

:root {
	--type-80: var(--sgp-text-80);
	--type-45: var(--sgp-text-45);
	--type-36: var(--sgp-text-36);
	--type-28: var(--sgp-text-28);
}

@media (max-width: 767px) {

	:root {
		--type-80: var(--sgp-text-45);
		--type-45: var(--sgp-text-36);
		--type-36: var(--sgp-text-28);
		--type-28: var(--sgp-text-24);
	}
}

/* Name: Page title */
.t-80-bold {
	font: var(--sgp-weight-bold) var(--type-80) var(--sgp-font);
	letter-spacing: var(--sgp-tracking-display);
	text-transform: none;
}

/* Name: Section heading */
.t-45-regular {
	font: var(--sgp-weight-regular) var(--type-45) var(--sgp-font);
	letter-spacing: var(--sgp-tracking-display);
	text-transform: none;
}

.t-45-bold {
	font: var(--sgp-weight-bold) var(--type-45) var(--sgp-font);
	letter-spacing: var(--sgp-tracking-display);
	text-transform: none;
}

/* Name: Subsection heading */
.t-36-regular {
	font: var(--sgp-weight-regular) var(--type-36) var(--sgp-font);
	letter-spacing: 0;
	text-transform: none;
}

.t-36-bold {
	font: var(--sgp-weight-bold) var(--type-36) var(--sgp-font);
	letter-spacing: 0;
	text-transform: none;
}

.t-28-regular {
	font: var(--sgp-weight-regular) var(--type-28) var(--sgp-font);
	letter-spacing: 0;
	text-transform: none;
}

/* Name: Block heading */
.t-28-semibold {
	font: var(--sgp-weight-semibold) var(--type-28) var(--sgp-font);
	letter-spacing: 0;
	text-transform: none;
}

.t-28-bold {
	font: var(--sgp-weight-bold) var(--type-28) var(--sgp-font);
	letter-spacing: 0;
	text-transform: none;
}

/* Name: Section subheading */
.t-24-regular {
	font: var(--sgp-weight-regular) var(--sgp-text-24) var(--sgp-font);
	letter-spacing: 0;
	text-transform: none;
}

.t-24-semibold {
	font: var(--sgp-weight-semibold) var(--sgp-text-24) var(--sgp-font);
	letter-spacing: 0;
	text-transform: none;
}

.t-24-bold {
	font: var(--sgp-weight-bold) var(--sgp-text-24) var(--sgp-font);
	letter-spacing: 0;
	text-transform: none;
}

.t-22-regular {
	font: var(--sgp-weight-regular) var(--sgp-text-22) var(--sgp-font);
	letter-spacing: 0;
	text-transform: none;
}

/* Name: Intro paragraph */
.t-20-light {
	font: var(--sgp-weight-light) var(--sgp-text-20) var(--sgp-font);
	letter-spacing: 0;
	text-transform: none;
}

.t-20-medium {
	font: var(--sgp-weight-medium) var(--sgp-text-20) var(--sgp-font);
	letter-spacing: 0;
	text-transform: none;
}

/* Name: Large eyebrow */
.t-20-medium-caps {
	font: var(--sgp-weight-medium) var(--sgp-text-20) var(--sgp-font);
	letter-spacing: var(--sgp-tracking-caps);
	text-transform: uppercase;
}

/* Name: Person name */
.t-20-semibold {
	font: var(--sgp-weight-semibold) var(--sgp-text-20) var(--sgp-font);
	letter-spacing: 0;
	text-transform: none;
}

.t-20-bold {
	font: var(--sgp-weight-bold) var(--sgp-text-20) var(--sgp-font);
	letter-spacing: 0;
	text-transform: none;
}

/* Name: Body */
.t-16-regular {
	font: var(--sgp-weight-regular) var(--sgp-text-16) var(--sgp-font);
	letter-spacing: 0;
	text-transform: none;
}

.t-16-semibold {
	font: var(--sgp-weight-semibold) var(--sgp-text-16) var(--sgp-font);
	letter-spacing: 0;
	text-transform: none;
}

/* Name: Eyebrow */
.t-16-semibold-caps {
	font: var(--sgp-weight-semibold) var(--sgp-text-16) var(--sgp-font);
	letter-spacing: var(--sgp-tracking-caps);
	text-transform: uppercase;
}

/* Name: Body emphasis */
.t-16-bold {
	font: var(--sgp-weight-bold) var(--sgp-text-16) var(--sgp-font);
	letter-spacing: 0;
	text-transform: none;
}

.t-14-regular {
	font: var(--sgp-weight-regular) var(--sgp-text-14) var(--sgp-font);
	letter-spacing: 0;
	text-transform: none;
}

/* Name: Person title */
.t-14-regular-caps {
	font: var(--sgp-weight-regular) var(--sgp-text-14) var(--sgp-font);
	letter-spacing: var(--sgp-tracking-caps);
	text-transform: uppercase;
}

.t-14-semibold-caps {
	font: var(--sgp-weight-semibold) var(--sgp-text-14) var(--sgp-font);
	letter-spacing: var(--sgp-tracking-caps);
	text-transform: uppercase;
}