/* =========================================
   Design tokens (dark/light)
   ========================================= */
:root {
  --bg: #0b1220;
  --surface: #121a2b;
  --text: #e7ecf3;
  --muted: #a7b1c2;
  --heading: #f3f6fb;

  --primary: #8ab4ff;
  --accent: #a78bfa;
  --ring: rgba(138,180,255,0.35);

  --card: rgba(255,255,255,0.04);
  --border: rgba(255,255,255,0.10);
  --shadow-1: 0 10px 30px rgba(0,0,0,.25);

  --grad-start: var(--primary);
  --grad-end: var(--accent);

  --nav-fg: var(--muted);
  --nav-fg-active: var(--text);
  --nav-bg: rgba(10,14,25,0.55);

  --btn-fg: #0b1220;       /* texto sobre primary no dark */
  --btn-outline-fg: var(--text);

  --divider: rgba(255,255,255,0.08);
  --img-border: var(--border);

  --radius-lg: 16px;
}

:root[data-theme="light"] {
  --bg: #f7f9fc;
  --surface: #ffffff;
  --text: #0e1320;
  --muted: #5a6270;
  --heading: #0a0f1c;

  --primary: #3b82f6;
  --accent: #8b5cf6;
  --ring: rgba(59,130,246,0.25);

  --card: rgba(0,0,0,0.03);
  --border: rgba(0,0,0,0.10);
  --shadow-1: 0 8px 24px rgba(0,0,0,.10);

  --nav-fg: var(--muted);
  --nav-fg-active: var(--text);
  --nav-bg: rgba(255,255,255,0.65);

  --btn-fg: #ffffff;       /* texto sobre primary no light */
  --btn-outline-fg: var(--text);

  --divider: rgba(0,0,0,0.08);
  --img-border: var(--border);
}

/* =========================================
   Base
   ========================================= */
html, body { background: var(--bg); color: var(--text); scroll-behavior: smooth; }
.section { padding: 80px 0; }
.py-6 { padding: 110px 0 80px; }
.pb-6 { padding-bottom: 100px; }
.section-title { color: var(--heading); font-weight: 700; margin-bottom: 20px; }
.text-muted-2 { color: var(--muted); }

.gradient-text {
  background: linear-gradient(90deg, var(--grad-start), var(--grad-end));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* =========================================
   Navbar
   ========================================= */
.navbar{
  backdrop-filter: saturate(140%) blur(8px);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--divider);
  --bs-navbar-color: var(--nav-fg);
  --bs-navbar-hover-color: var(--nav-fg-active);
  --bs-navbar-active-color: var(--nav-fg-active);
  --bs-navbar-brand-color: var(--nav-fg-active);
  --bs-navbar-toggler-border-color: var(--border);
}
.navbar .navbar-toggler-icon{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23a7b1c2' stroke-width='2' stroke-linecap='round' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.nav-link.active{ color: var(--nav-fg-active) !important; }

/* =========================================
   Cards e elementos
   ========================================= */
.glass,.card.glass,.project.card,.info-card,.timeline-content{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}
.card-title{ color: var(--heading) !important; font-weight:700; }

.project .card-img-top{ height:160px; object-fit:cover; border-bottom:1px solid var(--border); }
.avatar{ width:220px; height:220px; object-fit:cover; border-radius:18px; border:1px solid var(--img-border); }
.bg-tag{ background:transparent; border:1px solid var(--border); color:var(--text); padding:6px 10px; border-radius:999px; }

/* =========================================
   Timeline (grid, alinhamento sem gambiarra)
   ========================================= */
.timeline{ position:relative; margin-left:0; padding-left:0; }
.timeline::before{
  content:""; position:absolute; left:14px; top:0; bottom:0; width:2px; background:var(--border);
}
.timeline-item{
  display:grid; grid-template-columns:28px 1fr; column-gap:14px; align-items:start; margin:0 0 24px;
}
.timeline-dot{
  grid-column:1; justify-self:center; width:12px; height:12px; background:var(--primary);
  border-radius:50%; margin-top:8px; box-shadow:0 0 0 6px var(--ring);
}
.timeline-content{ grid-column:2; width:100%; padding:16px 18px; }
.timeline-content h5{ color:var(--heading); margin:0 0 6px; font-weight:700; }
.timeline-content .small,.timeline-content .text-muted,
.timeline-content p.small,.timeline-content span.small{ color:var(--muted) !important; }
.timeline-content ul{ margin:0; padding-left:18px; }

@media (max-width:576px){
  .timeline-item{ column-gap:10px; }
  .timeline::before{ left:12px; }
}

/* =========================================
   Links, ícones e foco
   ========================================= */
a, a:hover, a:focus{ text-decoration:none !important; }
a{ color:var(--primary); }
a:hover{ color:var(--primary); }

.link-icon{ color:var(--muted); transition: color .2s ease, transform .15s ease; }
.link-icon:hover{ color:var(--text); transform: translateY(-2px); }

:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }

