/* ==========================================================================
   KIDS CARE — JETONS DE DESIGN (design tokens)
   --------------------------------------------------------------------------
   Deux niveaux :
   1. COULEURS DE MARQUE  : la charte exacte. Réservées aux aplats de fond,
                            icônes, illustrations et bordures décoratives.
   2. COULEURS FONCTIONNELLES : variantes dérivées, vérifiées WCAG 2.2 AA.
                            Seules celles-ci portent du texte ou des boutons.

   Ratios mesurés (voir _docs/CONTRASTES.md) — ne pas modifier sans recalcul.
   ========================================================================== */

:root {
	/* ---------- 1. Couleurs de marque (décoratif) ---------- */
	--kc-cyan: #03bee3; /* 2,22:1 sur blanc — JAMAIS de texte dessus en blanc */
	--kc-magenta: #e10258; /* 4,83:1 sur blanc — OK texte blanc (CTA) */
	--kc-mint: #3de0be; /* 1,67:1 sur blanc — décoratif uniquement */
	--kc-yellow: #e39d13; /* 2,31:1 sur blanc — décoratif uniquement */

	/* ---------- 2. Neutres ---------- */
	--kc-ink: #183247; /* texte principal — 13,24:1 sur blanc */
	--kc-ink-soft: #5f6f7a; /* texte secondaire — 5,20:1 sur blanc */
	--kc-surface: #f7fafc; /* fond doux */
	--kc-border: #e4ebf0; /* séparateur décoratif — 1,20:1 */
	--kc-border-strong: #7f94a3; /* bordure de champ — 3,15:1 (requis 3:1) */
	--kc-white: #fff;

	/* ---------- 3. Couleurs fonctionnelles (portent du texte) ---------- */
	--kc-link: #0e7e96; /* cyan assombri — 4,73:1 */
	--kc-link-hover: #0a6377; /* 6,85:1 */
	--kc-mint-ink: #0f6b57; /* menthe assombrie — 6,44:1 */
	--kc-yellow-ink: #8a5e06; /* jaune assombri — 5,70:1 */

	--kc-cta: var(--kc-magenta); /* 4,83:1 avec texte blanc */
	--kc-cta-hover: #b8014a; /* 6,69:1 */
	--kc-cta-active: #8f0139; /* 9,41:1 */

	--kc-focus: var(--kc-ink); /* anneau de focus : 13,24 sur blanc, 5,98 sur cyan */

	/* ---------- 4. Aplats de section (texte --kc-ink obligatoire) ---------- */
	--kc-tint-cyan: #e6f9fd;
	--kc-tint-mint: #e8fbf6;
	--kc-tint-yellow: #fdf4e3;
	--kc-tint-magenta: #fdeaf1;

	/* ---------- 5. Typographie ---------- */
	--kc-font-title: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
	--kc-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	--kc-text-xs: 0.8125rem; /* 13px */
	--kc-text-sm: 0.9375rem; /* 15px */
	--kc-text-base: 1rem; /* 16px — plancher mobile */
	--kc-text-md: 1.0625rem; /* 17px */
	--kc-text-lg: 1.125rem; /* 18px */
	--kc-text-xl: 1.375rem; /* 22px */
	--kc-h4: clamp(1.125rem, 0.6vw + 1rem, 1.3125rem);
	--kc-h3: clamp(1.3125rem, 1vw + 1.05rem, 1.625rem);
	--kc-h2: clamp(1.625rem, 2vw + 1.15rem, 2.375rem);
	--kc-h1: clamp(2rem, 3.2vw + 1.25rem, 3.25rem);

	--kc-leading-body: 1.65;
	--kc-leading-title: 1.18;
	--kc-measure: 70ch; /* largeur max d'un paragraphe */

	/* ---------- 6. Espacement ---------- */
	--kc-space-1: 0.25rem;
	--kc-space-2: 0.5rem;
	--kc-space-3: 0.75rem;
	--kc-space-4: 1rem;
	--kc-space-5: 1.5rem;
	--kc-space-6: 2rem;
	--kc-space-7: 2.5rem;
	--kc-space-8: 3.5rem;
	--kc-section-y: clamp(3.5rem, 6vw, 7rem); /* 56px mobile → 112px desktop */
	--kc-container: 1220px;
	--kc-gutter: clamp(1rem, 4vw, 2rem);

	/* ---------- 7. Formes ---------- */
	--kc-radius-sm: 10px;
	--kc-radius: 18px;
	--kc-radius-lg: 24px;
	--kc-radius-pill: 999px;
	--kc-shadow-sm: 0 1px 2px rgb(24 50 71 / 6%);
	--kc-shadow: 0 4px 16px rgb(24 50 71 / 7%);
	--kc-shadow-lg: 0 12px 32px rgb(24 50 71 / 10%);

	/* ---------- 8. Divers ---------- */
	--kc-tap: 44px; /* zone tactile minimale */
	--kc-header-h: 76px;
	--kc-transition: 180ms ease;
}

/* Respect de la préférence système « réduire les animations » */
@media (prefers-reduced-motion: reduce) {
	:root {
		--kc-transition: 0ms;
	}
}