/**
 * ==============================================================================
 * ESTILOS BASE Y VARIABLES PARA VENDERLY WaaS
 * ==============================================================================
 */

:root {
  --brand-primary: #0f172a;
  --brand-primary-hover: #1e293b;
  --brand-accent: #10b981;
  --brand-whatsapp: #25D366;
  --brand-whatsapp-hover: #1ebe5d;
}

/* Clases de utilidad vinculadas a las variables de tema */
.bg-brand-primary {
  background-color: var(--brand-primary) !important;
}
.bg-brand-primary-hover:hover {
  background-color: var(--brand-primary-hover) !important;
}
.text-brand-primary {
  color: var(--brand-primary) !important;
}
.border-brand-primary {
  border-color: var(--brand-primary) !important;
}
.bg-brand-accent {
  background-color: var(--brand-accent) !important;
}
.text-brand-accent {
  color: var(--brand-accent) !important;
}
.bg-brand-whatsapp {
  background-color: var(--brand-whatsapp) !important;
}
.bg-brand-whatsapp-hover:hover {
  background-color: var(--brand-whatsapp-hover) !important;
}

/* Adaptación automática del tema de marca (WaaS Multi-tenant) */
#top-announcement,
#btn-open-cart,
#btn-proceed-checkout,
#btn-save-address,
#btn-modal-auth-submit,
.category-pill-active {
  background-color: var(--brand-primary) !important;
}
#btn-open-cart:hover,
#btn-proceed-checkout:hover,
#btn-save-address:hover,
#btn-modal-auth-submit:hover {
  background-color: var(--brand-primary-hover) !important;
}
#cart-badge-count {
  background-color: var(--brand-accent) !important;
}
#hero-banner {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-hover) 60%, #1e1b24 100%) !important;
}

/* Suavizado de fuentes y scroll */
html {
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Personalización de barra de desplazamiento */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Transiciones suaves */
.transition-smooth {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animación pulse suave para skeleton loaders */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton-box {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Estilo para imágenes de tarjetas con carga suave */
.product-card-img {
  transition: transform 0.4s ease;
}
.product-card:hover .product-card-img {
  transform: scale(1.05);
}