/* =========================================
   Botões (estilo unificado)
   ========================================= */
.btn, footer a[href="#top"]{
  display:inline-flex; align-items:center; gap:6px; padding:8px 18px; border-radius:999px;
  font-weight:500; transition:all .2s ease; box-shadow:0 4px 10px rgba(0,0,0,.15);
}
.btn-primary{
  background:var(--primary); border:1px solid var(--primary); color:var(--btn-fg);
}
.btn-primary:hover{
  background: color-mix(in oklab, var(--primary) 88%, black);
  border-color: color-mix(in oklab, var(--primary) 88%, black);
  transform: translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,.25);
}
.btn-outline-secondary{
  background:var(--card); border:1px solid var(--border); color:var(--text);
}
.btn-outline-secondary:hover{
  background:var(--primary); border-color:var(--primary); color:var(--btn-fg);
  transform: translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,.25);
}

/* Botão "Voltar ao topo" */
footer a[href="#top"]{
  background:var(--card); border:1px solid var(--border); color:var(--text);
}
footer a[href="#top"]:hover{
  background:var(--primary); border-color:var(--primary); color:var(--btn-fg);
  transform: translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,.25);
}

/* =========================================
   Formulários
   ========================================= */
.form-control,.form-select,textarea{
  background:var(--surface); color:var(--text); border:1px solid var(--border);
}
.form-control::placeholder{ color: color-mix(in oklab, var(--muted) 85%, transparent); }
.form-control:focus,.form-select:focus,textarea:focus{
  border-color:var(--primary); box-shadow:0 0 0 4px var(--ring); outline:none;
}
label{ color:var(--heading); }

/* Seção Contato: contraste garantido */
#contato .card h5,#contato .card .card-title{ color:var(--heading) !important; }
#contato .card .bi{ color:var(--primary) !important; vertical-align:-2px; }
#contato .card .card-body, #contato .card .card-body *:not(.bi){ color:var(--text); }
#contato .card a{ color:var(--text); }
#contato .card a:hover{ color:var(--primary); }

/* =========================================
   Footer e utilitários
   ========================================= */
hr,.border-top,.border-bottom{ border-color:var(--divider) !important; }
footer{ background: linear-gradient(180deg, transparent, rgba(0,0,0,0.04)); }
:root[data-theme="light"] footer{ background: linear-gradient(180deg, transparent, rgba(0,0,0,0.02)); }
.small{ font-size:.925rem; }
.shadow-sm{ box-shadow:0 4px 16px rgba(0,0,0,.12) !important; }

/* =========================================
   Seção "Sobre mim" (ocupação do espaço)
   ========================================= */
#sobre p{ font-size:1.1rem; line-height:1.7; }
#sobre .section-title{ font-size:2.2rem; margin-bottom:1.5rem; }

/* =========================================
   Alertas (legíveis no dark)
   ========================================= */
.alert-success{
  background: color-mix(in oklab, var(--primary) 25%, #22c55e 75%);
  color:#fff; border:1px solid color-mix(in oklab, var(--primary) 40%, #22c55e 60%);
}
.alert-danger{ background:#dc3545; color:#fff; border:1px solid #b02a37; }
.alert-info{
  background: color-mix(in oklab, var(--primary) 80%, #0dcaf0 20%);
  color:#fff; border:1px solid #0aa2c0;
}
.alert-warning{ background:#facc15; color:#222; border:1px solid #eab308; }
/* =========================================
   Corrige inputs no modo escuro
   ========================================= */
.form-control,
.form-select,
textarea {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border);
}

.form-control:focus,
.form-select:focus,
textarea:focus {
  background: var(--surface) !important; /* mantém o fundo escuro */
  color: var(--text) !important;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--ring);
  outline: none;
}

.form-control::placeholder,
textarea::placeholder {
  color: color-mix(in oklab, var(--muted) 85%, transparent);
}