/**
 * Design tokens du plugin Ma Commune.
 *
 * Source unique de vérité pour les espacements, rayons, typographies, couleurs,
 * ombres et transitions partagés par tous les blocs.
 *
 * Conventions :
 * - Les couleurs réutilisent les `--wp--preset--color--*` de theme.json en
 *   priorité, avec un fallback hex pour les thèmes qui ne définiraient pas la
 *   palette. Le thème actif peut donc tout reskinner via theme.json sans
 *   toucher au plugin.
 * - Les échelles suivent un rythme de 4px (4pt scale).
 *
 * @package ma-commune
 */

:root {
	/* === Espacements (4pt scale) =================================== */
	--mc-spacing-2xs: 2px;
	--mc-spacing-xs: 4px;
	--mc-spacing-sm: 8px;
	--mc-spacing-md: 16px;
	--mc-spacing-lg: 24px;
	--mc-spacing-xl: 32px;
	--mc-spacing-2xl: 48px;

	/* === Border radius ============================================= */
	--mc-radius-xs: 4px;
	--mc-radius-sm: 8px;
	--mc-radius-md: 12px;
	--mc-radius-lg: 16px;
	--mc-radius-pill: 999px;
	--mc-radius-circle: 50%;

	/* === Typographie (font-size) =================================== */
	--mc-fs-xs: 0.75rem;   /* 12px — labels, captions */
	--mc-fs-sm: 0.875rem;  /* 14px — détails, méta */
	--mc-fs-md: 1rem;      /* 16px — corps */
	--mc-fs-lg: 1.125rem;  /* 18px — sous-titre */
	--mc-fs-xl: 1.5rem;    /* 24px — titre de card */
	--mc-fs-2xl: 2rem;     /* 32px — titre de section */

	/* === Icônes (taille uniforme) ================================== */
	--mc-icon-sm: 14px;
	--mc-icon-md: 18px;
	--mc-icon-lg: 24px;

	/* === Couleurs sémantiques ====================================== */
	/* Marque */
	--mc-color-primary:         var( --wp--preset--color--primary, #7b1621 );
	--mc-color-primary-light:   var( --wp--preset--color--primary-light, #a12d3a );
	--mc-color-primary-ring:    rgba( 123, 22, 33, 0.25 );

	--mc-color-accent:          var( --wp--preset--color--accent, #d4a843 );

	/* Surfaces */
	--mc-color-surface:         var( --wp--preset--color--surface, #ffffff );
	--mc-color-base-alt:        var( --wp--preset--color--base-alt, #f5f0eb );
	--mc-color-border:          var( --wp--preset--color--border, #e5e0da );

	/* Texte */
	--mc-color-contrast-deep:   var( --wp--preset--color--contrast-deep, #1a1a1a );
	--mc-color-contrast:        var( --wp--preset--color--contrast, #2d2d2d );
	--mc-color-contrast-alt:    var( --wp--preset--color--contrast-alt, #6b6b6b );
	--mc-color-contrast-inverse:var( --wp--preset--color--contrast-inverse, #ffffff );

	/* États sémantiques (info / warning / error / success).
	 * Trois niveaux par état pour garantir le contraste WCAG :
	 *  --mc-color-<état>-bg     : fond très clair, support de texte foncé.
	 *  --mc-color-<état>        : tonalité moyenne pour icônes, borders, accents.
	 *  --mc-color-<état>-strong : texte foncé, lisible sur le fond clair.
	 */
	--mc-color-info-bg:         #e3f2fd;
	--mc-color-info:            #1976d2;
	--mc-color-info-strong:     #0d47a1;

	--mc-color-warning-bg:      #fff3e0;
	--mc-color-warning:         #ef6c00;
	--mc-color-warning-strong:  #b65100;

	--mc-color-error-bg:        #ffebee;
	--mc-color-error:           #c62828;
	--mc-color-error-strong:    #b71c1c;

	--mc-color-success-bg:      #e8f5e9;
	--mc-color-success:         #2e7d32;
	--mc-color-success-strong:  #1b5e20;

	/* === Ombres ==================================================== */
	--mc-shadow-sm: 0 1px 2px rgba( 0, 0, 0, 0.04 );
	--mc-shadow-md: 0 2px 8px rgba( 0, 0, 0, 0.06 );
	--mc-shadow-lg: 0 4px 16px rgba( 0, 0, 0, 0.08 );

	/* === Transitions =============================================== */
	--mc-transition-fast: 0.15s ease;
	--mc-transition-base: 0.2s ease;
	--mc-transition-slow: 0.3s ease;

	/* === Focus ring (alias pratique) =============================== */
	--mc-focus-ring: 0 0 0 3px var( --mc-color-primary-ring );
}