:root[data-theme="light"]{
    --bg-color: #ffffff;
    --txt-color: #000000;
    --extra-bg-color: #ebe3e3; 
    --extra-txt-color: #0c0a0a;
    --header-bg-color: rgb(245, 237, 237);
    --bg-color-after: linear-gradient(to bottom, rgba(255,255,255,1) 15%, rgba(255,255,255,0.6) 55%, rgba(255,255,255,0.2) 85%, rgba(255,255,255,1) 100%);
    --bg-calculator: radial-gradient(circle, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    --bg-modal: rgba(0, 0, 0, 0.3);
    --box-shadow: #000;
    --blue-theme: #2e4052;
    --filter: none;
    --no-filter: none;
    --border-color: var(--txt-color);
    --extra-border-color: var(--extra-txt-color);
    --hover-color: var(--txt-color);
    --extra-hover-color: var(--extra-txt-color);
}

:root[data-theme="dark"]{
    --bg-color: #000000;
    --txt-color: #ffffff;
    --extra-bg-color: #0c0a0a;
    --extra-txt-color:  #ebe3e3;
    --header-bg-color: rgb(36, 33, 33); 
    --bg-color-after: linear-gradient(to bottom, rgba(0,0,0,1) 15%, rgba(0,0,0,0.6) 55%, rgba(0,0,0,0.2) 85%, rgba(0,0,0,1) 100%);
    --bg-calculator: radial-gradient(circle, rgba(255, 255, 255, 0) 0%, #000000 100%);
    --bg-modal: rgba(255, 255, 255, 0.3);
    --box-shadow: #fff;
    --blue-theme: rgb(41, 61, 151);
    --filter: invert(1);
    --no-filter: none;
    --border-color: var(--txt-color);
    --extra-border-color: var(--extra-txt-color);
    --hover-color: var(--txt-color);
    --extra-hover-color: var(--extra-txt-color);
}


h1, h2{
    color: var(--blue-theme);
}

.nav-content ul li a{
    color: var(--blue-theme);
}


.main-header{
    background-color: var(--header-bg-color);
    box-shadow: 1px 1px 10px var(--box-shadow);
}

.nav-content{
    background-color: var(--extra-bg-color);
    border: 2px solid var(--border-color);
    box-shadow: 3px 2px 2px var(--box-shadow);
}

#close-button{
    border: 1.7px solid var(--border-color)
}

#home::after{
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bg-color-after);
    z-index: -1;
    pointer-events: none;
}

.presentation-subtitle{
    color: var(--txt-color);
}

.card{
    background-color: var(--extra-bg-color);
    color: var(--extra-txt-color);
}

.card:hover{
    filter: brightness(1.3);
    transform: scale(1.02);
    box-shadow: 2px 2px 1px var(--box-shadow);
}

#services::after{
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bg-color-after);
    z-index: -1;
    pointer-events: none;
}

.accordion-item:hover{
    background-color: var(--extra-bg-color);
}

.accordion-item.active{
    background-color: var(--extra-bg-color);
}

.accordion-content{
    background-color: var(--extra-bg-color);
}

.main-footer{
    background-color: var(--extra-bg-color);
}


#about-us, #contact{
    background-color: var(--bg-color);
    color: var(--txt-color);
}

.main-header, #home, #services, .main-footer{
    color: var(--txt-color);
}

.accordion-header h2{
    color: var(--txt-color);
}

.card > img{
    filter: var(--filter);
}

.accordion-header > img{
    filter: var(--filter);
}

.contact-item > img{
    filter: var(--filter);
}

#nav-button > img{
    filter: var(--filter);
}

#close-button > img{
    filter: var(--filter);
}

#toggleButton > img{
    filter: var(--filter);
}

.header-nav a{
    color: var(--blue-theme);
}

