/* Tema Base - Variáveis Compartilhadas */
:root {
  /* Fontes */
  --font-serif: "Instrument Serif";
  --font-sans: "Satoshi";
}

/* Tema Claro (Padrão) */
:root {
  /* Cores - Rosa */
  --Pink-1: #FFFBFFFF;
  --Pink-2: #FFF5FFFF;
  --Pink-3: #FFE3FFFF;
  --Pink-4: #FFD1FFFF;
  --Pink-5: #FFC0FFFF;
  --Pink-6: #FFABFCFF;
  --Pink-7: #FF8FF6FF;
  --Pink-8: #FF64EFFF;
  --Pink-9: #FA5FEBFF;
  --Pink-10: #ED52DFFF;
  --Pink-11: #B501AAFF;
  --Pink-12: #660060FF;
  
  /* Cores - Cinza */
  --Grays-1: #FCFCFCFF;
  --Grays-2: #F9F9F9FF;
  --Grays-3: #EFEFEFFF;
  --Grays-4: #E8E8E8FF;
  --Grays-5: #E0E0E0FF;
  --Grays-6: #D8D8D8FF;
  --Grays-7: #CECECEFF;
  --Grays-8: #BBBBBBFF;
  --Grays-9: #1E1E1EFF;
  --Grays-10: #343434FF;
  --Grays-11: #646464FF;
  --Grays-12: #202020FF;
  
  /* Cores Semânticas */
  --text-primary: var(--Grays-12);
  --text-secondary: var(--Grays-11);
  --background-primary: var(--Grays-2);
  --background-secondary: var(--Grays-5);
  --accent-primary: var(--Pink-9);
  --accent-secondary: var(--Pink-7);
}

/* Tema Escuro */
[data-theme="dark"] {
  /* Cores - Rosa */
  --Pink-1: #170D16FF;
  --Pink-2: #230F20FF;
  --Pink-3: #3B1037FF;
  --Pink-4: #50034BFF;
  --Pink-5: #5E0C57FF;
  --Pink-6: #6D1C66FF;
  --Pink-7: #872B7EFF;
  --Pink-8: #AC37A1FF;
  --Pink-9: #FA5FEBFF;
  --Pink-10: #ED52DFFF;
  --Pink-11: #FF77FBFF;
  --Pink-12: #FFCDF8FF;
  
  /* Cores - Cinza */
  --Grays-1: #111111FF;
  --Grays-2: #181818FF;
  --Grays-3: #222222FF;
  --Grays-4: #292929FF;
  --Grays-5: #303030FF;
  --Grays-6: #3A3A3AFF;
  --Grays-7: #474747FF;
  --Grays-8: #606060FF;
  --Grays-9: #6C6C6CFF;
  --Grays-10: #5F5F5FFF;
  --Grays-11: #B3B3B3FF;
  --Grays-12: #EDEDEDFF;
  
  /* Cores Semânticas */
  --text-primary: var(--Grays-12);
  --text-secondary: var(--Grays-11);
  --background-primary: var(--Grays-2);
  --background-secondary: var(--Grays-5);
  --accent-primary: var(--Pink-9);
  --accent-secondary: var(--Pink-7);
}

a {
  text-decoration: none;
}

/* Tipografia */
h1 {
  font-family: var(--font-serif);
  font-size: 72px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0em;
  color: var(--text-primary);
  text-transform: uppercase;
  @media (max-width: 1310px) {
    font-size: 48px;
  }
}

h2 {
  font-family: var(--font-serif);
  font-size: 64px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0em;
  color: var(--text-primary);
  @media (max-width: 1310px) {
    font-size: 40px;
  }
}

h3 {
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0em;
  color: var(--text-secondary);
  text-wrap: nowrap;
  @media (max-width: 1310px) {
    font-size: 32px;
  }
}

.body1 {
  font-family: var(--font-sans);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: 0em;
  color: var(--text-secondary);

 @media (max-width: 1310px) {
    font-size: 24px;
  }
}

.body2 {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0px;
  color: var(--text-secondary);
  @media (max-width: 1310px) {
    font-size: 16px;
  }
}

.body3 {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0px;
  color: var(--text-secondary);
}

.nav-links {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0em;
  color: var(--text-primary);
  text-decoration: none;
  transition: all 0.5s ease-in;

  :hover {
    text-decoration: underline;
  }
}

