body {
	color: var(--color-text);
	font-family: var(--font-latin-interface);
	font-size: var(--type-body);
	font-weight: 400;
	line-height: 1.65;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-latin-display);
	font-weight: 500;
	line-height: 1.08;
	overflow-wrap: break-word;
	text-wrap: balance;
}

h1 {
	font-size: var(--type-h1);
}

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

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

p {
	max-width: 42rem;
}

.type-display {
	font-family: var(--font-latin-display);
	font-size: var(--type-display);
	font-weight: 400;
	line-height: 1;
}

.type-body-large {
	font-size: var(--type-body-large);
	line-height: 1.5;
}

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

.type-caption,
.type-label,
.metadata {
	font-family: var(--font-latin-interface);
	font-size: var(--type-caption);
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.4;
	text-transform: uppercase;
}

.arabic,
[lang="ar"] {
	font-family: var(--font-arabic-body);
	line-height: 1.8;
	word-spacing: 0.08em;
}

.arabic-display {
	font-family: var(--font-arabic-display);
	font-size: clamp(5rem, 8vw, 7rem);
	font-weight: 500;
	line-height: 1.15;
}

[dir="rtl"] {
	text-align: right;
}

.navigation-label,
.button-label {
	font-family: var(--font-latin-interface);
	font-size: var(--type-navigation);
	font-weight: 500;
	line-height: 1.2;
}