_hublib-web/packages/tach-typography/styles/typography-vars.scss

// Medium styles
@mixin AppMediumLargeTitle {
	/* app/Medium/LargeTitle */
	font-family: Inter;
	font-size: 38px;
	font-style: normal;
	font-weight: 500;
	line-height: 46px; /* 121.053% */
}
@mixin AppMediumTitle1 {
	/* app/Medium/Title1 */
	font-family: Inter;
	font-size: 28px;
	font-style: normal;
	font-weight: 500;
	line-height: 34px; /* 121.429% */
}
@mixin AppMediumTitle2 {
	/* app/Medium/Title2 */
	font-family: Inter;
	font-size: 22px;
	font-style: normal;
	font-weight: 500;
	line-height: 28px; /* 127.273% */
}

@mixin AppMediumTitle3 {
	/* app/Medium/Title3 */
	font-family: Inter;
	font-size: 20px;
	font-style: normal;
	font-weight: 500;
	line-height: 26px; /* 130% */
}
@mixin AppMediumHeadline {
	/* app/Medium/Headline */
	font-family: Inter;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px; /* 150% */
}
@mixin AppMediumBody {
	/* app/Medium/Body */
	font-family: Inter;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 20px; /* 142.857% */
}
@mixin AppMediumInputs {
	/* app/Medium/Inputs */
	font-family: Inter;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px; /* 171.429% */
}
@mixin AppMediumSubheadline {
	/* app/Medium/Subheadline */
	font-family: Inter;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 18px; /* 128.571% */
}
@mixin AppMediumFootnoteUnderline {
	/* app/Medium/Footnote Underline */
	font-family: Inter;
	font-size: 13px;
	font-style: normal;
	font-weight: 500;
	line-height: 18px;
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-skip-ink: none;
	text-decoration-thickness: auto;
	text-underline-offset: auto;
	text-underline-position: from-font;
}
@mixin AppMediumFootnote {
	/* app/Medium/footnote */
	font-family: Inter;
	font-size: 13px;
	font-style: normal;
	font-weight: 500;
	line-height: 18px; /* 138.462% */
}
@mixin AppMediumCaption {
	/* app/Medium/Caption */
	font-family: Inter;
	font-size: 10px;
	font-style: normal;
	font-weight: 500;
	line-height: 12px; /* 120% */
	text-transform: uppercase;
}
@mixin AppMediumCaption2 {
	/* app/Medium/Caption2 */
	font-family: Inter;
	font-size: 8px;
	font-style: normal;
	font-weight: 500;
	line-height: 10px; /* 125% */
	text-transform: uppercase;
}

@mixin AppMediumSubtext {
	text-align: center;
	font-family: Inter;
	font-size: 11px;
	font-style: normal;
	font-weight: 400;
	line-height: 17px; /* 154.545% */
}

@mixin AppMediumSubtextUnderline {
	font-family: Inter;
	font-size: 11px;
	font-style: normal;
	font-weight: 400;
	line-height: 17px;
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-skip-ink: none;
	text-decoration-thickness: auto;
	text-underline-offset: auto;
	text-underline-position: from-font;
}

// Bold Styles
@mixin AppBoldLargeTitle {
	@include AppMediumLargeTitle;
	font-weight: 700;
}
@mixin AppBoldTitle1 {
	@include AppMediumTitle1;
	font-weight: 700;
}
@mixin AppBoldTitle2 {
	@include AppMediumTitle2;
	font-weight: 700;
}
@mixin AppBoldTitle3 {
	@include AppMediumTitle3;
	font-weight: 700;
}
@mixin AppBoldHeadline {
	@include AppMediumHeadline;
	font-weight: 700;
}
@mixin AppBoldBody {
	@include AppMediumBody;
	font-weight: 700;
}
@mixin AppBoldInputs {
	@include AppBoldInputs;
	font-weight: 700;
}
@mixin AppBoldSubheadline {
	@include AppMediumSubheadline;
	font-weight: 700;
}
@mixin AppBoldFootnoteUnderline {
	@include AppMediumFootnoteUnderline;
	font-weight: 700;
}
@mixin AppBoldFootnote {
	@include AppMediumFootnote;
	font-weight: 700;
}
@mixin AppBoldCaption {
	@include AppMediumCaption;
	font-weight: 700;
}
@mixin AppBoldCaption2 {
	@include AppMediumCaption2;
	font-weight: 700;
}

// Accent Styles
@mixin AccentLargeTtl {
	font-family: Unbounded;
	font-size: 38px;
	font-style: normal;
	font-weight: 700;
	line-height: 52px; /* 136.842% */

	@media (max-width: 575px) {
		@include AccentFontH1;
	}
}
@mixin AccentFontH1 {
	/* Accent font/h1 */
	font-family: Unbounded;
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: 30px; /* 150% */
}
@mixin AccentFontH2 {
	/* Accent font/h2 */
	font-family: Unbounded;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 24px; /* 150% */
}
@mixin AccentFontSubttl {
	/* Accent font/subttl */
	font-family: Unbounded;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 22px; /* 157.143% */
}
@mixin AccentFontSubttl2 {
	/* Accent font/subttl2 */
	font-family: Unbounded;
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	line-height: 20px; /* 166.667% */
}
@mixin AccentFontCaption {
	/* Accent font/caption */
	font-family: Unbounded;
	font-size: 9px;
	font-style: normal;
	font-weight: 700;
	line-height: 12px; /* 133.333% */
	text-transform: uppercase;
}
@mixin AccentFontCaption2 {
	/* Accent font/caption2 */
	font-family: Unbounded;
	font-size: 7px;
	font-style: normal;
	font-weight: 700;
	line-height: 10px; /* 142.857% */
	text-transform: uppercase;
}
@mixin AccentFontRegularM {
	/* accent font/regularM */
	font-family: Unbounded;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 22px; /* 157.143% */

	@media (max-width: 575px) {
		@include AccentFontRegularS;
	}
}
@mixin AccentFontRegularS {
	/* accent font/regularS */
	font-family: Unbounded;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px; /* 166.667% */
}