.toggleIcon{
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.toggleIcon:hover{
    transform: scale(1.2);
}

.toggleIcon.fade-out{
    opacity: 0;
}

/*------------------IMC HTML------------------*/


.second-header{
    background-color: var(--header-bg-color);
    box-shadow: 1px 1px 10px var(--box-shadow);
}

.second-header p{
    color: var(--txt-color);
}

.back-anchor a > img{
    filter: var(--filter);
    transition: all 0.3s;
}


.back-anchor a img:hover{
    transform: scale(1.3);
}

.calculator-container{
    border: 2px solid var(--border-color);
    background: var(--bg-calculator);
}

.input-container label{
    color: var(--extra-txt-color);
}

.input-container input{
    border: 1px solid var(--extra-border-color);
    color: var(--txt-color);
}

.input-container input::placeholder{
    color: var(--extra-txt-color);
}

.button-container button{
    border: 1px solid var(--extra-border-color);
    background-color: var(--extra-bg-color);
    color: var(--extra-txt-color);
    transition: all 0.3s;
}

.button-container button:hover{
    border: 1px solid var(--extra-border-color);
    background: var(--extra-hover-color);
    color: var(--extra-bg-color);
}

#result{
    color: var(--txt-color);
}

/*------------GUIA DE PRIMEIROS SOCORROS---------------*/

.section-presentation h2{
    color: var(--extra-txt-color);
}

.card-emergency{
    background-color: var(--extra-bg-color);
    color: var(--extra-txt-color);
    border: 1px solid var(--border-color);
}

.card-emergency h2{
    color: var(--txt-color);
}

.modal-background{
    background-color: var(--bg-modal);
}

.modal-container{
    background: var(--extra-bg-color);
    border: 1px solid var(--border-color);
    box-shadow: 4px 4px 8px var(--box-shadow);
    color: var(--txt-color);
}

.real-image{
    filter: var(--no-filter);
}

#closeModalBtn{
    color: var(--txt-color);
    border: 1px solid var(--border-color);
    background-color: var(--extra-bg-color);
    transition: all 0.4s ease;
}

#closeModalBtn:hover{
    background-color: var(--extra-hover-color);
    color: var(--bg-color);
    border: var(--bg-color);
    cursor: pointer;
}

/*-----------------SAÚDE MENTAL-------------------*/

.presentation p{
    color: var(--txt-color)
}

.tip-list .tip-item{
    color: var(--txt-color);
}

.tip-list{
    color: var(--txt-color);
    background: var(--extra-bg-color);
    border: 1px solid var(--border-color);
}

.diary-title{
    color: var(--blue-theme);
}

#diaryButton, #resetButton{
    border: 1px solid var(--border-color);
    background: var(--extra-bg-color);
    color: var(--txt-color);
}

#diaryButton:hover, #resetButton:hover{
    border: 1px solid var(--border-color);
    background: var(--extra-hover-color);
    color: var(--bg-color);   
}

#diaryInput{
    color: var(--txt-color);
    background: var(--extra-bg-color);
    border: 1px solid var(--border-color);
}

#diaryInput::placeholder{
    color: var(--extra-txt-color);
}

#lastSaved{
    color: var(--txt-color);
}

#entries li{
    color: var(--txt-color);
}

#notations{
    color: var(--txt-color);
}

.form-container{
    border: 1px solid var(--extra-border-color);
    background-color: var(--extra-bg-color);
}

#formHumor{
    color: var(--txt-color);
}

#testButton{
    border: 1px solid var(--border-color);
    color: var(--txt-color);
    background: var(--bg-color);
}

#testButton:hover{
    border: 1px solid var(--bg-color);
    background: var(--txt-color);
    color: var(--bg-color);
}

.custom-radio span{
    background: var(--bg-color);
    border: 1px solid var(--border-color);
}

.custom-radio input:checked + span::after{
    background: var(--blue-theme);
}

#testResult{
    color: var(--txt-color);
}

#testResult a{
    color: var(--blue-theme)
}