@tailwind components;

@layer components {
  .btn {
    @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors
      focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring
      disabled:pointer-events-none disabled:opacity-50
      [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0;
  }

  .btn-primary {
    @apply bg-primary text-primary-foreground shadow hover:bg-primary/90 rounded-full px-6 disabled:opacity-50 px-6 transition-transform;
  }

  .btn-secondary {
    @apply bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 rounded-full disabled:opacity-50 px-6 transition-transform;
  }

  .btn-ghost {
    @apply hover:bg-brand-purple bg-brand-purple/10  rounded-full disabled:opacity-50 px-6 transition-transform text-brand-purple  hover:text-[var(--purple-muted)];
  }

  .btn-outline {
    @apply border border-primary border-2 text-primary shadow-sm hover:bg-primary/10 rounded-full disabled:opacity-50  px-6 transition-transform;
  }

  .btn-accent {
    @apply bg-accent text-accent-foreground shadow hover:bg-accent/90 rounded-full disabled:opacity-50  px-6 transition-transform;
  }

  .btn-destructive {
    @apply bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 rounded-full disabled:opacity-50  px-6 transition-transform;
  }

  .btn-outline-destructive {
    @apply border border-destructive bg-none border-2 text-destructive shadow-sm hover:bg-destructive/10 dark:hover:bg-destructive/10 rounded-full disabled:opacity-50  px-6 transition-transform;
  }

  .btn-link {
    @apply text-primary underline-offset-4 hover:underline disabled:opacity-50 px-6 transition-transform;
  }

  .btn-sm {
    @apply h-8 rounded-full px-3 text-xs disabled:opacity-50 px-6;
  }

  .btn-md {
    @apply h-9 px-4 py-2 rounded-full disabled:opacity-50 px-6;
  }

  .btn-lg {
    @apply h-10 rounded-full px-8 disabled:opacity-50;
  }

  .btn-icon {
    @apply h-9 w-9 rounded-full disabled:opacity-50 px-6;
  }
  .btn-green {
    @apply bg-[var(--green-light)] hover:bg-[var(--green-forest)] text-white transition-transform rounded-full px-6 ;
  }
  .btn-util-green {
    @apply bg-[var(--green-light)] hover:bg-[var(--green-forest)] text-white transition-transform rounded-xl h-12 px-6 ;
  }

  .btn-util-purple {
    @apply bg-[var(--purple-lavender)]  hover:bg-[var(--purple-ink-2)] text-background dark:text-white dark:hover:text-white rounded-xl h-12 px-6 transition-transform;
  }

  .btn-light-orange {
    @apply bg-brand-light-orange  hover:bg-brand-orange text-background dark:hover:text-white rounded-xl h-12 px-6 transition-transform;
  }
  .btn-pink {
    @apply bg-brand-pink  hover:bg-brand-dark-rose dark:text-[var(--lavender-100)] text-background dark:hover:text-white rounded-xl h-12 px-6 transition-transform;
  }
  .btn-lavender {
    @apply bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2 dark:hover:bg-brand-lavender dark:hover:text-brand-dark-lavender;
  }
  .btn-light-lavender {
    @apply bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-brand-lavender rounded-full px-6 transition-transform dark:hover:bg-brand-lavender dark:hover:text-brand-dark-lavender ;
  }

  /* Badges */
 
  .badge {
    @apply px-3 py-1 rounded-full text-sm font-medium transition-transform;
  }
  .badge-green {
    @apply bg-[var(--green-light)] text-white transition-transform;
  }
 /* Backgrounds */
    .bg-light-lavender {
    @apply bg-gradient-to-br from-brand-purple  to-[var(--purple-ink)] text-white bg-[var(--neutral-800)] transition-transform dark:bg-brand-lavender dark:text-brand-dark-lavender;
  }


}