@import '../../styles/variables.scss';

.root {
	font-family: Manrope, Arial, Helvetica Neue, Helvetica, sans-serif;
}

.h1 {
	font-size: $font-size-h1;
	line-height: $line-height-h1;
}

.h2 {
	font-size: $font-size-extra-large-title;
	line-height: $line-height-extra-large-title;
}

.smallBody {
	font-size: $font-size-small-body;
	line-height: $line-height-small-body;
}

.regularBody {
	font-size: $font-size-regular-body;
	line-height: $line-height-regular-body;

	@include breakpoint-md {
		font-size: $font-size-medium-body;
	}
}

.mediumBody {
	font-size: $font-size-medium-body;
	line-height: $line-height-medium-body;
}

.largeBody {
	font-size: $font-size-large-body;
	line-height: $line-height-large-body;
}

.footer {
	font-size: $font-size-footer;
	line-height: $line-height-footer;

	@include breakpoint-md {
		font-size: $font-size-small-body;
	}

	a {
		color: inherit;

		&:focus,
		&:active,
		&:hover {
			color: inherit;
		}
	}
}

.superscript {
	font-size: $font-size-superscript;
	line-height: $line-height-superscript;
}

.title {
	font-size: $font-size-title;
	line-height: $line-height-title;

	@include breakpoint-md {
		font-size: $font-size-medium-body;
	}
}

.largeTitle {
	font-size: $font-size-large-title;
	line-height: $line-height-large-title;
}

.extraLargeTitle {
	font-size: $font-size-extra-large-title;
	line-height: $line-height-extra-large-title;
}

.regular {
	font-weight: 400;
}

.medium {
	font-weight: 500;
}

.semiBold {
	font-weight: 600;
}

.bold {
	font-weight: 700;
}

.extraBold {
	font-weight: 800;
}

.black {
	color: $black;
	transition: color 0.2s ease;
}

:global(.dark) .black {
	color: $off-white;
}

.gray {
	color: $grey;
}

:global(.dark) .gray {
	color: $grey-dark;
}

.white {
	color: $white;
	transition: color 0.2s ease;
}

:global(.dark) .white:not(.colorImmutable) {
	color: $black;
}

.green {
	color: $green;
}

.muted {
	color: $grey;
	transition: color 0.2s ease;
}

:global(.dark) .muted {
	color: $grey-dark;
}