@use '../../layout' as layout;
@use 'font-weight';

@mixin headline-xl() {
	font-size: 2.5rem;
	font-weight: 600;
	line-height: 2.75rem;

	@include layout.breakpoint(tablet) {
		font-size: 3.5rem;
		line-height: 4rem;
	}
}

@mixin headline-lg() {
	font-size: 2rem;
	font-weight: 600;
	line-height: 2.25rem;

	@include layout.breakpoint(tablet) {
		font-size: 3rem;
		line-height: 3.5rem;
	}
}

@mixin headline-md() {
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.75rem;

	@include layout.breakpoint(tablet) {
		font-size: 2rem;
		line-height: 2.5rem;
	}
}

@mixin headline-sm() {
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.5rem;

	@include layout.breakpoint(tablet) {
		font-size: 1.5rem;
		line-height: 2rem;
	}
}

@mixin body-lg() {
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 2rem;
}

@mixin body-md() {
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.75rem;
}

@mixin body-sm() {
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5rem;
}

@mixin body-xs() {
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.25rem;
}

@mixin subheading() {
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.03125rem;
	line-height: 1rem;
	text-transform: uppercase;
}

@mixin caption() {
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 400;
}