/**
 * Clairnexa — jetons de design (charte branding/charte-graphique.md).
 *
 * Contrastes mesurés (WCAG 2.x, ratio) :
 *   texte #18283D / blanc 14.9 · / fond #F5F7FA 13.9
 *   gris texte #5F6F85 / #F5F7FA 4.77 (le gris charte #66768C = 4.31, réservé aux fonds blancs : 4.63)
 *   vert texte #0E7A63 / blanc 5.27 (vert charte #18A887 = 3.0 : réservé aux fonds sombres, logo, décor)
 *   alerte #A74836 / blanc 5.8 · / #FBEFEC 5.15
 *   blanc / navy #101D32 16.9 · vert clair #48D8B0 / navy 9.43
 *   bordure de champ #8593A6 / blanc 3.12 (composant d'interface ≥ 3:1)
 */
:root {
	/* Charte */
	--cx-navy: #101d32;
	--cx-blue: #17365a;
	--cx-green: #18a887;
	--cx-bg: #f5f7fa;
	--cx-white: #ffffff;
	--cx-text: #18283d;
	--cx-gray: #66768c;
	--cx-alert: #a74836;

	/* Variantes accessibles et teintes de fond */
	--cx-green-text: #0e7a63;
	--cx-green-light: #48d8b0;
	--cx-green-bg: #e7f6f1;
	--cx-gray-text: #5f6f85;
	--cx-border: #dce3eb;
	--cx-border-strong: #8593a6;
	--cx-info-bg: #eaf1f8;
	--cx-warn: #7a5a00;
	--cx-warn-bg: #fff6db;
	--cx-alert-bg: #fbefec;
	--cx-footer-text: #e6ecf3;
	--cx-footer-muted: #b8c4d3;

	/* Typographie : pile système, aucune police externe */
	--cx-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--cx-fs-sm: 0.875rem;
	--cx-fs-base: 1.0625rem;
	--cx-fs-lg: 1.1875rem;
	--cx-fs-h4: 1.125rem;
	--cx-fs-h3: clamp(1.25rem, 1.15rem + 0.45vw, 1.4375rem);
	--cx-fs-h2: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem);
	--cx-fs-h1: clamp(1.875rem, 1.5rem + 1.8vw, 2.75rem);
	--cx-lh: 1.65;
	--cx-lh-tight: 1.2;

	/* Espacements : multiples de 8 px */
	--cx-s1: 8px;
	--cx-s2: 16px;
	--cx-s3: 24px;
	--cx-s4: 32px;
	--cx-s5: 40px;
	--cx-s6: 48px;
	--cx-s8: 64px;

	/* Gabarit */
	--cx-wide: 1180px;
	--cx-content: 760px;
	--cx-gutter: 16px;
	--cx-radius: 12px;
	--cx-radius-sm: 8px;
	--cx-btn-h: 44px;
	--cx-shadow: 0 1px 2px rgba(16, 29, 50, 0.06), 0 4px 16px rgba(16, 29, 50, 0.06);

	/* Focus visible (WCAG 2.4.7 / 2.4.13) */
	--cx-focus-color: #17365a;
	--cx-focus-color-dark: #48d8b0;
	--cx-focus: 3px solid var(--cx-focus-color);
}

@media (min-width: 768px) {
	:root {
		--cx-gutter: 24px;
	}
}