:root{
    
    /**************************
    Necesita cargar la fuenta en el componente 
    "style css > fuentes y letras" 
    *************************************************/
    
--font-body-family:
    'Raleway', sans-serif;
    
--font-title-family:
    'Open Sans', sans-serif;
    
--font-bold: 700;
    
--font-regular: 400;
    
--font-light: 300;
    
a
    
    /* text */
    
--body-txt-default-color: #5f6e83;
    
    /* title */
    
--home-title-size: 1.7rem;
    
--home-title-size-mobil: 1.5rem;
    
--title-color: #5f6e83;
    
--title-transform: uppercase;
    
--title-weight:
    var(--font-regular);
    
    
    /* primary */
    
--primary-color: #2CBA35;
    
--primary-contrast: #fff;
    
--primary-hover-color: #358ed2;
    
--primary-hover-contrast:
    var(--primary-contrast);
    
    
    /* secondary */
    
--secondary-color: #1400A8;
    
--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: #336ebf;
    
--highlight-contrast:white;
    
--highlight-hover-color:#1580b1;
    
--highlight-hover-contrast:white;
    
    /*********************************************
    DESCUENTOS
    **********************************************/
    
--discount-bg-color:
    var(--highlight-color);
    
--discount-txt-color:
    var(--highlight-contrast);
    
    /*********************************************
    MENU
    **********************************************/
    
    /* level 1 */
    
--lv1-size: 1rem;
    
--lv1-txt-color: #ffffff;
    
--lv1-bg-color: white;
    
--lv1-hover-txt-color: #191919;
    
--lv1-hover-bg-color: none;
    
--lv1-hover-decoration: #1400A8;
    
    /* level 2 */
    
--lv2-size: .75rem;
    
--lv2-txt-color: #000000;
    
--lv2-bg-color: transparent;
    
--lv2-hover-txt-color: #212529;
    
--lv2-hover-bg-color:
    rgb(222, 226, 230);
    
    /* 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: var(--primary-color);
    
--footer-txt-color:#ffffff;

 /*redes sociales*/
    
--rrss-bg:
    var(--primary-color);
    
--rrss-txt-color:
    var(--lv1-bg-color);
    
--rrss-border-radius: 50%;
    
    /*******************************************************************
    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:
    url(TEXTURA-FOOTER.png);
    
--footer-txt-color:#ffffff;
    
    /*******************************************************************
    DESCUENTOS
    ********************************************************************/
}