:root{
    /* ESQUEMA DE CORES */
    --primary-color: rgb(130, 129, 129);
    --secondary-color: black;
    --background-color: rgb(248, 238, 215);
    --button-background-color: #0b4223;
    --bege-color: rgb(248, 238, 215);

    /* BORDAS */
    --border-radius: 15px;
    --button-padding: 10px 20px;

    /* OUTRAS VARIÁVEIS */
    --box-shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.3);
    --transition-duration: 0.3s;
    --carousel-height: 50vh;
    --gallery-height: 200px;
    --img-height: 370px;
    --img-top: 75px;
    --gallery-margin-bottom: 30px;
    --img-margin-bottom: 100px;
}


body{
    font-family: Arial, Helvetica, sans-serif;
    background-color: var(--background-color);
    color: var(--primary-color);
}

footer{
    background-color: var(--primary-color);
    color: var(--bege-color);
}

nav{
    background-color: var(--primary-color); 
    color: var(--bege-color);
}

nav a{
    color: var(--bege-color);
}

.botao{
    background-color: var(--primary-color);
    color: var(--bege-color);
    border-radius: var(--border-radius);
    padding: var(--button-padding);
    font-weight: 600;
    transition: background-color var(--transition-duration) ease;
}

.carousel-item {
    height: var(--carousel-height);
    background-size: cover;
    background-position: center;
}

.gallery-item {
    background-size: cover;
    background-position: center;
    height: var(--gallery-height);
    transition: transform var(--transition-duration) ease, box-shadow var(--transition-duration) ease;
    margin-bottom: var(--gallery-margin-bottom);
}

.gallery-item:hover {
    box-shadow: var(--box-shadow-hover);
    transform: scale(1.1);
}

.altura_img {
    background-size: cover;
    background-position: center;
    margin-bottom: var(--img-margin-bottom);
    height: var(--img-height);
    position: relative;
    top: var(--img-top);
}



/* Dark Mode */
.dark-mode {
    --primary-color: rgb(248, 238, 215);
    --secondary-color: rgb(130, 129, 129);
    --background-color: rgb(34, 34, 34); /* Fundo escuro */
    --button-background-color: rgb(60, 60, 60); /* Botões escuros */
    --bege-color: rgb(248, 238, 215);

    background-color: var(--background-color);
    color: var(--primary-color);
}


.dark-mode nav, 
.dark-mode footer {
    background-color: var(--secondary-color);
    color: var(--background-color);
}

.dark-mode nav a {
    color: var(--background-color);
}

.dark-mode .botao {
    background-color: var(--button-background-color);
    color: var(--primary-color);
}