/* Paleta de colores principales */
:root {
	/* Colores principales */
	--color-bg: #f5f7f8;
	--color-primary: #32939c;
	--color-primary-dark: #4395ad;
	--color-secondary: #32939c;

	/* Colores de texto */
	--color-white-light: #64748b;


	/* Colores de superficie */
	--color-surface-1: #f3f4f6e7;
	--color-surface-2: #e5e7ebf3;
	--color-white: #ffffff;
	--color-gray-light: #f8fafc;
	--color-gray-dark: #334155;

	/* Colores de estado */
	--color-success: #28a745;
	--color-warning: #ffc107;
	--color-error: #dc3545;
	--color-info: #3b82f6;
	--color-cyan: #06b6d4;
	--color-violet: #8b5cf6;
	--color-whatsapp: #25d366;

	/* Escala de Espaciado (Sistema de 4px/8px) */
	--space-xs: 0.4rem;
	--space-sm: 0.8rem;
	--space-md: 1.6rem;
	--space-lg: 2.4rem;
	--space-xl: 3.2rem;
	--space-xxl: 4.8rem;

	/* Escala de Tipografía */
	--font-xs: 1.2rem;
	--font-sm: 1.4rem;
	--font-md: 1.6rem;
	--font-lg: 2.0rem;
	--font-xl: 3.0rem;
	--font-xxl: 4.5rem;

	/* Sombras */
	--shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	--shadow-hover: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

	/* Border radius - Conservador (migrado de maestro-unificado) */
	--border-radius: 8px;
	--border-radius-sm: 6px;
	
	/* Breakpoints híbridos optimizados */
	--breakpoint-mobile: 768px;
	--breakpoint-tablet-sm: 768px;
	--breakpoint-tablet-lg: 1024px;
	--breakpoint-desktop: 1280px;

	/* Tipografía */
	--font-title: 'Montserrat', sans-serif;
	--font-body: 'Montserrat', sans-serif;
}