:root {
	/* === COLORES === */
	
	/* Color Principal - Azul Clorocien */
	--main-color: #12ace7;
	--main-color-rgb: 18,172,231;
	--main-color-contrast: #ffffff;
	--main-color-contrast-rgb: 255,255,255;
	--main-color-darker: #0b3041;
	--main-color-shade: #078dc1;
	--main-color-tint: #e7f8ff;
	--main-color-lighter: #5cc8f5;
	
	/* Color Secundario - Gris oscuro */
	--secondary-color: #111315;
	--secondary-color-rgb: 17,19,21;
	--secondary-color-contrast: #ffffff;
	--secondary-color-contrast-rgb: 255,255,255;
	--secondary-color-darker: #000000;
	--secondary-color-shade: #1b1f24;
	--secondary-color-tint: #2c3036;
	--secondary-color-lighter: #3f444a;
	
	/* Color de Acento */
	--accent-color: #12ace7;
	--accent-color-rgb: 18,172,231;
	--accent-color-contrast: #ffffff;
	--accent-color-contrast-rgb: 255,255,255;
	--accent-color-darker: #078dc1;
	--accent-color-shade: #0b3041;
	--accent-color-tint: #e7f8ff;
	--accent-color-lighter: #5cc8f5;
	
	/* Color de Éxito */
	--success-color: #20c16f;
	--success-color-rgb: 32,193,111;
	--success-color-contrast: #ffffff;
	--success-color-contrast-rgb: 255,255,255;
	--success-color-darker: #1a9d5a;
	--success-color-shade: #1ca85f;
	--success-color-tint: #3ec97f;
	--success-color-lighter: #5dd195;
	
	/* Color de Advertencia */
	--warning-color: #ffc409;
	--warning-color-rgb: 255,196,9;
	--warning-color-contrast: #000000;
	--warning-color-contrast-rgb: 0,0,0;
	--warning-color-darker: #cc9d07;
	--warning-color-shade: #e0ac08;
	--warning-color-tint: #ffca22;
	--warning-color-lighter: #ffd144;
	
	/* Color de Peligro */
	--danger-color: #c5000f;
	--danger-color-rgb: 197,0,15;
	--danger-color-contrast: #ffffff;
	--danger-color-contrast-rgb: 255,255,255;
	--danger-color-darker: #9f000c;
	--danger-color-shade: #ad000d;
	--danger-color-tint: #cb1a27;
	--danger-color-lighter: #f2463b;
	
	/* Colores Neutros */
	--light-color: #f4f7fa;
	--light-color-rgb: 244,247,250;
	--light-color-contrast: #111315;
	--light-color-contrast-rgb: 17,19,21;
	--light-color-darker: #d8e8f1;
	--light-color-shade: #eef4f8;
	--light-color-tint: #f8f9fb;
	--light-color-lighter: #ffffff;
	
	--medium-color: #6f7c87;
	--medium-color-rgb: 111,124,135;
	--medium-color-contrast: #ffffff;
	--medium-color-contrast-rgb: 255,255,255;
	--medium-color-darker: #5a6670;
	--medium-color-shade: #636f79;
	--medium-color-tint: #828e98;
	--medium-color-lighter: #95a6b3;
	
	--dark-color: #15181b;
	--dark-color-rgb: 21,24,27;
	--dark-color-contrast: #f4f8fb;
	--dark-color-contrast-rgb: 244,248,251;
	--dark-color-darker: #0b0d0f;
	--dark-color-shade: #121518;
	--dark-color-tint: #2a2e32;
	--dark-color-lighter: #3f4347;
	
	/* Color de Badge/Box */
	--box-color: var(--accent-color);
	
	/* === TIPOGRAFÍA === */
	--font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
	
	/* Escala de texto */
	--text-xxs: 0.6rem;
	--text-xs: 0.7rem;
	--text-s: 0.8rem;
	--text-base: 0.9rem;
	--text-md: 1rem;
	--text-lg: 1.2rem;
	--text-xl: 1.5rem;
	--text-2xl: 2rem;
	--text-3xl: 3rem;
	
	/* === ESPACIADO === */
	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--space-4: 2rem;
	--space-5: 3rem;
	--space-6: 4rem;
	
	/* === BORDES === */
	--radius-xs: 2px;
	--radius-s: 4px;
	--radius-base: 8px;
	--radius-m: 12px;
	--radius-l: 16px;
	--radius-xl: 20px;
	--radius-full: 9999px;
	
	/* === SOMBRAS === */
	--shadow-sm: 0 2px 8px rgba(10, 42, 61, 0.08);
	--shadow: 0 10px 30px rgba(10, 42, 61, 0.12);
	--shadow-lg: 0 24px 60px rgba(10, 42, 61, 0.15);
	
	/* === LAYOUT === */
	--header-height: 76px;
	--header-total-height: 76px;
	--container-max: 1600px;
	
	/* === FOOTER === */
	--footer-color: #0aa9e6;
	--footer-color-menu-title: #fff;
	--footer-color-menu-item: #ccc;
	
	/* === TRANSICIONES === */
	--transition: 220ms ease;
	--transition-slow: 350ms ease;
	
	/* === OPACIDAD === */
	--rgba-opacity-f: 1;
	--rgba-opacity-mid-f: 0.75;
	--rgba-opacity-mid: 0.5;
	--rgba-opacity-mid-t: 0.25;
	--rgba-opacity-t: 0;

	/* === ALIASES COMPATIBILIDAD MAQUETACIÓN CLOROCIEN === */
	--brand: var(--main-color);
	--brand-deep: var(--main-color-shade);
	--brand-soft: var(--main-color-tint);
	--brand-strong: var(--main-color-darker);
	--accent: var(--secondary-color);
	--accent-soft: var(--secondary-color-tint);
	--background: var(--light-color);
	--surface: var(--light-color-shade);
	--surface-strong: var(--light-color-darker);
	--panel: #ffffff;
	--line: var(--light-color-darker);
	--text: var(--dark-color);
	--muted: var(--medium-color);
	--footer: var(--footer-color);
	--radius-lg: 2rem;
	--radius-md: 1.25rem;
	--container: min(100% - 1.5rem, 90rem);

	/* Forzar siempre el esquema de color claro */
	color-scheme: light;
}