/*
 * MOOV Design System 1.1.0 - Echelle typographique
 *
 * Source : depot moov-africa-ds, commit 9d133cd
 *   - variables : packages/tokens-pipeline/versions/1.1.0.json (typography)
 *   - classes   : packages/css/typography.css
 *
 * Complete le UI Kit front-end, qui fournit les polices (--font-heading,
 * --font-body, --font-mono) et les couleurs mais pas cette echelle. Aucun nom
 * ci-dessous n'existe dans le UI Kit : pas de conflit.
 *
 * A retirer quand le UI Kit integrera l'echelle typographique du DS.
 */

:root {
	--display-xl-size: 120px;
	--display-xl-lh: 108px;
	--display-xl-weight: 300;
	--display-1-size: 96px;
	--display-1-lh: 96px;
	--display-1-weight: 300;
	--display-2-size: 60px;
	--display-2-lh: 60px;
	--display-2-weight: 300;
	--h1-size: 48px;
	--h1-lh: 50px;
	--h1-weight: 400;
	--h2-size: 34px;
	--h2-lh: 40px;
	--h2-weight: 500;
	--h3-size: 24px;
	--h3-lh: 32px;
	--h3-weight: 500;
	--h4-size: 20px;
	--h4-lh: 32px;
	--h4-weight: 500;
	--subtitle-1-size: 16px;
	--subtitle-1-lh: 28px;
	--subtitle-1-weight: 400;
	--subtitle-2-size: 14px;
	--subtitle-2-lh: 24px;
	--subtitle-2-weight: 500;
	--body-1-size: 16px;
	--body-1-lh: 24px;
	--body-1-weight: 400;
	--body-2-size: 14px;
	--body-2-lh: 20px;
	--body-2-weight: 400;
	--caption-size: 12px;
	--caption-lh: 20px;
	--caption-weight: 400;
	--button-size: 14px;
	--button-lh: 14px;
	--button-weight: 600;
	--eyebrow-size: 11px;
	--eyebrow-lh: 16px;
	--eyebrow-weight: 600;

	/* Couleurs de texte du DS, sous leur nom UI Kit */

	--fg: var(--text-strong);
	--fg-muted: var(--text-body);
}

.moov-display-xl {
	font-family: var(--font-heading);
	font-size: var(--display-xl-size);
	font-weight: var(--display-xl-weight);
	letter-spacing: -0.03em;
	line-height: var(--display-xl-lh);
}

.moov-display-1 {
	font-family: var(--font-heading);
	font-size: var(--display-1-size);
	font-weight: var(--display-1-weight);
	letter-spacing: -0.02em;
	line-height: var(--display-1-lh);
}

.moov-display-2 {
	font-family: var(--font-heading);
	font-size: var(--display-2-size);
	font-weight: var(--display-2-weight);
	letter-spacing: -0.015em;
	line-height: var(--display-2-lh);
}

.moov-h1,
h1.moov {
	font-family: var(--font-heading);
	font-size: var(--h1-size);
	font-weight: var(--h1-weight);
	letter-spacing: -0.01em;
	line-height: var(--h1-lh);
}

.moov-h2,
h2.moov {
	font-family: var(--font-heading);
	font-size: var(--h2-size);
	font-weight: var(--h2-weight);
	line-height: var(--h2-lh);
}

.moov-h3,
h3.moov {
	font-family: var(--font-heading);
	font-size: var(--h3-size);
	font-weight: var(--h3-weight);
	line-height: var(--h3-lh);
}

.moov-h4,
h4.moov {
	font-family: var(--font-heading);
	font-size: var(--h4-size);
	font-weight: var(--h4-weight);
	line-height: var(--h4-lh);
}

.moov-subtitle-1 {
	font-family: var(--font-body);
	font-size: var(--subtitle-1-size);
	font-weight: var(--subtitle-1-weight);
	line-height: var(--subtitle-1-lh);
}

.moov-subtitle-2 {
	font-family: var(--font-body);
	font-size: var(--subtitle-2-size);
	font-weight: var(--subtitle-2-weight);
	line-height: var(--subtitle-2-lh);
}

.moov-body-1,
p.moov {
	font-family: var(--font-body);
	font-size: var(--body-1-size);
	font-weight: var(--body-1-weight);
	line-height: var(--body-1-lh);
}

.moov-body-2 {
	font-family: var(--font-body);
	font-size: var(--body-2-size);
	font-weight: var(--body-2-weight);
	line-height: var(--body-2-lh);
}

.moov-caption {
	color: var(--fg-muted);
	font-family: var(--font-body);
	font-size: var(--caption-size);
	font-weight: var(--caption-weight);
	line-height: var(--caption-lh);
}

.moov-eyebrow {
	color: var(--fg-muted);
	font-family: var(--font-body);
	font-size: var(--eyebrow-size);
	font-weight: var(--eyebrow-weight);
	letter-spacing: 0.12em;
	line-height: var(--eyebrow-lh);
	text-transform: uppercase;
}

/*
 * Variante orange du surtitre, utilisee par la maquette (sections "Nos bons
 * plans"...). Absente du DS 1.1.0 : a faire valider par l'equipe design.
 */

.moov-eyebrow--accent {
	color: var(--secondary-500);
}

.moov-button-label {
	font-family: var(--font-body);
	font-size: var(--button-size);
	font-weight: var(--button-weight);
	letter-spacing: 0.02em;
	line-height: var(--button-lh);
}

.moov-mono,
code.moov,
pre.moov {
	font-family: var(--font-mono);
	font-size: 14px;
	line-height: 20px;
}

/*
 * Styles de base des titres : un <h2> pose dans l'editeur prend
 * automatiquement le style h2 du DS, sans classe a saisir.
 *
 * Remplace le CSS personnalise du site (stocke en base, perdu a chaque
 * recreation de l'instance et absent chez les autres developpeurs).
 *
 * Le theme Classic impose aux titres sa propre graisse et son interligne :
 * ces regles, chargees apres lui, reprennent la main.
 */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-heading);
}

h1 {
	font-size: var(--h1-size);
	font-weight: var(--h1-weight);
	line-height: var(--h1-lh);
}

h2 {
	font-size: var(--h2-size);
	font-weight: var(--h2-weight);
	line-height: var(--h2-lh);
}

h3 {
	font-size: var(--h3-size);
	font-weight: var(--h3-weight);
	line-height: var(--h3-lh);
}

h4 {
	font-size: var(--h4-size);
	font-weight: var(--h4-weight);
	line-height: var(--h4-lh);
}