/* EXTRA EXTRA LARGE */
%t-xxl {
	font-family: var(--font-primary);
	@mixin clamp font-size, 28, 76, $xxs-breakpoint, $lg-breakpoint;
	@mixin clamp line-height, 40, 104, $xxs-breakpoint, $lg-breakpoint;
	font-weight: 300;
	letter-spacing: -0.6px;
}

/* EXTRA LARGE */
%t-xl {
	font-family: var(--font-primary);
	@mixin clamp font-size, 28, 52, $xxs-breakpoint, $lg-breakpoint;
	@mixin clamp line-height, 40, 72, $xxs-breakpoint, $lg-breakpoint;
	letter-spacing: -0.6px;
	font-weight: 300;
}

/* LARGE */
%t-l {
	font-family: var(--font-primary);
	@mixin clamp font-size, 24, 46, $xxs-breakpoint, $lg-breakpoint;
	@mixin clamp line-height, 32, 62, $xxs-breakpoint, $lg-breakpoint;
	letter-spacing: -0.6px;
	font-weight: 300;
}
%t-l-medium {
	@extend %t-m;
	font-weight: 500;
}

/* MEDIUM LARGE */
%t-ml {
	font-family: var(--font-primary);
	@mixin clamp font-size, 20, 36, $xxs-breakpoint, $lg-breakpoint;
	@mixin clamp line-height, 28, 48, $xxs-breakpoint, $lg-breakpoint;
	font-weight: 300;
	letter-spacing: -0.2px;
}
%t-ml-medium {
	@extend %t-ml;
	font-weight: 500;
}

/* MEDIUM */
%t-m {
	font-family: var(--font-primary);
	@mixin clamp font-size, 18, 24, $xxs-breakpoint, $lg-breakpoint;
	@mixin clamp line-height, 26, 32, $xxs-breakpoint, $lg-breakpoint;
	letter-spacing: -0.2px;
	font-weight: 300;
}
%t-m-medium {
	@extend %t-m;
	font-weight: 500;
}

%t-m-normal {
	@extend %t-m;
	font-family: var(--font-secondary);
	@mixin clamp font-size, 18, 22, $xxs-breakpoint, $lg-breakpoint;
	@mixin clamp line-height, 23, 30, $xxs-breakpoint, $lg-breakpoint;
	letter-spacing: 0px;
}
%t-m-normal-medium {
	@extend %t-m-normal;
	font-weight: 500;
}

/* SMALL MEDIUM */
%t-sm {
	font-family: var(--font-primary);
	@mixin clamp font-size, 16, 20, $xxs-breakpoint, $lg-breakpoint;
	@mixin clamp line-height, 24, 28, $xxs-breakpoint, $lg-breakpoint;
	font-weight: 300;
}
%t-sm-medium {
	@extend %t-sm;
	font-weight: 500;
}

%t-sm-normal {
	font-family: var(--font-secondary);
	@mixin clamp font-size, 16, 20, $xxs-breakpoint, $lg-breakpoint;
	@mixin clamp line-height, 21, 28, $xxs-breakpoint, $lg-breakpoint;
	font-weight: 300;
}
%t-sm-normal-medium {
	@extend %t-sm-normal;
	font-weight: 500;
}

/* SMALL */
%t-s {
	font-family: var(--font-primary);
	@mixin clamp font-size, 14, 16, $xxs-breakpoint, $lg-breakpoint;
	@mixin clamp line-height, 19, 22, $xxs-breakpoint, $lg-breakpoint;
	font-weight: 300;
}
%t-s-medium {
	@extend %t-s;
	font-weight: 500;
}

%t-s-normal {
	font-family: var(--font-secondary);
	@mixin clamp font-size, 14, 16, $xxs-breakpoint, $lg-breakpoint;
	@mixin clamp line-height, 20, 22, $xxs-breakpoint, $lg-breakpoint;
	@mixin clamp letter-spacing, 0, -0.2, $xxs-breakpoint, $lg-breakpoint;
	font-weight: 300;
}
%t-s-normal-regular {
	@extend %t-s-normal;
	font-weight: 400;
}
%t-s-normal-medium {
	@extend %t-s-normal;
	font-weight: 500;
}

/* EXTRA SMALL */
%t-xs {
	font-family: var(--font-primary);
	@mixin clamp font-size, 12, 14, $xxs-breakpoint, $lg-breakpoint;
	@mixin clamp line-height, 18, 20, $xxs-breakpoint, $lg-breakpoint;
	font-weight: 300;
}
%t-xs-medium {
	@extend %t-xs;
	font-weight: 500;
}

%t-xs-normal {
	font-family: var(--font-secondary);
	@mixin clamp font-size, 12, 14, $xxs-breakpoint, $lg-breakpoint;
	@mixin clamp line-height, 18, 20, $xxs-breakpoint, $lg-breakpoint;
	letter-spacing: -0.2px;
	font-weight: 300;
}
%t-xs-normal-medium {
	@extend %t-xs-normal;
	font-weight: 500;
}
%t-xs-normal-uppercase {
	@extend %t-xs-normal;
	text-transform: uppercase;
	letter-spacing: 0.1px;

	@media screen and (min-width: $sm-breakpoint) {
		letter-spacing: 0px;
	}
}

/* EXTRA EXTRA SMALL */
%t-xxs-normal {
	font-family: var(--font-secondary);
	font-size: 12px;
	line-height: 18px;
	letter-spacing: 0.2px;
	text-transform: uppercase;
	font-weight: 500;
}

/* SEMANTIC */

%t-paragraph {
	@extend %t-sm-normal;
	color: $color-interface-grey-100;
}