/**
 * MauRide — Design tokens.
 * Variables CSS globales. Les valeurs de couleur sont surchargées dynamiquement
 * via wp_add_inline_style() selon les settings admin.
 */

:root {
	/* Palette Travel/Tourism — sky blue (mer/ciel de Maurice) + adventure orange.
	   Ajustée WCAG AA. Surchargée dynamiquement par wp_add_inline_style selon les settings. */
	--mauride-primary: #0EA5E9;
	--mauride-primary-dark: #0284C7;
	--mauride-primary-light: #E0F2FE;
	--mauride-secondary: #EA580C;
	--mauride-secondary-dark: #C2410C;

	--mauride-success: #059669;
	--mauride-warning: #D97706;
	--mauride-error: #DC2626;
	--mauride-info: #0EA5E9;

	--mauride-bg: #ffffff;
	--mauride-bg-alt: #F0F9FF;
	--mauride-bg-muted: #E0F2FE;
	--mauride-border: #BAE6FD;
	--mauride-border-strong: #7DD3FC;

	--mauride-text: #0C4A6E;
	--mauride-text-muted: #475569;
	--mauride-text-inverse: #ffffff;

	--mauride-radius: 12px;
	--mauride-radius-sm: 8px;
	--mauride-radius-lg: 16px;
	--mauride-radius-full: 9999px;

	--mauride-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
	--mauride-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
	--mauride-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);

	--mauride-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);

	--mauride-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--mauride-font-size: 16px;
	--mauride-line-height: 1.5;

	--mauride-space-1: 4px;
	--mauride-space-2: 8px;
	--mauride-space-3: 12px;
	--mauride-space-4: 16px;
	--mauride-space-5: 20px;
	--mauride-space-6: 24px;
	--mauride-space-8: 32px;
	--mauride-space-10: 40px;
	--mauride-space-12: 48px;
}

/**
 * Dark mode opt-in explicite.
 *
 * N'est PAS activé automatiquement via `prefers-color-scheme: dark` car cela
 * entrerait en conflit avec le thème WordPress actif (le body reste clair alors
 * que nos cards passeraient en sombre, rendant les textes illisibles sur le
 * background du thème).
 *
 * Pour activer le dark mode MauRide, ajouter manuellement :
 *   <html data-mauride-theme="dark"> ou <body data-mauride-theme="dark">
 * Ou via JS depuis un toggle dédié.
 */
[data-mauride-theme="dark"] {
	--mauride-bg: #082F49;
	--mauride-bg-alt: #0C4A6E;
	--mauride-bg-muted: #0E7490;
	--mauride-border: #155E75;
	--mauride-border-strong: #0369A1;
	--mauride-text: #F0F9FF;
	--mauride-text-muted: #BAE6FD;
	--mauride-primary-light: rgba(14, 165, 233, 0.18);
	--mauride-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
	--mauride-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
	--mauride-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
}

/* Accessibilité — respect des préférences de mouvement réduit (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}