:root{
    
    /**************************
    Necesita cargar la fuenta en el componente 
    "style css > fuentes y letras" 
    *************************************************/
    
--font-body-family: "Roboto", sans-serif;
    
--font-title-family: "Roboto", sans-serif;
    
--font-bold: 700;
    
--font-regular: 400;
    
--font-light: 300;

    
    /* text */
    
--body-txt-default-color: #5f6e83;
    
    /* title */
    
--home-title-size: 1.7rem;
    
--home-title-size-mobil: 1.5rem;
    
--title-color: #000000;
    
--title-transform: uppercase;
    
--title-weight:
    var(--font-regular);
    
    
    /* primary */
    
--primary-color: #000000;
    
--primary-contrast: #fff;
    
--primary-hover-color: #fc8b2a;
    
--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: #fc912c;
    
--highlight-contrast: black;
    
--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: #000000;
    
--lv1-bg-color: white;
    
--lv1-hover-txt-color: #191919;
    
--lv1-hover-bg-color: none;
    
--lv1-hover-decoration:
    rgb(249 189 85);
    
    /* level 2 */
    
--lv2-size: .75rem;
    
--lv2-txt-color: #5f6e83;
    
--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: #000000;
    
--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: #000;
    
    /* cabecera */
    
--header-bg-color:white;
    
    /*navbar*/
    
--header-navbar-bg-color: linear-gradient(rgb(245 245 245 / 59%), rgb(251 251 251 / 10%)), url(header-textura.png);
    
--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: #333333;
    
    /*******************************************************************
    DESCUENTOS
    ********************************************************************/
}