/*!
 * CLICKMEX Design Tokens v1.0
 * Handle público: "cmx-design-tokens". Pensado para reutilizarse en
 * CLICKMEX AI Commerce Engine y otros plugins CLICKMEX sin depender de este.
 *
 * Convención de clases: .cmx-{bloque}__{elemento}--{modificador} (BEM con prefijo cmx-).
 */
:root {
	/* Paleta oficial */
	--cmx-blue: #0B3D91;
	--cmx-turquoise: #00D1B2;
	--cmx-orange: #FF6B3D;
	--cmx-white: #F4F7FB;
	--cmx-dark: #0F172A;

	/* Derivados (solo tonos de la misma familia, para degradados y estados) */
	--cmx-blue-800: #08306F;
	--cmx-blue-900: #061F4B;
	--cmx-blue-50: #EAF1FB;
	--cmx-turquoise-600: #00B89C;
	--cmx-turquoise-50: #E3FAF6;
	--cmx-orange-600: #F0532A;
	--cmx-orange-50: #FFF0EA;
	--cmx-surface: #FFFFFF;
	--cmx-text: var(--cmx-dark);
	--cmx-muted: #55607A;
	--cmx-border: #E2E8F2;

	/* Tipografía */
	--cmx-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--cmx-fw-regular: 400;
	--cmx-fw-medium: 500;
	--cmx-fw-semibold: 600;
	--cmx-fw-bold: 700;
	--cmx-fw-black: 800;

	/* Forma y profundidad */
	--cmx-radius-sm: 10px;
	--cmx-radius: 16px;
	--cmx-radius-lg: 24px;
	--cmx-radius-pill: 999px;
	--cmx-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 2px 8px rgba(15, 23, 42, .05);
	--cmx-shadow: 0 6px 24px rgba(11, 61, 145, .10);
	--cmx-shadow-lg: 0 18px 48px rgba(6, 31, 75, .22);

	/* Layout */
	--cmx-container: 1240px;
	--cmx-gutter: 16px;
	--cmx-section-gap: 40px;
	--cmx-header-h: 64px;
	--cmx-ease: cubic-bezier(.2, .7, .2, 1);
}