/**
 * Visiora Core — Design Tokens : breakpoints
 *
 * Seuils responsive officiels de l’interface Visiora.
 *
 * Remarque :
 * les variables CSS ne peuvent pas être utilisées directement
 * dans les media queries classiques.
 *
 * @package Visiora_Core
 */

:root {

	/* ======================================================
	   1. BREAKPOINTS DE VIEWPORT
	   ====================================================== */

	--v-breakpoint-xs: 30rem;
	--v-breakpoint-sm: 40rem;
	--v-breakpoint-md: 48rem;
	--v-breakpoint-lg: 64rem;
	--v-breakpoint-xl: 80rem;
	--v-breakpoint-2xl: 90rem;

	/* ======================================================
	   2. BREAKPOINTS DE CONTENEUR
	   ====================================================== */

	--v-container-breakpoint-sm: 20rem;
	--v-container-breakpoint-md: 30rem;
	--v-container-breakpoint-lg: 45rem;
	--v-container-breakpoint-xl: 60rem;

	/* ======================================================
	   3. TOKENS SÉMANTIQUES
	   ====================================================== */

	--v-breakpoint-mobile: var(--v-breakpoint-sm);
	--v-breakpoint-tablet: var(--v-breakpoint-md);
	--v-breakpoint-laptop: var(--v-breakpoint-lg);
	--v-breakpoint-desktop: var(--v-breakpoint-xl);
	--v-breakpoint-wide: var(--v-breakpoint-2xl);
}