/**
 * ECLORAY — SYSTEM TOKENS
 *
 * Valeurs structurelles déjà verrouillées par le Technical Lock V1.1 —
 * LOCKED. Aucune valeur « plus moderne » ou « plus esthétique » n'est
 * introduite ici (Phase 4.2, section 23).
 */

:root {
	/* ---- Espacement (multiples de 8px, DOM Partie IV §4) ---- */
	--space-1: 8px;
	--space-2: 16px;
	--space-3: 24px;
	--space-4: 32px;
	--space-5: 48px;
	--space-6: 64px;
	--space-7: 96px;
	--space-8: 128px;

	/* ---- Radius (échelle 2/4/6px, plafond absolu 6px) ---- */
	--radius-sm: 2px; /* badges, checkbox, radio */
	--radius-md: 4px; /* boutons, cards, champs, accordéons */
	--radius-lg: 6px; /* images pleine largeur, citations, modales */

	/* ---- Bordures (opacités graduées par contexte) ---- */
	--border-opacity-8: rgba(26, 26, 24, 0.08);   /* séparateur de section */
	--border-opacity-10: rgba(26, 26, 24, 0.10);  /* ligne de tableau */
	--border-opacity-12: rgba(26, 26, 24, 0.12);  /* card */
	--border-opacity-20: rgba(26, 26, 24, 0.20);  /* chip filtre */
	--border-opacity-25: rgba(26, 26, 24, 0.25);  /* champ de formulaire */
	--border-width-hairline: 1px;
	--border-width-focus-field: 1.5px; /* focus formulaire */

	/* ---- Ombres — interdites en flux, exception unique overlay ---- */
	--shadow-overlay: 0 2px 8px rgba(26, 26, 24, 0.06); /* dropdown, modal, popover, tooltip UNIQUEMENT */
	--shadow-none: none; /* valeur explicite pour Card, Button, Badge, Image en flux */

	/* ---- Focus ---- */
	--focus-ring: 2px solid var(--color-champagne);
	--focus-offset: 2px;

	/* ---- Tailles d'icônes (Phosphor Icons Thin) ---- */
	--icon-size-ui: 20px;
	--icon-size-nav: 24px;

	/* ---- Motion (durées et easing verrouillés) ---- */
	--motion-button-hover: 150ms ease;
	--motion-card-image: 300ms ease;
	--motion-accordion: 200ms ease;
	--motion-fade: 150ms ease;
}

/**
 * prefers-reduced-motion : réduction générique.
 * Les surcharges spécifiques par composant (ex. suppression du zoom Card)
 * seront ajoutées avec chaque composant en Phase 4.3, pour rester au plus
 * près du DOM concerné plutôt que de dupliquer des sélecteurs ici avant
 * que ces composants n'existent.
 */
@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;
	}
}