:root{
	/* # COLORS */
    /* ## Based in ionic variables */
	--main-color: #fabff4;
	--main-color-rgb: 250,191,244;
	--main-color-contrast: #161616;
	--main-color-contrast-rgb: 255,255,255;
	--main-color-darker: #c78cc1;
	--main-color-shade: #e1a6db;
	--main-color-tint: #ffd9ff;
	--main-color-lighter: #fff2ff;


	--secondary-color: #7465ec;
	--secondary-color-rgb: 116,101,236;
	--secondary-color-contrast: #161616;
	--secondary-color-contrast-rgb: 0,0,0;
	--secondary-color-darker: #594ec2;
	--secondary-color-shade: #6659d0;
	--secondary-color-tint: #8274ee;
	--secondary-color-lighter: #9488f4;
	

	/* Color de Acento variables */
	--accent-color: #b702fd;
	--accent-color-rgb: 183,2,253;
	--accent-color-contrast: #ffffff;
	--accent-color-contrast-rgb: 255,255,255;
	--accent-color-darker: #8400ca;
	--accent-color-shade: #9e00e4;
	--accent-color-tint: #d11cff;
	--accent-color-lighter: #ea35ff;

	--success-color: #2dd55b;
	--success-color-rgb: 45,213,91;
	--success-color-contrast: #161616;
	--success-color-contrast-rgb: 0,0,0;
	--success-color-darker: #207739;
	--success-color-shade: #279945;
	--success-color-tint: #42d96b;
	--success-color-lighter: #5de38a;

	--warning-color: #ffc409;
	--warning-color-rgb: 255,196,9;
	--warning-color-contrast: #000000;
	--warning-color-contrast-rgb: 0,0,0;
	--warning-color-darker: #9e7b09;
	--warning-color-shade: #e0ac08;
	--warning-color-tint: #ffca22;
	--warning-color-lighter: #ffd144;

	--danger-color: #c5000f;
	--danger-color-rgb: 197,0,15;
	--danger-color-contrast: #ffffff;
	--danger-color-contrast-rgb: 255,255,255;
	--danger-color-darker: #84020d;
	--danger-color-shade: #ad000d;
	--danger-color-tint: #cb1a27;
	--danger-color-lighter: #d6626d;

	--light-color: #f8f8f8;
	--light-color-rgb: 246,248,252;
	--light-color-contrast: #161616;
	--light-color-contrast-rgb: 0,0,0;
	--light-color-darker: rgb(170, 170, 170);
	--light-color-shade: #dddada;
	--light-color-tint: #f5f5f5;
	--light-color-lighter: #ffffff;

	--medium-color: #5f5f5f;
	--medium-color-rgb: 95,95,95;
	--medium-color-contrast: #ffffff;
	--medium-color-contrast-rgb: 255,255,255;
	--medium-color-darker: #4b4b4b;
	--medium-color-shade: #545454;
	--medium-color-tint: #6f6f6f;
	--medium-color-lighter: #7d7d7d;

	--dark-color: #161616;
	--dark-color-rgb: 47,47,47;
	--dark-color-contrast: #f6f8fc;
	--dark-color-contrast-rgb: 246, 248, 252;
	--dark-color-darker: #262626;
	--dark-color-shade: #292929;
	--dark-color-tint: #444444;
	--dark-color-lighter: #595959;
    /* # END COLORS */    	

	/* OPACITIY VALUE FOR rgbA(x,x,x, --rgba-opacity) */
	--rgba-opacitiy-f:1;
	--rgba-opacitiy-mid-f:.75;
	--rgba-opacitiy-mid:.5;
	--rgba-opacitiy-mid-t:.25;
	--rgba-opacitiy-t:0;


	
	/* Gradient data */
	--main-gradient:120deg,var(--main-color) -1%, var(--lighted-main-color) 20%, var(--dark-main-color) 89%;


	/* FONT SIZES */
	--text-xxl:2.4rem;
	--text-xl:1.85rem;
	--text-lg:1.5rem;
	--text-md:1.25rem;
	--text-base-important:1.1rem;
	--text-base:1rem;
	--text-s:.875rem;
	--text-xs:.75rem;
	--text-xxs:.65rem;

	/* TEXT ALIGN */
	--text-left:left;
	--text-center:center;
	--text-right:right;
	--text-justify:justify;
	--text-start:start;
	--text-end:end;
	


	/* ## Radius */
	--radius-xl:1rem;
    --radius-l:.75rem;
	--radius-md:.6rem;
	--radius-base:.5rem;
	--radius-sm:.4rem;
	--radius-s:.25rem;
	--radius-xs:.12rem;
	--radius-full:99999999px;

	/* space */
	--space-base:1rem;
	--space-s:calc(var(--space-base) * calc(1 / 4));
	--space-1:calc(var(--space-base) * calc(1 / 2));
	--space-2:calc(var(--space-base) * calc(2 / 2));
	--space-3:calc(var(--space-base) * calc(3 / 2));
	--space-4:calc(var(--space-base) * calc(4 / 2));
	--space-5:calc(var(--space-base) * calc(5 / 2));
	--space-6:calc(var(--space-base) * calc(6 / 2));
	--space-7:calc(var(--space-base) * calc(7 / 2));
	--space-8:calc(var(--space-base) * calc(8 / 2));
	--space-9:calc(var(--space-base) * calc(9 / 2));
	--space-10:calc(var(--space-base) * calc(10 / 2));
	--space-11:calc(var(--space-base) * calc(11 / 2));
	--space-12:calc(var(--space-base) * calc(12 / 2));

	/* Shadows - is on variable for use onconfigs or some */
	--shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);
	--shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
	--shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--shadow-xl:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
	--shadow-2xl:0 25px 50px -12px rgb(0 0 0 / 0.25);
	--shadow-inner:inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

    /* NORMALIZATION */
    /* Esto pisa las varaibles que se usan en la mayoria de los proyectos */
	--color-company: var(--main-color);
	--color-company2:var(--secondary-color);
	--color-shadow:rgb(0,0,0,0.2);

	--line-height-block:2.5rem;

	/* Animation duration */
	--duration-base: 1s;
	--duration-1: calc(var(--duration-base) / 10);   /* 0.1s */
	--duration-2: calc(var(--duration-base) / 4);    /* 0.25s */
	--duration-3: calc(var(--duration-base) / 2);    /* 0.5s */
	--duration-4: calc(var(--duration-base) * 0.75); /* 0.75s */
	--duration-5: var(--duration-base);              /* 1s */
	--duration-6: calc(var(--duration-base) * 1.5);  /* 1.5s */
	--duration-7: calc(var(--duration-base) * 1.75); /* 1.75s */
	--duration-8: calc(var(--duration-base) * 2);    /* 2s */
	--duration-9: calc(var(--duration-base) * 2.5);  /* 2.5s */
	--duration-10: calc(var(--duration-base) * 5);   /* 5s */


		/* -------------------   */
		/* MEDIA QUERIES (used ?)*/
		/* -------------------   */
		--mq-xl:1280px;  
		--mq-lg:1024px;  
		--mq-md:768px;  
		--mq-sm:640px;  
		--mq-xs:480px;  
		--mq-xxs:340px; 


		
	/* ------------------- */
	/* APP BuTTON CONFIG   */
	/* ------------------- */
	
		/* Base button configuration */
		--def-button-fill: rgba(var(--main-color-rgb), var(--rgba-opacitiy-f));
		--def-button-rounded: var(--radius-full);
		--def-button-scheme: var(--main-color-contrast);
		--def-button-text:rgba(var(--main-color-contrast-rgb), var(--rgba-opacitiy-f));
		--def-button-size: min-content;
		--def-button-block: max-content;
		--def-button-height: var(--line-height-block); 
		--def-button-shadow: var(--shadow-md); 

		/* HOVER */
		--def-button-hover-fill: rgba(var(--main-color-rgb), var(--rgba-opacitiy-mid-f));
		--def-button-hover-text:var(--main-color-contrast);
		/* ACTIVE */
		--def-button-active-fill: rgba(var(--main-color-darker), var(--rgba-opacitiy-f));
		--def-button-active-text:  var(--main-color-contrast);


	 /* ------------------- */
	 /* LAYOUT CONFIGS */
	 /* ------------------- */

		/* ## slider Bullets */
		--bullet-width:10px;
		--bullet-active-color:var(--accent-color);
		--marginBetweenSections:4rem;

		--loader-color:var(--main-color);

		/* # Header */
		/* ## Header WRAP */
		--header-display:fixed;  
		--header-position:sticky; 
		--header-total-height:calc(var(--header-main-content-height) + var(--header-top-line-height) + var(--header-bot-line-height) );/* En este caso , al ser sticky, solo utiliza la banda de arriba de todo. */
		/* calculo total del hegith del header */
		/* calc(var(--header-main-content-height) + var(--header-top-line-height) + var(--header-bot-line-height) )  */

 
		/* ## Header main content */
		--header-main-content-display:block;  
		--header-main-content-position:relative; 
		--header-main-content-height:60px;   
		--header-main-content-base-color:var(--light-color-lighter);
		--header-main-content-text-color:var(--light-color);
		--header-main-content-icon-color:var(--dark-color);
		--header-main-content-shadow:none;

		/* ## Header top line */
		--header-top-display:block;    
		--header-top-position:sticky; 
		--header-top-line-height:2.5rem;   
		--header-top-base-color:var(--light-color);
		--header-top-text-color:var(--light-color-contrast);
		/* ## Header bot menu */
		--header-bot-display:block;    
		--header-bot-position:relative; 
		--header-bot-line-height:none;   
		--header-bot-base-color:var(--light-color-lighter);
		--header-bot-text-color:var(--light-color-contrast);
		--header-bot-shadow:var(--shadow-lg);

		/* # Cart lateral */
		--cart-width:480px;
		--cart-base-color:var(--light-color);
		--cart-text-color:var(--light-color-contrast);
		/* ## Cart - header */
		--cart-header-height:var(--space-10);
		/* ## Cart - lineas & contenido */
		--cart-line-height:4.5rem;
		--cart-content-scrollbar-bgcolor:rgba(0,0,0,0);
		--cart-content-scrollbar-color:var(--accent-color);
		--cart-content-scrollbar-width:var(--space-1);
		--cart-content-scrollbar-radius:var(--radius-s);
		--cart-line-title-size:var(--text-s);
		--cart-line-title-weight:400;
		--cart-line-price-size:var(--text-s);
		--cart-line-price-weight:600;
		--cart-line-delete-size:var(--space-1);
		/* ## Cart - Bottom actions */
		--cart-bot-line-bgcolor:var(--light-color-lighter);;
		--cart-bot-line-shadow:10px -3px 11px 7px var(--light-color-shade);
		--cart-bot-line-iva-display:none;
		--cart-bot-line-iva-font-size:var(--text-base);
		--cart-bot-line-subtotal-display:none;
		--cart-bot-line-subtotal-font-size:var(--text-base);
		--cart-bot-line-descount-display:flex;
		--cart-bot-line-descount-font-size:var(--text-base);
		--cart-bot-line-total-display:flex;
		--cart-bot-line-total-font-size:var(--text-base);


		/* Favorites panel config */
		--fav-cart-select-list-display:none;
		--fav-drawer-width:300px;
		--fav-drawer-height:350px; /*  Use in mobile */


		/* # Footer */
		--footer-height: 60px;
		--footer-color-base:var(--light-color-tint);
		--footer-color-content-container:var(--light-color-tint);
		--footer-color-menu-title:var(--light-color-contrast);
		--footer-color-menu-item:var(--light-color-dark);
		--footer-color-text:var(--light-color-contrast);
		--footer-color-icons:var(--medium-color);
		--footer-size-icons:1.5rem;

		/* ### Footer columns of content */
		--footer-content-cols-xl:12;  /* major of 1280 */
		--footer-content-cols-lg:8;  /* major of 1024 */
		--footer-content-cols-md:6;  /* major of 768 */
		--footer-content-cols-sm:4;  /* major of 640 */
		--footer-content-cols-xs:2;  /* major of 480 */
		--footer-content-cols-xxs:1; /* major of 340 */


		/* ## Footer BOTTOM - copyright  & fullglass icons  */
		--footer-bottom-height:60px;
		--footer-bottom-color-base:var(--dark-main-color);


		
}

@media (max-width:1040px) {
	:root{
		--cart-width:380px;
	}
}


@media (max-width:420px) {
	:root{
		--cart-width:100vw;
	}
}