/**
 * Design tokens — Forest Hills Lab
 *
 * SEULE source de vérité couleur du projet : Elementor et le plugin
 * fhl-academy consomment ces variables, ils n'en redéfinissent aucune.
 *
 * Arbitrages en vigueur (2026-09-08, validés par le client) :
 *   - typographie de labeur : DIN PRO, la police du Brand Playbook, désormais
 *     licenciée et déposée sur le site. Hanken Grotesk n'est plus qu'un repli,
 *     et reste la police du slider de la page d'accueil, réglée widget par
 *     widget dans Elementor ;
 *   - lime de marque : #B1DD00 (et non le #CCFF00 du playbook).
 * Ces deux écarts au Brand Playbook sont assumés. Voir _PROJET/03-DECISIONS.md.
 */

:root {
	/* ---- Couleurs de marque : aplats, fonds, traits, illustrations ------- */
	--fhl-living-green:   #2F674A;
	--fhl-cellular-blue:  #00E5FF;
	--fhl-lime:           #B1DD00;
	--fhl-orchid-pulse:   #FF2E9E;
	--fhl-forest-deep:    #172B21;
	--fhl-porcelain-mist: #F5EFE6;
	--fhl-white:          #FFFFFF;

	/* Ancien nom du lime, conservé pour ne rien casser. */
	--fhl-bio-lime:       var(--fhl-lime);

	/* ---- Variantes TEXTE sur fond clair (AA >= 4.5:1 sur Porcelain) ------ *
	 * Sur fond clair, cyan (1,35:1), lime (1,39:1) et magenta (2,99:1) sont
	 * illisibles. Ces variantes conservent la teinte et passent AA.
	 * NE PAS utiliser les couleurs brutes pour du texte sur fond clair.      */
	--fhl-blue-text:      #007785;  /* 4,62:1 */
	--fhl-lime-text:      #5E7500;  /* 4,57:1 */
	--fhl-orchid-text:    #D30071;  /* 4,58:1 */
	--fhl-green-text:     #2F674A;  /* 5,81:1 — passe tel quel */

	/* Sur Forest Deep, les trois couleurs vives passent AAA sans retouche :
	   cyan 9,72 · lime 9,41 · blanc 14,96. C'est l'argument du thème sombre. */

	/* ---- Neutres --------------------------------------------------------- */
	--fhl-ink:            #172B21;
	--fhl-ink-soft:       #3D4A43;
	--fhl-muted:          #6B7670;
	--fhl-surface:        #EAEAEA;
	--fhl-rule:           #D5D9D6;

	/* ---- Pastilles de filtre : dégradé rose de la maquette --------------- */
	--fhl-chip-1: #FBB9DC;
	--fhl-chip-2: #FBC2E0;
	--fhl-chip-3: #FACBE4;
	--fhl-chip-4: #F9D4E8;
	--fhl-chip-5: #F8DDEC;
	/* Texte des pastilles inactives : la maquette les met en blanc, illisible
	   sur ces roses pâles. Magenta assombri, même teinte, contraste tenu. */
	--fhl-chip-text: #A30056;

	/* ---- Typographie ------------------------------------------------------ *
	 * DIN Pro est déposée sur le site (voir fonts.css). Hanken Grotesk reste
	 * en repli, et sert encore au slider de l'accueil.                       */
	--fhl-font-body:    "DIN Pro", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
	--fhl-font-display: "Bodoni Moda", Didot, Georgia, serif;

	/* ---- Graisses ---------------------------------------------------------- *
	 * DIN Pro ne fournit NI 300 NI 500. Or l'algorithme CSS de correspondance
	 * ferait retomber un `font-weight: 500` sur 400 (Regular) et non sur 600
	 * (Medium) : le Medium demandé par la DA serait perdu silencieusement.
	 * On passe donc par des tokens, seul endroit à corriger si la police
	 * change à nouveau.                                                       */
	--fhl-w-light:   100;  /* DINPro-Light   */
	--fhl-w-regular: 400;  /* DINPro-Regular */
	--fhl-w-medium:  600;  /* DINPro-Medium  */
	--fhl-w-bold:    700;  /* DINPro-Bold    */
	--fhl-w-black:   900;  /* DINPro-Black   */

	/* ---- Échelle typographique (relevée sur la maquette, base 1920) ------ */
	--fhl-size-display:  clamp(2.25rem, 5vw, 6.0625rem);   /* 97px */
	--fhl-size-title:    clamp(1.75rem, 3.9vw, 4.6875rem); /* 75px */
	--fhl-size-section:  clamp(1.5rem, 2.6vw, 2.5rem);     /* 40px */
	--fhl-size-lead:     clamp(1rem, 1.3vw, 1.3125rem);    /* 21px */
	--fhl-size-body:     1rem;                              /* 16px */
	--fhl-size-meta:     0.8125rem;                         /* 13px */
	--fhl-size-label:    0.75rem;                           /* 12px */

	/* ---- Rayons et rythme ------------------------------------------------ */
	--fhl-radius-panel: 28px;
	--fhl-radius-card:  12px;
	--fhl-radius-media: 8px;
	--fhl-radius-pill:  999px;
	--fhl-gutter:       clamp(1rem, 3.3vw, 4rem);
	--fhl-gap:          20px;
}