:root {
  --vermelho: #DC2626;
  --verde: #16A34A;
  --escuro: #0F172A;
  font-family: system-ui, -apple-system, sans-serif;
}

* {
  font-family: system-ui, -apple-system, sans-serif;
}

[x-cloak] {
  display: none !important;
}

.fade-in {
  animation: fadeIn 220ms ease-out;
}

.cart-badge {
  animation: pulse 1.4s ease-in-out infinite;
}

.tab-btn {
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  padding: 0.6rem 1rem;
  font-weight: 800;
  color: var(--escuro);
}

.tab-btn.active {
  background: var(--vermelho);
  border-color: var(--vermelho);
  color: #fff;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.12);
  }
}