@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@200;400&display=swap');

/* ==================== VARIÁVEIS ==================== */
:root, :root[data-theme='dark'] {
  --primary-color: #F0F0F0;
  --primary-bg-color: #111217;
  --secondary-bg-color: #28292E;
  --primary-border-color: #28292E;
  --secondary-border-color: #56575A;
  --title-color: #F0F0F0;
  --text-color: #9A9A9C;
  --link-color: #9A9A9C;
  --icon-color: #C7C8C9;
}

:root[data-theme='light'] {
  --primary-color: #0B0B0F;
  --primary-bg-color: #E9E9E9;
  --secondary-bg-color: #C7C8C9;
  --primary-border-color: #C7C8C9;
  --secondary-border-color: #9A9A9C;
  --title-color: #0B0B0F;
  --text-color: #28292E;
  --link-color: #28292E;
  --icon-color: #56575A;
}

html[data-theme='light'] .brand__logo { filter: invert(1); }
html[data-theme='light'] .technologies__logo { filter: invert(80%); }

/* ==================== RESET ==================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  vertical-align: baseline;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: var(--secondary-bg-color) transparent;
}

body {
  background: var(--primary-bg-color);
  font-family:'Inter', Tahoma, Geneva, Verdana, sans-serif;
  color: var(--text-color);
}

::-webkit-scrollbar { width: 0.5rem; }
::-webkit-scrollbar-track { background-color: transparent; }
::-webkit-scrollbar-thumb { background: var(--secondary-bg-color); border-radius: 50rem; }

a { text-decoration: none; color: var(--text-color); }
a:hover { color: var(--primary-color); }

i { color: var(--icon-color); }
b { font-weight: 400; }

/* ==================== TIPOGRAFIA ==================== */
h1, h2, h3 { font-family: 'League Spartan', Tahoma, Geneva, Verdana, sans-serif; text-transform: uppercase; color: var(--title-color); font-weight: 200; margin-top: 0; }
h1 { font-size: 2.5rem; margin-bottom: 1.5rem; }
h2 { font-size: 2rem; text-align: center; letter-spacing: 0.4rem; margin-bottom: 1.25rem; }
h3 { font-size: 1.55rem; text-align: left; margin-bottom: 1rem; }
h4 { color: var(--primary-color); font-weight: 400; font-size: 1.15rem; text-align: left; margin-bottom: 0.75rem; }

p, span, li { font-size: 1rem; }
p { text-align: justify; margin-bottom: 1rem; }
ul.resume__list, ul.about__list, ul.card__list { margin-top: 0.5rem; margin-bottom: 1.5rem; padding-left: 1.75rem; }
ul.resume__list li { margin-bottom: 0.75rem; line-height: 1.6; }

/* ==================== BOTÕES ==================== */
.btn { display: flex; justify-content: center; align-items: center; gap: 0.625rem; width: 100%; background: transparent; border-radius: 3.125rem; border: none; padding: 0.875rem 1.5rem; transition: ease-in-out .3s; cursor: pointer; color: var(--primary-color); }
.btn:hover { transform: scale(1.05); transition: ease-in-out .3s; }
.btn span, .btn i { font-size: 1.25rem; text-transform: uppercase; }
.btn--primary { border: 1px solid var(--primary-color); }

/* ==================== MAIN ==================== */
main, .projects, .about, .contact, .resume { padding: 2.5rem 1rem; }
section { margin: 3rem 0; }

main { display: flex; flex-direction: column; gap: 2rem; }
.main__content1 { display: flex; flex-direction: column; gap: 1.5rem; }

/* ==================== ABOUT ==================== */
.about { display: flex; flex-direction: column; gap: 1.5rem; }
.about__content1, .about__content2 { display: flex; flex-direction: column; gap: 2rem; }

.about__photo {
  width: 35%;
  max-width: 200px;
  min-width: 120px;
  object-fit: cover;
  border-radius: 50rem;
  border: 1px solid var(--primary-border-color);
  margin-bottom: 1.5rem;
}

.about__description { display: flex; flex-direction: column; gap: 1.5rem; }
.about__icons { display: flex; align-items: center; gap: .85rem; }
.about__icons i { font-size: 1.25rem; }

/* ==================== CURRÍCULO ==================== */
.resume__section h3 { margin-bottom: 1rem; font-size: 1.8rem; color: var(--title-color); }
.resume__list li strong { display: block; margin-bottom: 0.25rem; }

/* ==================== PROJECTS ==================== */
.projects { display: flex; flex-direction: column; gap: 2rem; }
.projects__card { display: flex; flex-direction: column; gap: 2rem; }
.card__cover { width: 100%; border-radius: 0.5rem; object-fit: cover; object-position: center; }
.card__body { display: flex; flex-direction: column; gap: 1rem; }
.card__description { color: var(--title-color); }
.card__buttons, .description__buttons { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ==================== CONTACT ==================== */
.contact { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; border-top: 1px solid var(--primary-border-color); border-bottom: 1px solid var(--primary-border-color); }
.contact p { text-align: center; }
.contact .btn { width: auto; }

/* ==================== FOOTER ==================== */
footer { margin: 5rem 0 0; text-align: center; }
footer p { font-size: .875rem; padding: 1rem; }

/* ==================== RESPONSIVIDADE ==================== */
@media (min-width: 768px) { h1 { font-size: 5rem; } h2 { font-size: 3rem; } main, .projects, .about { padding: 8rem 6rem 4rem; } .contact { padding: 6rem; } .contact p { width: 80%; } }
@media (min-width: 992px) { h3 { font-size: 2rem; } .projects__card { flex-direction: row; } .projects__card.card--reverse { flex-direction: row-reverse; justify-content: space-between; } }
@media (min-width: 1200px) { h2 { font-size: 4rem; } h3 { font-size: 2.5rem; } main { padding: 12rem 6rem 2rem; } }
@media (min-width: 1400px) { h1 { font-size: 6.25rem; } h2 { font-size: 4.5rem; } h3 { font-size: 3.25rem; } main, .technologies, .projects, .about { padding: 10rem 15rem 4rem; } }
.menu--social {
  display: flex;      
  gap: 1rem;          
  padding: 0;         
  margin: 0;          
  list-style: none;   
}

.menu--social li {
  display: inline-flex;   
  align-items: center;    
}

.menu__icon {
  font-size: 2rem;        
}
body {
  transition: background 0.3s, color 0.3s;
} 
a, .btn, .about__photo, .resume__section {
  transition: color 0.3s, background 0.3s, border-color 0.3s;
}
.btn--primary:hover {
  background-color: var(--primary-color);
  color: var(--primary-bg-color);
}
.btn:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
@media (max-width: 480px) {
  .menu--social { gap: 0.5rem; }
  .btn { font-size: 0.875rem; padding: 0.625rem 1rem; }
}