/**
 * Tokens de marque — synchronisés avec les variables du Figma
 * « Destinations Hockey » (page Recherches Webdesign), 23 juillet 2026.
 *
 * La SOURCE des valeurs est theme.json : WordPress en génère les custom
 * properties --wp--preset--*, aliasées ici sous les NOMS DU FIGMA. Les alias
 * sémantiques historiques (--accent, --encre…) pointent vers eux — le CSS des
 * sections continue de fonctionner sans renommage.
 *
 * Typographie : PP Neue Montreal (licence Pangram Pangram — les fichiers de
 * fontes restent à fournir ; d'ici là, la pile retombe sur Helvetica/system).
 */

:root {
	/* ------------------------------------------ Couleurs (noms Figma) -- */
	--white: var(--wp--preset--color--white, #FFFFFF);
	--ultra-light: var(--wp--preset--color--ultra-light, #EEE9E2);
	--light: var(--wp--preset--color--light, #D7D2CB);
	--text-gray: var(--wp--preset--color--text-gray, #45423B);
	--text-black: var(--wp--preset--color--text-black, #171612);
	--canada: var(--wp--preset--color--canada, #D80621);

	/* Dérivés — absents du Figma, à faire valider. */
	--canada-press: #B00519;
	--surface-sombre-elevee: #211F1A;

	/* ------------------------------- Alias sémantiques (compatibilité) -- */
	--blanc: var(--white);
	--ivoire: var(--ultra-light);
	--sable: var(--light);
	--encre: var(--text-black);
	--ardoise: var(--surface-sombre-elevee);
	--accent: var(--canada);
	--accent-press: var(--canada-press);
	--graphite: var(--text-gray);
	--trait: var(--light);

	/* -------------------------------------- Typographie (styles Figma) -- */
	--font-montreal: var(--wp--preset--font-family--montreal, "PP Neue Montreal", "Helvetica Neue", system-ui, sans-serif);
	--font-titres: var(--font-montreal);
	--font-corps: var(--font-montreal);

	/* Desktop/Display — 89 / 89 / -1.8 */
	--style-display-taille: var(--wp--preset--font-size--display, clamp(3rem, 7.5vw, 5.5625rem));
	--style-display-interligne: 1;
	--style-display-approche: -0.02em;

	/* Desktop/H1 — 46 / 49.7 / -0.7 */
	--style-h1-taille: var(--wp--preset--font-size--h1, clamp(2rem, 4.5vw, 2.875rem));
	--style-h1-interligne: 1.08;
	--style-h1-approche: -0.015em;

	/* Desktop/H2 — 34 / 37.4 / -0.7 */
	--style-h2-taille: var(--wp--preset--font-size--h2, clamp(1.5rem, 3vw, 2.125rem));
	--style-h2-interligne: 1.1;
	--style-h2-approche: -0.02em;

	/* Text/Text Large — 24 / 24 / -0.7 */
	--style-texte-large-taille: var(--wp--preset--font-size--texte-large, 1.5rem);
	--style-texte-large-interligne: 1;
	--style-texte-large-approche: -0.03em;

	/* Text/Text — 19 / 24 / -0.15 */
	--style-texte-taille: var(--wp--preset--font-size--texte, 1.1875rem);
	--style-texte-interligne: 1.26;
	--style-texte-approche: -0.008em;

	/* Text/CTA — 16 / 20 / -0.3 (medium) */
	--style-cta-taille: var(--wp--preset--font-size--cta, 1rem);
	--style-cta-interligne: 1.25;
	--style-cta-approche: -0.019em;

	/* Text/Link--700 — 14 / 15.4 / -0.3 (bold) */
	--style-lien-taille: var(--wp--preset--font-size--lien, 0.875rem);
	--style-lien-interligne: 1.1;
	--style-lien-approche: -0.021em;

	/* Alias de tailles (compatibilité avec le CSS existant) */
	--taille-s: var(--style-lien-taille);
	--taille-m: var(--style-texte-taille);
	--taille-l: var(--style-texte-large-taille);
	--taille-xl: var(--style-h2-taille);
	--taille-hero: var(--style-display-taille);

	/* ----------------------------------------- Espacements (marges Figma) */
	--marge-xxs: var(--wp--preset--spacing--xxs, 5px);
	--marge-xs: var(--wp--preset--spacing--xs, 10px);
	--marge-s: var(--wp--preset--spacing--s, 15px);
	--marge-m: var(--wp--preset--spacing--m, 20px);
	--marge-l: var(--wp--preset--spacing--l, 30px);
	--marge-xl: var(--wp--preset--spacing--xl, 50px);
	--marge-xxxl: var(--wp--preset--spacing--xxxl, 100px);

	/* Alias sémantiques (compatibilité) */
	--esp-xs: var(--marge-xs);
	--esp-s: var(--marge-s);
	--esp-m: var(--marge-l);
	--esp-l: var(--marge-xl);
	--esp-xl: var(--marge-xxxl);

	/* Gabarit */
	--largeur-contenu: 86rem;
	--largeur-large: 88rem;
}