@use 'sass:string';
@use '_pn-colors' as internal-colors;
// Typography

h1,
h2,
h3,
h4 {
	line-height: 1.1;
	font-weight: bold;
}

.pn-2xl {
	font-size: 3em;
	font-size: string.unquote('clamp(2em, 6vw, 3em)');
}

h1,
.pn-xl {
	font-size: 2em;
	font-size: string.unquote('clamp(1.85em, 5vw, 2em)');
}

h2,
.pn-l {
	font-size: 1.5em;
}

h3,
.pn-m {
	font-size: 1.25em;
}

h4,
p,
.pn-s {
	font-size: 1em;
}

p,
.pn-s {
	line-height: 1.5;
}

.pn-xs {
	font-size: 0.875em;
}

.pn-2xs,
small {
	font-size: 0.75em;
	font-size: string.unquote('max(.6em, 1.2rem)');
}

a.pn-a {
	color: internal-colors.$blue700;
	outline: none;
	border-radius: 0.8rem;
	padding: 0 0.2em;
	transition: box-shadow 0.1s;

	&:focus {
		box-shadow: 0 0 0 0.2rem internal-colors.$blue700;
	}

	&.light {
		color: internal-colors.$blue200;

		&:focus {
			box-shadow: 0 0 0 0.2rem internal-colors.$blue200;
		}
	}
}