/*
|--------------------------------------------------------------------------
| EventFlow Design System — Typography
| EFDS-001
|--------------------------------------------------------------------------
*/

body {
	font-family: var(--ef-font-sans);
	font-size: var(--ef-text-body);
	font-weight: var(--ef-weight-regular);
	line-height: var(--ef-line-height-body);
	letter-spacing: var(--ef-tracking-normal);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-top: 0;
	color: var(--ef-color-text);
	font-family: var(--ef-font-heading);
	font-weight: var(--ef-weight-medium);
	line-height: var(--ef-line-height-heading);
	text-wrap: balance;
}

h1 {
	font-size: var(--ef-text-h1);
	letter-spacing: var(--ef-tracking-tight);
}

h2 {
	font-size: var(--ef-text-h2);
	letter-spacing: var(--ef-tracking-tight);
}

h3 {
	font-size: var(--ef-text-h3);
	letter-spacing: var(--ef-tracking-heading);
}

h4 {
	font-size: var(--ef-text-h4);
	letter-spacing: var(--ef-tracking-heading);
}

p,
li {
	max-width: var(--ef-measure-body);
}

strong,
b {
	font-weight: var(--ef-weight-semibold);
}

/* ==========================================================
   EFDS Typography Primitives
   ========================================================== */

.ef-type-display {
	max-width: var(--ef-measure-heading);
	font-size: var(--ef-text-display);
	font-weight: var(--ef-weight-medium);
	line-height: 0.92;
	letter-spacing: var(--ef-tracking-tight);
	text-wrap: balance;
}

.ef-type-h1 {
	max-width: var(--ef-measure-heading);
	font-size: var(--ef-text-h1);
	line-height: 0.96;
	letter-spacing: var(--ef-tracking-tight);
	text-wrap: balance;
}

.ef-type-h2 {
	max-width: var(--ef-measure-heading);
	font-size: var(--ef-text-h2);
	letter-spacing: var(--ef-tracking-tight);
	text-wrap: balance;
}

.ef-type-h3 {
	font-size: var(--ef-text-h3);
	letter-spacing: var(--ef-tracking-heading);
}

.ef-type-lead {
	max-width: var(--ef-measure-lead);
	font-size: var(--ef-text-body-lg);
	line-height: 1.55;
	color: var(--ef-color-text-muted);
}

.ef-type-body {
	max-width: var(--ef-measure-body);
	font-size: var(--ef-text-body);
	line-height: var(--ef-line-height-body);
}

.ef-type-small {
	font-size: var(--ef-text-small);
	line-height: 1.5;
	color: var(--ef-color-text-muted);
}

.ef-type-system,
.ef-kicker,
.ef-label {
	font-family: var(--ef-font-mono);
	font-size: var(--ef-text-micro);
	font-weight: var(--ef-weight-regular);
	line-height: 1.4;
	letter-spacing: var(--ef-tracking-system);
	text-transform: uppercase;
}

.ef-type-system,
.ef-label {
	color: var(--ef-color-text-muted);
}

.ef-type-accent {
	color: var(--ef-color-accent);
}

.ef-type-muted {
	color: var(--ef-color-text-muted);
}

/* ==========================================================
   Editorial Content
   ========================================================== */

.ef-prose {
	max-width: var(--ef-measure-body);
}

.ef-prose > * + * {
	margin-top: var(--ef-space-4);
}

.ef-prose h2,
.ef-prose h3,
.ef-prose h4 {
	margin-top: var(--ef-space-7);
}

.ef-prose a {
	color: var(--ef-color-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.ef-prose blockquote {
	margin-inline: 0;
	padding-left: var(--ef-space-4);
	border-left: 1px solid var(--ef-color-accent);
	color: var(--ef-color-text-muted);
	font-size: var(--ef-text-body-lg);
}

/* ==========================================================
   Responsive Typography
   ========================================================== */

@media (max-width: 48rem) {

	.ef-type-display {
		line-height: 0.96;
	}

	.ef-type-lead {
		font-size: 1.0625rem;
	}
}