/*
 * Tipografia base do tema.
 *
 * Responsabilidade: aplicar a escala tipografica global sem definir estilos de
 * componentes especificos.
 */

body {
	color: var(--rnen-color-text);
	font-family: var(--rnen-font-family-base);
	font-size: var(--rnen-font-size-md);
	font-weight: var(--rnen-font-weight-regular);
	line-height: var(--rnen-line-height-base);
}

:where(h1, h2, h3, h4, h5, h6) {
	color: var(--rnen-color-text);
	font-family: var(--rnen-font-family-heading);
	font-weight: var(--rnen-font-weight-bold);
	letter-spacing: 0;
	line-height: var(--rnen-line-height-heading);
	margin-block-end: var(--rnen-space-4);
}

h1 {
	font-size: var(--rnen-font-size-5xl);
}

h2 {
	font-size: var(--rnen-font-size-4xl);
}

h3 {
	font-size: var(--rnen-font-size-3xl);
}

h4 {
	font-size: var(--rnen-font-size-2xl);
}

h5 {
	font-size: var(--rnen-font-size-xl);
}

h6 {
	font-size: var(--rnen-font-size-lg);
}

p {
	margin-block-end: var(--rnen-space-4);
}

small,
figcaption {
	color: var(--rnen-color-text-muted);
	font-size: var(--rnen-font-size-sm);
	line-height: var(--rnen-line-height-base);
}

a {
	color: var(--rnen-color-link);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
	transition: color var(--rnen-transition-base);
}

a:hover {
	color: var(--rnen-color-link-hover);
}

@media (max-width: 47.9375rem) {
	h1 {
		font-size: var(--rnen-font-size-4xl);
	}

	h2 {
		font-size: var(--rnen-font-size-3xl);
	}

	h3 {
		font-size: var(--rnen-font-size-2xl);
	}
}