/*
 * Design tokens - DIGITALGREEN / Roannaise de l'Eau (RDE)
 *
 * Source de vérité : Figma "RDE01_REFONTE_SITE_WEB"
 * https://www.figma.com/design/Pi0GvefYMOk0KlIQEBTprN/RDE01_REFONTE_SITE_WEB
 * Page "🖥️ Design System" (node 2:6)
 *
 * Couleurs et typographie lues le 2026-07-20 via le Figma MCP (seat Full,
 * accès débloqué après upgrade — cf. context_project.md pour l'historique du
 * blocage sur seat "View"). Chaque bloc référence le node Figma source pour
 * pouvoir y retourner. Espacements/radius/ombres restent des valeurs
 * générique : aucune section dédiée n'existe dans la page Design System
 * (probablement définis composant par composant) — à ajuster au fil du
 * codage plutôt qu'à deviner ici.
 *
 * IMPORTANT — correction par rapport à une première lecture (structure
 * seule, sans les valeurs) : les frames Figma sont nommées "H1 - H5" et
 * "B1 - B4" mais ne documentent en réalité que H1-H3 et B1-B3, et B1-B3
 * n'est PAS une échelle de tailles (les 3 partagent 16px) mais 3 usages
 * différents du texte courant (voir plus bas). Ne pas se fier aux noms de
 * frame seuls sans avoir lu leur contenu.
 */

