/* ==========================================================
   site.css — tokens e menu compartilhados por todo o site.
   Editar cor, fonte ou item de menu aqui reflete em todas
   as páginas (home, artigos, skills2030) de uma vez.
   ========================================================== */

:root {
  --ink:     #0A1A2F;
  --paper:   #FFFFFF;
  --accent:  #16314F;
  --muted:   #6B7280;
  --border:  #E5E7EB;
  --card:    #F3F5F8;

  --f-display: 'Helvetica Neue', Arial, sans-serif;
  --f-body:    'Helvetica Neue', Arial, sans-serif;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;
}

nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 2.5rem;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  font-family: var(--f-body);
}

.nav-logo {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
}

.nav-links { display: flex; gap: 2rem; list-style: none; }

.nav-links a {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}

.nav-links a:hover,
.nav-links a.active { color: var(--accent); }

/* Variante escura do menu, para páginas com fundo navy (ex: home) */
body.theme-dark nav {
  background: rgba(10,26,47,0.92);
  border-bottom-color: #16314F;
}
body.theme-dark .nav-logo { color: #F7F5F0; }
body.theme-dark .nav-links a { color: #8FA6C4; }
body.theme-dark .nav-links a:hover,
body.theme-dark .nav-links a.active { color: #7FB0E0; }

@media (max-width: 720px) {
  .nav-links { display: none; }
}