/* ==========================================================================
   BRAND TOKENS - Algodon Todo Evento
   Sistema visual profesional: tienda calida, limpia y orientada a compra.
   Este archivo se carga primero para alinear header, contenido, carrito y footer.
   ========================================================================== */

:root {
  /* Paleta base */
  --rojo-promo:   #E0311F;
  --naranja-cta:  #FF6B00;
  --mostaza:      #B98212;
  --dorado:       #D89A20;
  --beige:        #FFF8F1;
  --cafe-oscuro:  #6B1B00;
  --cafe-profundo:#3A1207;
  --rosa-algodon: #FFB7D5;
  --celeste-frio: #7DD3FC;
  --verde-ok:     #16A34A;

  /* Aliases semanticos */
  --primary:            var(--cafe-oscuro);
  --primary-dark:       var(--cafe-profundo);
  --primary-light:      #8B2A0B;
  --secondary:          var(--naranja-cta);
  --secondary-dark:     #D94E00;
  --accent:             var(--dorado);
  --warning:            var(--rojo-promo);
  --success:            var(--verde-ok);

  /* Superficies y fondos */
  --bg:           var(--beige);
  --surface:      #FFFFFF;
  --surface-soft: #FFF1E6;
  --surface-warm: #FFF6ED;
  --surface-blue: #EFF9FF;
  --surface-pink: #FFF0F6;

  /* Texto */
  --text:             #221A16;
  --muted:            #6F5D55;
  --text-on-primary:  #FFFFFF;
  --text-on-secondary:#FFFFFF;

  /* Bordes calidos */
  --border:       #E8D8CF;
  --border-soft:  #F0E0D8;

  /* Sombras suaves */
  --shadow-xs: 0 1px 2px rgba(34, 26, 22, 0.04);
  --shadow-sm: 0 4px 12px rgba(34, 26, 22, 0.06);
  --shadow-md: 0 12px 28px rgba(34, 26, 22, 0.08);
  --shadow-lg: 0 18px 44px rgba(34, 26, 22, 0.10);

  /* Radios y transicion estandar */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 8px;
  --transition: 180ms ease;

  /* Compatibilidad con archivos existentes */
  --gradient-hero:    var(--beige);
  --gradient-soft:    var(--surface-soft);
  --hero-solid:       var(--cafe-oscuro);
  --hero-solid-alt:   var(--naranja-cta);
}

body {
  background: var(--bg);
  color: var(--text);
}

.section-soft { background: var(--surface-soft); }

.card-base {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg);
  transition: transform var(--transition), box-shadow var(--transition);
}

.card-base:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-brand-primary {
  background: var(--naranja-cta);
  color: #FFFFFF;
  border: 0;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.btn-brand-primary:hover {
  background: var(--secondary-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.btn-brand-secondary {
  background: var(--cafe-oscuro);
  color: #FFFFFF;
  border: 0;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.btn-brand-secondary:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.badge-brand,
.badge-promo {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
}

.badge-brand {
  background: var(--surface-warm);
  color: var(--primary);
  border: 1px solid var(--border);
}

.badge-promo {
  background: var(--rojo-promo);
  color: #FFFFFF;
}

.animated-bg, .pulse, .bounce, .float, .parallax,
.marquee, .infinite-anim {
  animation: none !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}