@tailwind base;
@tailwind components;
@tailwind utilities;

.text-cyan-blue {
     @apply bg-cyan-blue bg-clip-text text-transparent;
}
.text-purple-indigo{
     @apply bg-purple-indigo bg-clip-text text-transparent;
}
.text-fiery{
     @apply bg-fiery bg-clip-text text-transparent;
}
.text-fiery1{
     @apply bg-fiery1 bg-clip-text text-transparent;
}
.text-fiery2{
     @apply bg-fiery2 bg-clip-text text-transparent;
}
.text-orangey{
     @apply bg-orangey bg-clip-text text-transparent;
}
.border-purple-indigo{
     @apply bg-purple-indigo bg-clip-border border-transparent;
}

.gradient-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: transparent;

  /* Text gradient */
  background-image: linear-gradient(90deg, #9C27B0 0%, #3F51B5 50%);
  background-clip: text;
  -webkit-background-clip: text;

  transition: all 0.3s ease;
}

/* Gradient border */
.gradient-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px; /* border thickness */
  border-radius: inherit;

  background: linear-gradient(90deg, #9C27B0 0%, #3F51B5 50%);

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Hover state */
.gradient-btn:hover {
  color: #fff;
  background: linear-gradient(90deg, #9C27B0 0%, #3F51B5 50%);
  background-clip: border-box;
}

/* Remove border on hover (optional) */
.gradient-btn:hover::before {
  opacity: 0;
}