:root {
	/* ==========================================================================
	   COULEURS — Palette de marque (bleus primaires)
	   Figma: variables "Primaire/Bleu 1-4" (node 3:55)
	   ========================================================================== */

	--color-blue-1: #003366; /* le plus soutenu */
	--color-blue-2: #006699;
	--color-blue-3: #00CCFF;
	--color-blue-4: #66CCCC;

	/* ==========================================================================
	   COULEURS — Accents secondaires
	   Figma: variables "Secondaire/*" (node 3:55)
	   ========================================================================== */

	--color-turquoise: #009999;
	--color-violet: #660099;
	--color-rose: #CC0066;
	--color-orange: #FF9900;

	/* ==========================================================================
	   COULEURS — Neutres & texte
	   Figma: node 3:55 / 879:5162 ("Couleurs WEB")
	   ========================================================================== */

	--color-noir: #000000;
	--color-blanc: #FFFFFF;
	--color-grey-200: #E5E7EA;
	--color-grey-light: #EEEEEE; /* "gris-digital-green" dans Figma — nom ambigu, à reconfirmer si c'est un token partagé de l'agence ou propre à RDE */

	--text-primary: #131927;    /* "Text Color/text-primary-black" — couleur de texte par défaut, utilisée par tous les styles de titre/corps */
	--text-dark: #1B1F23;       /* "Primay Colors/Text Dark" (sic, faute dans Figma) — variante proche, usage non confirmé */
	--text-gray-light: #6A737D; /* texte secondaire / muted */

	/* Alias génériques consommés par layout.css / utilities.css / style.css.
	   Choix éditorial (aucune variable Figma ne s'appelle "primary/secondary/
	   accent") : à confirmer dès que le composant Bouton ou le Header sera lu
	   dans Figma — remplacer l'alias plutôt que renommer les usages. */
	--primary-color: var(--color-blue-1);
	--secondary-color: var(--color-blue-2);
	--accent-color: var(--color-orange);

	--text-color: var(--text-primary);
	--text-light: var(--color-blanc);
	--text-muted: var(--text-gray-light);
	--text-cm: #222222e0; /* non retrouvé dans Figma, conservé tel quel (utilisé nulle part pour l'instant) */

	--bg-color: var(--color-blue-1);
	--bg-light: var(--color-blanc);
	--bg-dark: var(--color-noir);
	--bg-grey: var(--color-grey-200);
	--bg-grey-2: var(--color-grey-light);

	/* Couleurs système (états de formulaire, alertes) — pas de section dédiée
	   repérée dans le Design System Figma ; probablement à retrouver dans les
	   maquettes de formulaires (contact, espace usager). Valeurs génériques
	   en attendant, à valider avant usage sur un vrai formulaire RGAA. */
	--success-color: #28A745;
	--warning-color: #FFC107;
	--error-color: #DC3545;
	--info-color: #17A2B8;

	/* ==========================================================================
	   TYPOGRAPHIE — Familles de polices
	   Confirmées via les styles de texte Figma (node 879:5633 et 879:5676) et
	   auto-hébergées dans fonts.css / assets/fonts/. Voir fonts.css pour le
	   détail des graisses chargées.
	   ========================================================================== */

	--font-family-heading: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--font-family-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--font-family-ui: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--font-family-mono: "Courier New", monospace;

	/* ==========================================================================
	   TYPOGRAPHIE — Titres H1-H3 (Nunito Bold)
	   Figma ne définit que 3 niveaux de titre malgré le nom de frame "H1-H5".
	   Deux jeux de valeurs existent dans Figma : "Desktop/*" et "Responsive/*"
	   (mobile). Valeurs ci-dessous = mobile par défaut (mobile-first) ; le
	   passage au jeu desktop se fait dans typography.css via
	   @media (min-width: 1024px) — seuil provisoire (Figma ne précise pas de
	   palier tablette), à ajuster si besoin en regardant les maquettes.
	   1rem = 10px (cf. reset.css, html { font-size: 62.5% }).
	   ========================================================================== */

	--h1-size: 3.5rem;              /* Responsive/H1 : 35px */
	--h1-line-height: 1.09;         /* 38/35 */
	--h1-size-desktop: 4rem;        /* Desktop/H1 - Page Secondaire : 40px */
	--h1-line-height-desktop: normal; /* Figma: "Auto" */

	--h2-size: 2.8rem;              /* Responsive/H2 : 28px */
	--h2-line-height: 1.14;         /* 32/28 */
	--h2-size-desktop: 3rem;        /* Desktop/H2 : 30px */
	--h2-line-height-desktop: 1.13; /* 34/30 */

	--h3-size: 2.2rem;              /* Responsive/H3 : 22px */
	--h3-line-height: 1.09;         /* 24/22 */
	--h3-size-desktop: 2.4rem;      /* Desktop/H3 : 24px */
	--h3-line-height-desktop: 1.17; /* 28/24 */

	/* ==========================================================================
	   TYPOGRAPHIE — Texte courant
	   Une seule taille (16px) dans tout le système, à deux usages distincts :
	   - "B1. Body" (Inter Regular) : paragraphes / contenu éditorial
	   - "TC" = Texte Courant (DM Sans) : éléments d'interface (boutons, tags,
	     liens, cellules de tableau), avec variantes Regular / Bold / Souligné
	   Figma: node 879:5162 / 879:5676 / 879:5794. Même taille en desktop et
	   mobile (pas de jeu "Responsive" séparé trouvé pour le texte courant).
	   ========================================================================== */

	--body-size: 1.6rem;      /* B1. Body — Inter Regular, 16px */
	--body-line-height: 1.5;  /* 24/16 */

	--ui-text-size: 1.6rem;     /* TC — DM Sans, 16px */
	--ui-text-line-height: normal; /* Figma: "Auto" */

	/* Ancienne échelle générique (t-shirt sizes), conservée pour les endroits
	   du thème qui ne correspondent à aucun token ci-dessus (ex: petits
	   libellés, badges, mentions légales). */
	--font-size-xs1: 1.2rem;
	--font-size-xs: 1.4rem;
	--font-size-sm: 1.6rem;
	--font-size-base: 1.8rem;
	--font-size-lg: 2rem;
	--font-size-xl: 2.4rem;
	--font-size-2xl: 2.8rem;
	--font-size-3xl: 3.2rem;

	/* ==========================================================================
	   ESPACEMENTS, LAYOUT, RADIUS, OMBRES
	   Aucune section dédiée trouvée dans la page Design System Figma — ces
	   tokens semblent définis composant par composant plutôt que globalement.
	   Échelle générique ci-dessous en attendant ; à affiner (et si besoin
	   remplacer par les valeurs réelles) au fil du codage des composants.
	   ========================================================================== */

	--spacing-xs: 8px;
	--spacing-sm: 16px;
	--spacing-md: 24px;
	--spacing-lg: 40px;
	--spacing-xl: 64px;

	/* Largeurs des maquettes Figma (context_project.md) : mobile 390px,
	   desktop 1440px. --container-max-width borne la largeur du contenu sur
	   grand écran ; le "5%" de padding est un choix d'implémentation, pas une
	   valeur Figma confirmée. */
	--container-max-width: 1440px;
	--container-padding: 5%;

	--border-radius-sm: 4px;
	--border-radius-md: 8px;
	--border-radius-lg: 16px;
	--border-radius-xl: 24px;

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

	/* Transitions — convention interne, pas issue de Figma. */
	--transition-fast: 0.15s ease;
	--transition-base: 0.3s ease;
	--transition-slow: 0.5s ease;
}