:root{
    
    /**************************
    Necesita cargar la fuenta en el componente 
    "style css > fuentes y letras" 
    *************************************************/
    --font-body-family:
    
'Quicksand', sans-serif;
    --font-title-family:
    
'Quicksand', sans-serif;

    --font-bold: 700;
    --font-regular: 400;
    --font-light: 300;
    
    /* text */ 
    
    --body-txt-default-color:#3b3b3b;
    
    /* title */ 
    
    --home-title-size: 1.5rem;
    --title-color: #636468;
    --title-transform: uppercase;
    --title-weight:
    var(
    
--font-regular);
    
    
    /* primary */ 
    --primary-color: #667058;
    --primary-contrast: #fff;
    
    --primary-hover-color: #555d49;
    --primary-hover-contrast:
    var(
    
--primary-contrast);
    
    
    /* secondary */
    --secondary-color:
    var(
    
--primary-color);
    --secondary-contrast:
    var(
    
--primary-contrast);
    
    --secondary-hover-color:
    var(
    
--primary-hover-color);
    --secondary-hover-contrast:
    var(
    
--secondary-contrast);
    
    
    /* danger */ 
    --danger-color: #dc3545;
    --danger-contrast: white;
    
    --danger-hover-color: #c82333;
    --danger-hover-contrast:
    var(
    
--danger-contrast);
    
    /*highlight elementos resaltados*/
    --highlight-color:#eff4ef;
    --highlight-contrast:#114f24;
    
    --highlight-hover-color:#1580b1;
    --highlight-hover-contrast:white;
    
    /*********************************************
    DESCUENTOS
    **********************************************/
    --discount-bg-color:
    var(
    
--highlight-contrast);
    --discount-txt-color:
    var(
    
--highlight-color);
    
    /*********************************************
    MENU
    **********************************************/
    
    /* level 1 */
    --lv1-size: .9rem;
    --lv1-txt-color: #000000;
    --lv1-bg-color: transparent;
    
    --lv1-hover-txt-color: #237820;
    --lv1-hover-bg-color: none;
    --lv1-hover-decoration: rgb(99 100 104);

    
    /* level 2 */
    --lv2-size: .75rem;
    --lv2-txt-color: #404040;
    --lv2-bg-color: transparent;
    
    --lv2-hover-txt-color: #ffffff;
    --lv2-hover-bg-color: rgb(99 100 104);
    
    /* level v3 */
    --lv3-size:
    var(
    
--lv2-size);
    --lv3-txt-color:
    var(
    
--lv2-txt-color);
    --lv3-bg-color: transparent;
    
    --lv3-hover-txt-color:
    var(
    
--lv2-hover-txt-color);
    --lv3-hover-bg-color:
    var(
    
--lv2-hover-bg-color);
    
    /* menu title (titulos aparecen cuando existe nivel 3)*/
    --menu-title-size:
    var(
    
--lv3-size);
    --menu-title-weight:
    var(
    
--font-bold);
    --menu-title-txt-color:
    var(
    
--lv3-txt-color);
    
    /* cabecera */ 
    --header-bg-color:white;
    
    /*navbar*/
    --header-navbar-bg-color: white;
    --header-navbar-mobile-bg-color:
    var(
    
--header-navbar-bg-color);
    
    /*redes sociales*/
    --rrss-bg: #44754e;
    --rrss-txt-color: #ffff;

    
    /*******************************************************************
    BORDES
    ********************************************************************/
    --default-border-radius: .25rem;
    
    /********************************************************************
    COLECCIONES PRODUCTO
    *********************************************************************/
    --product-collection-border-radius: 1.25rem;
    --product-collection-bg: white;
    --product-collection-txt-direction:center;
    
    /********************************************************************
    footer
    *********************************************************************/ 
    
    --footer-bg-color:#f9f9f9;
    --footer-txt-color:#fff;
    
    /*******************************************************************
    DESCUENTOS
    ********************************************************************/
}