/* Tema Roxo Predominante - Açaí Cidade Sol */

:root {
  /* Cores principais roxas */
  --primary-purple: #6B46C1;
  --primary-purple-dark: #553C9A;
  --primary-purple-light: #8B5CF6;
  --accent-purple: #A855F7;
  --light-purple: #DDD6FE;
  --dark-purple: #4C1D95;
  
  /* Cores de apoio */
  --white: #FFFFFF;
  --black: #1F2937;
  --gray-light: #F3F4F6;
  --gray-medium: #6B7280;
  --success-green: #10B981;
  --warning-orange: #F59E0B;
  --error-red: #EF4444;
}

/* Aplicar tema roxo em elementos principais */
body {
  background: linear-gradient(135deg, var(--light-purple) 0%, var(--white) 100%);
  color: var(--black);
}

/* Cabeçalho com tema roxo */
.header, .cabecalho {
  background: linear-gradient(135deg, var(--primary-purple) 0%, var(--primary-purple-dark) 100%);
  color: var(--white);
  box-shadow: 0 4px 6px rgba(107, 70, 193, 0.1);
}

/* Botões principais */
.btn-primary, .btn-comprar, .btn-adicionar {
  background: linear-gradient(135deg, var(--primary-purple) 0%, var(--accent-purple) 100%);
  border: none;
  color: var(--white);
  transition: all 0.3s ease;
}

.btn-primary:hover, .btn-comprar:hover, .btn-adicionar:hover {
  background: linear-gradient(135deg, var(--primary-purple-dark) 0%, var(--primary-purple) 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgba(107, 70, 193, 0.3);
}

/* Cards de produtos com tema roxo */
.card {
  border: 2px solid var(--light-purple);
  transition: all 0.3s ease;
}

.card:hover {
  border-color: var(--primary-purple);
  box-shadow: 0 8px 25px rgba(107, 70, 193, 0.15);
  transform: translateY(-5px);
}

/* Título dos cards */
.card-title {
  color: var(--primary-purple-dark);
  font-weight: 600;
}

/* Preços com destaque roxo */
.preco, .valor, .price {
  color: var(--primary-purple);
  font-weight: bold;
  font-size: 1.2em;
}

/* Links com tema roxo */
a {
  color: var(--primary-purple);
  transition: color 0.3s ease;
}

a:hover {
  color: var(--primary-purple-dark);
  text-decoration: none;
}

/* Formulários */
.form-control, input, select, textarea {
  border: 2px solid var(--light-purple);
  transition: border-color 0.3s ease;
}

.form-control:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--primary-purple);
  box-shadow: 0 0 0 3px rgba(107, 70, 193, 0.1);
}

/* Carrinho de compras */
.carrinho, .cart {
  background: var(--primary-purple);
  color: var(--white);
}

.carrinho:hover, .cart:hover {
  background: var(--primary-purple-dark);
}

/* Navegação */
.navbar, .menu {
  background: var(--white);
  border-bottom: 3px solid var(--primary-purple);
}

.nav-link {
  color: var(--primary-purple);
  font-weight: 500;
}

.nav-link:hover, .nav-link.active {
  color: var(--primary-purple-dark);
  background: var(--light-purple);
}

/* Badges e etiquetas */
.badge, .label {
  background: var(--primary-purple);
  color: var(--white);
}

/* Alertas com tema roxo */
.alert-info {
  background: var(--light-purple);
  border-color: var(--primary-purple);
  color: var(--primary-purple-dark);
}

/* Footer */
.footer {
  background: var(--primary-purple-dark);
  color: var(--white);
}

/* Produtos específicos de açaí */
.produto-acai {
  background: linear-gradient(135deg, var(--light-purple) 0%, var(--white) 100%);
  border-left: 5px solid var(--primary-purple);
}

/* Ícones com tema roxo */
.icon-purple {
  color: var(--primary-purple);
}

/* Gradientes roxos para cards */
.gradient-roxo-1 {
  background: linear-gradient(135deg, #8B5CF6 0%, #A855F7 100%);
}

.gradient-roxo-2 {
  background: linear-gradient(135deg, #A855F7 0%, #C084FC 100%);
}

.gradient-roxo-3 {
  background: linear-gradient(135deg, #6B46C1 0%, #8B5CF6 100%);
}

.gradient-roxo-4 {
  background: linear-gradient(135deg, #C084FC 0%, #DDD6FE 100%);
}

/* Texto em cards roxos */
.gradient-roxo-1 .card-title,
.gradient-roxo-2 .card-title,
.gradient-roxo-3 .card-title,
.gradient-roxo-4 .card-title {
  color: var(--white);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Responsividade */
@media (max-width: 768px) {
  .card {
    margin: 5px;
    padding: 15px;
  }
  
  .btn-primary, .btn-comprar {
    width: 100%;
    margin-top: 10px;
  }
}

/* Animações suaves */
@keyframes pulse-purple {
  0% { box-shadow: 0 0 0 0 rgba(107, 70, 193, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(107, 70, 193, 0); }
  100% { box-shadow: 0 0 0 0 rgba(107, 70, 193, 0); }
}

.pulse-purple {
  animation: pulse-purple 2s infinite;
}

/* Loading spinner roxo */
.spinner-purple {
  border: 4px solid var(--light-purple);
  border-top: 4px solid var(--primary-purple);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}