/**
 * TIMi text styles — from Figma frames "fonts" and "Variables Documentation".
 *
 * Classes: .timi-h1, .timi-h1-small, .timi-h2, .timi-h3, .timi-h4,
 *          .timi-texte-m, .timi-texte-l, .timi-texte-l-bold, .timi-tag
 *
 * Breakpoints (Figma modes): 390, 840, 1440, 1920.
 */

:root {
	--timi-font-heading: var(--wp--preset--font-family--space-grotesk, "Space Grotesk", sans-serif);
	--timi-font-body: var(--wp--preset--font-family--urbanist, "Urbanist", sans-serif);
	--timi-container: 1440px;
	--timi-gutter: 32px;
	--timi-gutter-mobile: 16px;
	--timi-grid-columns: 12;
	--timi-grid-gap: 20px;
	--timi-size-title-h1: 48px;
	--timi-size-title-h1-small: 64px;
	--timi-size-title-h2: 56px;
	--timi-size-title-h3: 28px;
	--timi-size-h4: 20px;
	--timi-size-texte-m: 16px;
	--timi-size-texte-l: 20px;
	--timi-size-tag: 16px;
}

.timi-h1,
.timi-h1-small,
.timi-h2,
.timi-h3,
.timi-h4 {
	margin: 0;
	font-family: var(--timi-font-heading);
	font-weight: 700;
	letter-spacing: 0;
}

.timi-h1 {
	font-size: var(--timi-size-title-h1);
	line-height: 1.1;
}

.timi-h1-small {
	font-size: var(--timi-size-title-h1-small);
	line-height: 1.1;
}

.timi-h2 {
	font-size: var(--timi-size-title-h2);
	line-height: 1.1;
}

.timi-h3 {
	font-size: var(--timi-size-title-h3);
	line-height: 1.2;
}

.timi-h4 {
	font-size: var(--timi-size-h4);
	line-height: 1;
}

.timi-texte-m,
.timi-texte-l,
.timi-texte-l-bold,
.timi-tag {
	margin: 0;
	font-family: var(--timi-font-body);
	letter-spacing: 0;
}

.timi-texte-m {
	font-size: var(--timi-size-texte-m);
	font-weight: 400;
	line-height: 1.2;
}

.timi-texte-l {
	font-size: var(--timi-size-texte-l);
	font-weight: 400;
	line-height: 1.3;
}

.timi-texte-l-bold {
	font-size: var(--timi-size-texte-l);
	font-weight: 700;
	line-height: 1.3;
}

.timi-tag {
	font-size: var(--timi-size-tag);
	font-weight: 500;
	line-height: 1.2;
	text-transform: uppercase;
}

.timi-container {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--timi-container, 1440px);
	margin-inline: auto;
	padding-inline: var(--timi-gutter, 32px);
}

@media (max-width: 1439px) {
	:root {
		--timi-size-title-h1-small: 48px;
		--timi-size-title-h2: 48px;
	}
}

@media (max-width: 839px) {
	:root {
		--timi-size-title-h1-small: 40px;
		--timi-size-title-h2: 34px;
	}
}

@media (max-width: 781px) {
	:root {
		--timi-size-texte-l: 16px;
	}

	.timi-container {
		padding-inline: var(--timi-gutter-mobile, 16px);
	}
}