/* themes/retro.css — tema estilo Retrô (tons vintage e envelhecidos) */
:root{
  --brand:#a47148;        /* marrom queimado */
  --brand-dark:#6b4b2f;   /* marrom escuro */
  --grad: linear-gradient(90deg, #a47148, #6b4b2f); /* bronze/marrom antigo */
  --card:#fdfaf3;         /* creme claro tipo papel antigo */
  --txt:#2b2b2b;          /* texto escuro */
  --muted:#7c6f63;        /* marrom suave */
  --line:#e3d9c9;         /* linhas sutis amareladas */
  --font-size-base: 18px;
  --radius: 6px;
  --login-accent:#a47148; /* bronze suave */
}

/* Navbar retrô */
.navbar { 
  background: var(--grad) !important;
  border-bottom: 3px solid #5a3b28; /* detalhe retrô */
}
.navbar .navbar-brand,
.navbar .nav-link,
.navbar .btn { 
  color:#fff !important; 
  font-family: "Georgia", serif; /* estilo antigo */
}

/* Cards estilo papel antigo */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 3px 6px rgba(0,0,0,.08);
}

/* Botões */
.btn-grad {
  background: var(--grad) !important;
  border: none !important;
  color: #fff !important;
  font-family: "Georgia", serif;
}
.btn-outline {
  border: 1px solid var(--line);
  color: var(--txt);
  background: #fcf7ed;
}
.btn-outline:hover {
  border-color: var(--brand);
  background:#f2e5d3;
}

/* Links */
a, .link-muted:hover { 
  color: var(--brand); 
  text-decoration: underline dotted;
}

/* Inputs */
.form-control, .form-select {
  background: #fcf7ed;
  color: var(--txt);
  border-color: var(--line);
  border-radius: var(--radius);
  font-family: "Courier New", monospace; /* dá ar retrô */
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem rgba(164,113,72,.25);
}

/* Avatar */
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: #e8dcc5;
  border: 2px solid #b49774;
}

/* Footer */
footer {
  background:#f8f1e7;
  border-top:2px solid #d6c3a8;
  font-family: "Georgia", serif;
}
footer small a {
  color: var(--muted);
}
footer small a:hover {
  color: var(--brand);
}