/*
 * Typographie - DIGITALGREEN / Roannaise de l'Eau (RDE)
 * Styles typographiques de base — consomme les tokens de variables.css
 *
 * Échelle calquée sur le Design System Figma : H1-H3 (Nunito Bold) pour les
 * titres, texte courant 16px à deux usages — .body (Inter, paragraphes) et
 * .ui-text (DM Sans, éléments d'interface). Voir variables.css pour le détail
 * et les node IDs Figma sources. Mobile-first : les valeurs de :root sont les
 * tailles mobiles ("Responsive/*" dans Figma), l'override desktop se fait au
 * breakpoint ci-dessous.
 */

body {
	font-family: var(--font-family-body);
	font-size: var(--body-size);
	line-height: var(--body-line-height);
	color: var(--text-color);
}

/* ==========================================================================
   TITRES — H1, H2, H3 (Figma ne définit pas de H4/H5 malgré le nom de frame)
   ========================================================================== */

h1, .h1 {
	font-family: var(--font-family-heading);
	font-weight: 700;
	font-size: var(--h1-size);
	line-height: var(--h1-line-height);
}

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

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

/* Pas de H4/H5 dans Figma : on retombe sur H3 pour rester dans la charte
   plutôt que d'inventer une taille, tout en gardant la hiérarchie HTML
   valide (accessibilité — ne pas sauter de niveau de titre). */
h4, h5, h6, .h4, .h5 {
	font-family: var(--font-family-heading);
	font-weight: 700;
	font-size: var(--h3-size);
	line-height: var(--h3-line-height);
}

@media (min-width: 1024px) {
	h1, .h1 { font-size: var(--h1-size-desktop); line-height: var(--h1-line-height-desktop); }
	h2, .h2 { font-size: var(--h2-size-desktop); line-height: var(--h2-line-height-desktop); }
	h3, .h3,
	h4, h5, h6, .h4, .h5 { font-size: var(--h3-size-desktop); line-height: var(--h3-line-height-desktop); }
}

/* ==========================================================================
   TEXTE COURANT
   Une seule taille (16px) dans Figma, deux usages distincts — ne pas les
   confondre : .body pour l'éditorial, .ui-text pour l'interface.
   ========================================================================== */

/* "B1. Body" (Inter Regular) — paragraphes, contenu éditorial */
.body {
	font-family: var(--font-family-body);
	font-size: var(--body-size);
	line-height: var(--body-line-height);
}

/* "TC" — Texte Courant (DM Sans) — boutons, liens, tags, tableaux */
.ui-text {
	font-family: var(--font-family-ui);
	font-weight: 400;
	font-size: var(--ui-text-size);
	line-height: var(--ui-text-line-height);
}

.ui-text-bold {
	font-family: var(--font-family-ui);
	font-weight: 700;
	font-size: var(--ui-text-size);
	line-height: var(--ui-text-line-height);
}

/* "TC - Soulignement" — variante lien (Bold + souligné dans Figma) */
.ui-text-link {
	font-family: var(--font-family-ui);
	font-weight: 700;
	font-size: var(--ui-text-size);
	line-height: var(--ui-text-line-height);
	text-decoration: underline;
}

/* ==========================================================================
   Utilitaires généraux (échelle t-shirt, indépendante de la charte Figma)
   ========================================================================== */

.lead {
	font-size: var(--font-size-lg);
	font-weight: 300;
	line-height: 1.6;
}

.small {
	font-size: var(--font-size-sm);
}

.large {
	font-size: var(--font-size-lg);
}

/* Styles de texte */
.text-bold {
	font-weight: 700;
}

.text-semibold {
	font-weight: 600;
}

.text-medium {
	font-weight: 500;
}

.font-weight-light {
	font-weight: 300;
}

.text-italic {
	font-style: italic;
}

.text-uppercase {
	text-transform: uppercase;
}

.text-lowercase {
	text-transform: lowercase;
}

.text-capitalize {
	text-transform: capitalize;
}

/* Couleurs de texte */
.text-primary {
	color: var(--primary-color);
}

.text-secondary {
	color: var(--secondary-color);
}

.text-accent {
	color: var(--accent-color);
}

.text-muted {
	color: var(--text-muted);
}

.text-light {
	color: var(--text-light);
}

.text-white {
	color: #fff;
}

.text-black {
	color: #000;
}

/* Alignement */
.text-left {
	text-align: left;
}

.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

.text-justify {
	text-align: justify;
}

/* Familles de polices */
.font-heading {
	font-family: var(--font-family-heading);
}

.font-body {
	font-family: var(--font-family-body);
}

.font-ui {
	font-family: var(--font-family-ui);
}

.font-mono {
	font-family: var(--font-family-mono);
}