/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */

@import '_partials/_fonts.css';
@import '_partials/_buttons.css';
@import '_partials/_components.css';

@import 'header.css';
@import 'footer.css';

@import 'home.css';
@import 'category-product.css';
@import 'product-miniature.css';
@import 'product.css';
@import 'contact.css';
@import 'log-register.css';
@import 'cart.css';
@import 'checkout.css';
@import 'account.css';
@import 'cms.css';

/* ---- ROOT ---- */
:root{
    /*==== COLORS ====*/
    /* -- Primary -- */
    --color-violet: #7D00FF;

    /* -- Secondary -- */
    --color-blue: #00E5FF;
    --color-green: #A8FFB1;
    --color-violetpale: #FAF6FF;

    /* -- Neutral -- */
    --color-black: #252525;
    --color-lightgrey: #F8F8F8;
    --color-grey: #B8B8B8;
    --color-white: #FFFFFF;
    /*==== FIN COLORS ====*/

    /*==== SHADOWS ====*/
    --shadow: 0px 5px 50px 0px rgba(0, 67, 101, 0.08),
              0px 2px 6px 0px rgba(130, 169, 188, 0.08);
    /*==== FIN SHADOWS ====*/

    /*==== BORDER RADIUS ====*/
    --br-2: 2px;
    --br-6: 6px;
    --br-12: 12px;
    /*==== FIN BORDER RADIUS ====*/

    /*==== FONT ====*/
    --font-normal : 'Montserrat', Arial, serif;
    --font-italic : 'MontserratItalic', Arial, serif;
    /*==== FIN FONT ====*/
}

html{
    font-size: 16px;
    scroll-behavior: smooth;
}

body{
    font-family: var(--font-normal);
    font-weight: 400;
    font-style: normal;
    color: var(--color-black);
    font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem); /* ajuste entre 14px et 16px */
    line-height: clamp(1.3rem, 1.5vw + 0.75rem, 1.5rem);
}

#wrapper{
    background: var(--color-white);
    margin-bottom: clamp(4rem, 5vw, 5rem);
}

h1, h2, h3{
    font-weight: 700;
    color: var(--color-black);
}
.h1, .h2, .h3{text-transform: inherit}

h1, .h1{
    font-size: clamp(1.125rem, 1.125vw + 1.3125rem, 1.625rem);
    line-height: clamp(1.6875rem, 1.6875vw + 1.828125rem, 2.4375rem);
}

h1.h1__title{
    font-size: clamp(1.5rem, 1.5vw + 1.125rem, 2.25rem);
    line-height: clamp(2.25rem, 2.25vw + 1.6875rem, 3.375rem);
}

h2, .h2{
    font-size: clamp(1.25rem, 1.25vw + 0.9375rem, 1.5rem);
    line-height: clamp(1.875rem, 1.875vw + 1.40625rem, 2.25rem);
}

h3, .h3{
    font-size: clamp(1.125rem, 1.125vw + 0.9375rem, 1.25rem);
    line-height: clamp(1.6875rem, 1.6875vw + 1.265625rem, 1.875rem);
}

p, a, span, label, .label, li{
    color: var(--color-black);
    font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem); /* ajuste entre 14px et 16px */
}

@media screen and (min-width: 1200px){
    .container{width: 1320px;}
}