.mail {
 background-color: var(--Pink-9);
 padding: 6px 16px 8px 16px;
 color: var(--Grays-1);
 border-radius: 8px;
 cursor: pointer;
 border: none;

 :hover {
    background-color: var(--Pink-12);
    text-decoration: none;
    transition: background-color 0.2s ease-in-out;
    
  }
}

.btn {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0em;
  height: 40px;
  color: var(--Grays-2);
  background-color: var(--Grays-12);
  padding: 0px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-wrap: nowrap;
  gap: 6px;
  decoration: none;
}

.btn:hover {
    background-color: var(--Grays-11);
    text-decoration: none;
    transition: background-color 0.2s ease-in-out;
  }

.btn-secondary {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0em;
  height: 40px;
  padding: 0px 16px;
  background-color: var(--Grays-2);
  color: var(--Grays-12);
  border: 1px solid var(--Grays-8);
  border-radius: 6px;
  cursor: pointer;
  text-wrap: nowrap;
}

.btn-secondary:hover {
    background-color: var(--Grays-3);
    text-decoration: none;
    transition: background-color 0.2s ease-in-out;
  }

.project-cover {
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  :hover {
    transform: scale(1.05);
    transition: transform 0.3s ease-in-out;
  }
}



/* Classes de Utilidade para Cores */
.bg-pink-1 { background-color: var(--Pink-1); }
.bg-pink-2 { background-color: var(--Pink-2); }
.bg-pink-3 { background-color: var(--Pink-3); }
.bg-pink-4 { background-color: var(--Pink-4); }
.bg-pink-5 { background-color: var(--Pink-5); }
.bg-pink-6 { background-color: var(--Pink-6); }
.bg-pink-7 { background-color: var(--Pink-7); }
.bg-pink-8 { background-color: var(--Pink-8); }
.bg-pink-9 { background-color: var(--Pink-9); }
.bg-pink-10 { background-color: var(--Pink-10); }
.bg-pink-11 { background-color: var(--Pink-11); }
.bg-pink-12 { background-color: var(--Pink-12); }

.bg-gray-1 { background-color: var(--Grays-1); }
.bg-gray-2 { background-color: var(--Grays-2); }
.bg-gray-3 { background-color: var(--Grays-3); }
.bg-gray-4 { background-color: var(--Grays-4); }
.bg-gray-5 { background-color: var(--Grays-5); }
.bg-gray-6 { background-color: var(--Grays-6); }
.bg-gray-7 { background-color: var(--Grays-7); }
.bg-gray-8 { background-color: var(--Grays-8); }
.bg-gray-9 { background-color: var(--Grays-9); }
.bg-gray-10 { background-color: var(--Grays-10); }
.bg-gray-11 { background-color: var(--Grays-11); }
.bg-gray-12 { background-color: var(--Grays-12); }

.text-pink-1 { color: var(--Pink-1); }
.text-pink-2 { color: var(--Pink-2); }
.text-pink-3 { color: var(--Pink-3); }
.text-pink-4 { color: var(--Pink-4); }
.text-pink-5 { color: var(--Pink-5); }
.text-pink-6 { color: var(--Pink-6); }
.text-pink-7 { color: var(--Pink-7); }
.text-pink-8 { color: var(--Pink-8); }
.text-pink-9 { color: var(--Pink-9); }
.text-pink-10 { color: var(--Pink-10); }
.text-pink-11 { color: var(--Pink-11); }
.text-pink-12 { color: var(--Pink-12); }

.text-gray-1 { color: var(--Grays-1); }
.text-gray-2 { color: var(--Grays-2); }
.text-gray-3 { color: var(--Grays-3); }
.text-gray-4 { color: var(--Grays-4); }
.text-gray-5 { color: var(--Grays-5); }
.text-gray-6 { color: var(--Grays-6); }
.text-gray-7 { color: var(--Grays-7); }
.text-gray-8 { color: var(--Grays-8); }
.text-gray-9 { color: var(--Grays-9); }
.text-gray-10 { color: var(--Grays-10); }
.text-gray-11 { color: var(--Grays-11); }
.text-gray-12 { color: var(--Grays-12); }

/* Classes Semânticas */
.bg-primary { background-color: var(--background-primary); }
.bg-secondary { background-color: var(--background-secondary); }
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.accent-primary { color: var(--accent-primary); }
.accent-secondary { color: var(--accent-secondary); }

/* Utilitários para Tema */
.theme-toggle {
  cursor: pointer;
}

/* Script para alternar tema */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
  }
  
  :root:not([data-theme]) body {
    background-color: var(--Grays-1);
    color: var(--Grays-12);
  }
}