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

.root {
	color: $black;
	vertical-align: center;
	font-family: "Inter", sans-serif;
	&.H1-60 {
		font-style: normal;
		font-weight: 500;
		font-size: 50px;
		line-height: 61px;
	}

	&.H1-bis-40 {
		font-style: normal;
		font-weight: 500;
		font-size: 40px;
		line-height: 48px;
	}

	&.H2-30 {
		font-style: normal;
		font-weight: 500;
		font-size: 30px;
		line-height: 36px;
	}

	&.H3-24 {
		font-style: normal;
		font-weight: 600;
		font-size: 24px;
		line-height: 29px;
	}

	&.Paragraphe-semibold-18 {
		font-style: normal;
		font-weight: 600;
		font-size: 18px;
		line-height: 22px;
		letter-spacing: 0.5px;
	}

	&.Paragraphe-simple-18 {
		font-style: normal;
		font-weight: 400;
		font-size: 18px;
		line-height: 22px;
	}

	&.Paragraphe-MAJ-18 {
		font-style: normal;
		font-weight: 400;
		font-size: 18px;
		line-height: 22px;
		text-transform: uppercase;
	}

	&.Nav-header-off-18 {
		font-style: normal;
		font-weight: 400;
		font-size: 18px;
		line-height: 22px;
		letter-spacing: 0.5px;
		color: $grey;
	}

	&.Paragraphe-18-error {
		font-style: normal;
		font-weight: 400;
		font-size: 18px;
		line-height: 22px;
		letter-spacing: 0.5px;
	}

	&.Paragraphe-semibold-16 {
		font-style: normal;
		font-weight: 600;
		font-size: 16px;
		line-height: 22px;
		letter-spacing: 0.5px;
	}

	&.Nav-input-off-16 {
		font-style: normal;
		font-weight: 400;
		font-size: 16px;
		line-height: 22px;
		letter-spacing: 0.5px;
		color: $grey;
	}

	&.Paragraphe-simple-16 {
		font-style: normal;
		font-weight: 400;
		font-size: 16px;
		line-height: 22px;
		letter-spacing: 0.005em;
	}

	&.Paragraphe-16-error {
		color: $re-hover;
		font-style: normal;
		font-weight: 400;
		font-size: 16px;
		line-height: 22px;
		letter-spacing: 0.5px;
	}

	&.Caption_14 {
		font-style: normal;
		font-weight: 400;
		font-size: 14px;
		line-height: 22px;
		letter-spacing: 0.5px;
	}

	&.re-hover {
		color: $re-hover;
	}

	&.grey {
		color: $grey;
	}

	&.black {
		color: $black;
	}

	&.purple-flash {
		color: var(--purple-flash);
	}

	&.pink-flash {
		color: var(--pink-flash);
	}

	&.green-flash {
		color: var(--green-flash);
	}

	&.red-flash {
		color: var(--red-flash);
	}

	&.orange-flash {
		color: var(--orange-flash);
	}
}