/**
 * typography.css — Classes de rôles typographiques
 * Motmot Treks — Design System V1, section 3.
 *
 * Définit des RÔLES, pas des balises. Une <h2> peut porter
 * .t-display-section ou .t-heading-1 selon son rôle réel.
 */

/* --- Display : titres porteurs d'âme (police Dreaming Outloud Sans) --- */
.t-display-hero {
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	color: var(--text-primary);
}

.t-display-section {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	color: var(--text-primary);
}

/* --- Headings : titres structurels (police texte, semibold) --- */
.t-heading-1 {
	font-family: var(--font-text);
	font-size: var(--text-xl);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-snug);
}

.t-heading-2 {
	font-family: var(--font-text);
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-snug);
}

/* --- Body : textes de lecture --- */
.t-body-large {
	font-family: var(--font-text);
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed);
}

.t-body {
	font-family: var(--font-text);
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	max-width: var(--measure-ideal);
}

.t-body-small {
	font-family: var(--font-text);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	line-height: var(--leading-snug);
}

/* --- Eyebrow : surtitre discret (seul élément en majuscules) --- */
.t-eyebrow {
	font-family: var(--font-text);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--text-muted);
}