lecoffre-front/src/front/Components/DesignSystem/Typography/classes.module.scss

@import "@Themes/constants.scss";
@import "@Themes/modes.scss";

.root {
	vertical-align: center;
	font-family: var(--font-text-family);

	color: var(--data-color, var(--color-neutral-950));

	//Displays
	&.display-large {
		font-style: normal;
		font-weight: 600;
		font-size: 50px;
		line-height: 75px;
		letter-spacing: -0.8px;

		@media (max-width: $screen-m) {
			font-size: 48px;
			line-height: 72px;
		}
	}
	&.display-medium {
		font-style: normal;
		font-weight: 600;
		font-size: 48px;
		line-height: 72px;
		letter-spacing: -0.8px;

		@media (max-width: $screen-m) {
			font-size: 48px;
			line-height: 72px;
		}
	}
	&.display-small {
		font-style: normal;
		font-weight: 600;
		font-size: 44px;
		line-height: 66px;
		letter-spacing: -0.8px;

		@media (max-width: $screen-m) {
			font-size: 48px;
			line-height: 72px;
		}
	}

	//Titles
	&.title-h1 {
		font-style: normal;
		font-weight: 600;
		font-size: 40px;
		line-height: 60px;
		letter-spacing: -0.8px;
	}
	&.title-h2 {
		font-style: normal;
		font-weight: 400;
		font-size: 36px;
		line-height: 54px;
		letter-spacing: -0.8px;
	}
	&.title-h3 {
		font-style: normal;
		font-weight: 300;
		font-size: 32px;
		line-height: 48px;
		letter-spacing: -0.8px;
	}
	&.title-h4 {
		font-style: normal;
		font-weight: 600;
		font-size: 28px;
		line-height: 42px;
		letter-spacing: -0.8px;
	}
	&.title-h5 {
		font-style: normal;
		font-weight: 400;
		font-size: 24px;
		line-height: 36px;
		letter-spacing: -0.8px;
	}
	&.title-h6 {
		font-style: normal;
		font-weight: 400;
		font-size: 20px;
		line-height: 30px;
		letter-spacing: -0.8px;
	}

	//Text large
	&.text-lg-bold {
		font-style: normal;
		font-weight: 700;
		font-size: 18px;
		line-height: 27px;
		letter-spacing: 0.5%;
	}
	&.text-lg-semibold {
		font-style: normal;
		font-weight: 600;
		font-size: 18px;
		line-height: 27px;
		letter-spacing: 0.5%;
	}
	&.text-lg-regular {
		font-style: normal;
		font-weight: 400;
		font-size: 18px;
		line-height: 27px;
		letter-spacing: 0.5%;
	}
	&.text-lg-uppercase {
		font-style: normal;
		font-weight: 400;
		font-size: 18px;
		line-height: 27px;
		letter-spacing: 0.5%;
		text-transform: uppercase;
	}
	&.text-lg-light {
		font-style: normal;
		font-weight: 300;
		font-size: 18px;
		line-height: 27px;
		letter-spacing: 0.5%;
	}

	//Text medium
	&.text-md-bold {
		font-style: normal;
		font-weight: 700;
		font-size: 16px;
		line-height: 24px;
		letter-spacing: 0.5%;
	}
	&.text-md-semibold {
		font-style: normal;
		font-weight: 600;
		font-size: 16px;
		line-height: 24px;
		letter-spacing: 0.5%;
	}
	&.text-md-regular {
		font-style: normal;
		font-weight: 400;
		font-size: 16px;
		line-height: 24px;
		letter-spacing: 0.5%;
	}
	&.text-md-uppercase {
		font-style: normal;
		font-weight: 400;
		font-size: 16px;
		line-height: 24px;
		letter-spacing: 0.5%;
		text-transform: uppercase;
	}
	&.text-md-light {
		font-style: normal;
		font-weight: 300;
		font-size: 16px;
		line-height: 24px;
		letter-spacing: 0.5%;
	}

	//Text small
	&.text-sm-bold {
		font-style: normal;
		font-weight: 700;
		font-size: 14px;
		line-height: 21px;
		letter-spacing: 0.5%;
	}
	&.text-sm-semibold {
		font-style: normal;
		font-weight: 600;
		font-size: 14px;
		line-height: 21px;
		letter-spacing: 0.5%;
	}
	&.text-sm-regular {
		font-style: normal;
		font-weight: 400;
		font-size: 14px;
		line-height: 21px;
		letter-spacing: 0.5%;
	}
	&.text-sm-uppercase {
		font-style: normal;
		font-weight: 400;
		font-size: 14px;
		line-height: 21px;
		letter-spacing: 0.5%;
		text-transform: uppercase;
	}
	&.text-sm-light {
		font-style: normal;
		font-weight: 300;
		font-size: 14px;
		line-height: 21px;
		letter-spacing: 0.5%;
	}

	//Text extra small
	&.text-xs-bold {
		font-style: normal;
		font-weight: 700;
		font-size: 12px;
		line-height: 18px;
		letter-spacing: 0.5%;
	}
	&.text-xs-semibold {
		font-style: normal;
		font-weight: 600;
		font-size: 12px;
		line-height: 18px;
		letter-spacing: 0.5%;
	}
	&.text-xs-regular {
		font-style: normal;
		font-weight: 400;
		font-size: 12px;
		line-height: 18px;
		letter-spacing: 0.5%;
	}
	&.text-xs-uppercase {
		font-style: normal;
		font-weight: 400;
		font-size: 12px;
		line-height: 18px;
		letter-spacing: 0.5%;
		text-transform: uppercase;
	}
	&.text-xs-light {
		font-style: normal;
		font-weight: 300;
		font-size: 12px;
		line-height: 18px;
		letter-spacing: 0.5%;
	}

	//Caption
	&.caption-bold {
		font-style: normal;
		font-weight: 700;
		font-size: 10px;
		line-height: 15px;
		letter-spacing: -0.8px;
	}
	&.caption-semibold {
		font-style: normal;
		font-weight: 600;
		font-size: 10px;
		line-height: 15px;
		letter-spacing: -0.8px;
	}
	&.caption-regular {
		font-style: normal;
		font-weight: 400;
		font-size: 10px;
		line-height: 15px;
		letter-spacing: -0.8px;
	}
	&.caption-uppercase {
		font-style: normal;
		font-weight: 400;
		font-size: 10px;
		line-height: 15px;
		letter-spacing: -0.8px;
		text-transform: uppercase;
	}
	&.caption-light {
		font-style: normal;
		font-weight: 300;
		font-size: 10px;
		line-height: 15px;
		letter-spacing: -0.8px;
	}

	&.italic {
		font-style: italic;
	}
}