/* EcoPax Brand Colors - Based on Logo */

:root {
  /* Primary Colors - Rosa/Magenta from logo */
  --ecopax-primary-50: #fdf2f8;
  --ecopax-primary-100: #fce7f3;
  --ecopax-primary-200: #fbcfe8;
  --ecopax-primary-300: #f9a8d4;
  --ecopax-primary-400: #f472b6;
  --ecopax-primary-500: #ec4899;
  --ecopax-primary-600: #db2777;
  --ecopax-primary-700: #be185d;
  --ecopax-primary-800: #9d174d;
  --ecopax-primary-900: #831843;

  /* Secondary Colors - Verde/Teal from logo */
  --ecopax-secondary-50: #f0fdfa;
  --ecopax-secondary-100: #ccfbf1;
  --ecopax-secondary-200: #99f6e4;
  --ecopax-secondary-300: #5eead4;
  --ecopax-secondary-400: #2dd4bf;
  --ecopax-secondary-500: #14b8a6;
  --ecopax-secondary-600: #0d9488;
  --ecopax-secondary-700: #0f766e;
  --ecopax-secondary-800: #115e59;
  --ecopax-secondary-900: #134e4a;
}

/* Brand Gradients */
.ecopax-gradient-primary {
  background: linear-gradient(135deg, var(--ecopax-primary-600), var(--ecopax-primary-800));
}

.ecopax-gradient-secondary {
  background: linear-gradient(135deg, var(--ecopax-secondary-600), var(--ecopax-secondary-800));
}

.ecopax-gradient-brand {
  background: linear-gradient(135deg, var(--ecopax-primary-600), var(--ecopax-secondary-600));
}

/* Text Colors */
.text-ecopax-primary {
  color: var(--ecopax-primary-600);
}

.text-ecopax-secondary {
  color: var(--ecopax-secondary-600);
}

/* Background Colors */
.bg-ecopax-primary {
  background-color: var(--ecopax-primary-600);
}

.bg-ecopax-secondary {
  background-color: var(--ecopax-secondary-600);
}

/* Hover Effects */
.hover-ecopax-primary:hover {
  background-color: var(--ecopax-primary-700);
}

.hover-ecopax-secondary:hover {
  background-color: var(--ecopax-secondary-700);
}

/* Brand Logo Styles */
.ecopax-logo {
  background: linear-gradient(135deg, var(--ecopax-primary-600), var(--ecopax-secondary-600));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: bold;
}

/* Custom Animations */
@keyframes ecopax-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

.ecopax-pulse {
  animation: ecopax-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.float-animation {
  animation: float 3s ease-in-out infinite;
}

/* Texturas e Padrões */
.texture-dots {
  background-image: radial-gradient(circle, rgba(219, 39, 119, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}

.texture-grid {
  background-image: linear-gradient(rgba(219, 39, 119, 0.1) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(219, 39, 119, 0.1) 1px, transparent 1px);
  background-size: 30px 30px;
}

.texture-diagonal {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(219, 39, 119, 0.05) 10px,
    rgba(219, 39, 119, 0.05) 20px
  );
}

/* Sombras Dramáticas */
.shadow-dramatic {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25),
              0 0 0 1px rgba(219, 39, 119, 0.1);
}

.shadow-glow {
  box-shadow: 0 0 20px rgba(219, 39, 119, 0.3),
              0 0 40px rgba(13, 148, 136, 0.2);
}

/* Bordas Decorativas */
.border-decorative {
  border: 3px solid;
  border-image: linear-gradient(45deg, var(--ecopax-primary-600), var(--ecopax-secondary-600)) 1;
}

.border-dashed-colorful {
  border: 2px dashed var(--ecopax-primary-400);
  background: linear-gradient(45deg, 
    var(--ecopax-primary-50) 25%, 
    transparent 25%, 
    transparent 75%, 
    var(--ecopax-secondary-50) 75%);
  background-size: 20px 20px;
}

/* Elementos Decorativos */
.decorative-corner::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, var(--ecopax-primary-600), var(--ecopax-secondary-600));
  border-radius: 50%;
}

.decorative-corner::after {
  content: '';
  position: absolute;
  bottom: -5px;
  right: -5px;
  width: 15px;
  height: 15px;
  background: var(--ecopax-secondary-600);
  border-radius: 50%;
}