/*
 * Design tokens DOWNS.
 * Couleurs : Figma Design System > Couleurs (node 1:290), styles "primaire/*" et "secondaire/*".
 * Typo : Figma Design System > Typographie (node 345:551), styles "Text font/*" et "Button font/*".
 * Tailles mobiles : pas de maquette mobile, échelle définie par nous.
 */

:root {
	/* Couleurs primaires */
	--color-red: #e90000;
	--color-black: #13100d;
	--color-white: #ffffff;

	/* Couleurs secondaires */
	--color-grey-1: #28282d;
	--color-grey-2: #c5c5c5;
	--color-grey-3: #ededed;
	--color-blue: #004ef6;
	--color-blue-pastel: #e5edfe;

	/* Rôles */
	--color-text: var(--color-black);
	--color-bg: var(--color-white);
	--color-accent: var(--color-red);
	--color-link: var(--color-blue);

	/* Familles */
	--font-heading: "Montserrat", Arial, sans-serif;
	--font-body: "Cairo", Arial, sans-serif;

	/* Titres (Montserrat) : taille / interligne */
	--h1-size: 50px;  --h1-lh: 56px;
	--h2-size: 35px;  --h2-lh: 40px;
	--h3-size: 25px;  --h3-lh: 34px;
	--h4-size: 18px;  --h4-lh: 24px;
	--h5-size: 13px;  --h5-lh: 24px;

	/* Titre bicolore "Titre H2" (795:11087) : 35/44, 2e ligne Regular rouge */
	--h2-duo-lh: 44px;

	/* Corps (Cairo) */
	--text-size: 16px;      --text-lh: 20px;   /* B1 / B2 */
	--text-sm-size: 14px;   --text-sm-lh: 20px;  /* B3 / B4 */
	--caption-size: 12px;   --caption-lh: 16px;  /* C1 / C2 / Label */
	--caption-xs-size: 10px; --caption-xs-lh: 14px; /* C3 */
	--subtitle-size: 18px;  --subtitle-lh: 24px; /* S1 */
	--lead-size: 18px;      --lead-lh: 24px;     /* paragraphe Montserrat Regular 18/24 (homepage) */

	/* Boutons (Cairo Bold) */
	--btn-giant: 18px;  --btn-giant-lh: 24px;
	--btn-large: 16px;  --btn-large-lh: 20px;
	--btn-medium: 14px; --btn-medium-lh: 16px;
	--btn-small: 12px;  --btn-small-lh: 16px;

	/* Mise en page : contenu 1320px dans une maquette 1440px (marges 60px) */
	--container: 1320px;
	--gutter: 20px;
	--section-gap: 80px;
}

@media (min-width: 768px) {
	:root {
		--gutter: 40px;
	}
}

@media (min-width: 1280px) {
	:root {
		--gutter: 60px;
	}
}

@media (max-width: 1023px) {
	:root {
		--h1-size: 38px;  --h1-lh: 44px;
		--h2-size: 28px;  --h2-lh: 34px;  --h2-duo-lh: 36px;
		--h3-size: 22px;  --h3-lh: 30px;
		--section-gap: 64px;
	}
}

@media (max-width: 767px) {
	:root {
		--h1-size: 32px;  --h1-lh: 38px;
		--h2-size: 24px;  --h2-lh: 30px;  --h2-duo-lh: 30px;
		--h3-size: 20px;  --h3-lh: 26px;
		--h4-size: 17px;  --h4-lh: 22px;
		--lead-size: 16px; --lead-lh: 22px;
		--section-gap: 48px;
	}
}