@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('./index.css');
@import url('./header.css');
@import url('./footer.css');
@import url('./carrosel.css');
@import url('./acesso.css');
@import url('./detalhes-produto.css');
@import url('./ecoaroma.css');
@import url('./minha-sacola.css');
@import url('./painel.css');
@import url('./blog.css');
@import url('./perfil.css');

@import url('./formularios.css');
@import url('./botoes.css');
@import url('./tooltip.css');
@import url('./table.css');
@import url('./badge.css');
@import url('./cards.css');
@import url('./politicas-de-privacidade.css');
@import url('./termos-condicoes.css');
@import url('./detalhes-blog.css');


:root {
    --rose: #bb8484;
    --vanilla: #E6DFD5;
    --light-brown: #D5C3AD;
    --dark-brown: #583442;
    --dark-red: #9C2626;
    --dark-grey: #1A1A1A;
    --light-grey: #C0C0C0;
    --white: #FFFFFF;
    --green: #7cbc9a;
    --red: #d54c4a;
    
    --font-size: 16px;
    --montserrat: "Montserrat", sans-serif;
}

html {
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--montserrat);
    color: var(--dark-grey);
}

main {
    margin-top: 148px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

h1 { 
    font-size: 20px;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}

h2, h3, h4, h5, h6 {
    font-size: 18px;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}

ul, ol, li {
    list-style: none;
    margin: 0;
    padding: 0;

}
a {
    position: relative;
    display: inline-block;
    text-decoration: none;
}

a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--dark-red);
    transition: width 0.3s ease;
}

.custom-title {
    font-size: 32px !important;
}

.custom-subtitle {
    font-size: 28px !important;
}

.custom-title.dark-brown,
.custom-subtitle.dark-brown {
    color: var(--dark-brown);
}

.custom-title.rose,
.custom-subtitle.rose {
    color: var(--rose);
}

.custom-title.dark-red,
.custom-subtitle.dark-red {
    color: var(--dark-red);
}

.custom-title.white,
.custom-subtitle.white {
    color: var(--white);
}

.custom-validation {
    width: 100%;
    display: none;
    color: var(--white);
    padding: 8px 12px;
    margin-bottom: 24px;
    border-radius: 4px;
    max-width: 300px;
    text-align: center;
}

.custom-validation.success {
    background-color: var(--green);
}

.custom-validation.error {
    background-color: var(--red);
}

.custom-validation.show {
    display: block;
}