@import "tailwindcss";

@theme {
  --color-protopink: #DA4767;
  --color-protoblue: #12173E;
  
  --color-background: var(--color-protoblue);
  --color-foreground: var(--color-protopink);
  
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  @theme {
    --color-background: var(--color-protoblue);
    --color-foreground: var(--color-protopink);
  }
}


@layer components {

  a,
  .link {
    @apply text-sm text-[#00874B] font-medium focus:outline-none;
  }

  .btn {
    @apply inline-flex items-center justify-center whitespace-nowrap rounded-lg border border-transparent text-center px-4 py-2 text-sm font-semibold text-white focus:outline-none focus:ring-2 focus:ring-protopink focus:ring-offset-2;
  }

  .btn-primary {
    @apply border-transparent bg-protopink text-white hover:bg-protopink focus:ring-protopink;
  }

  .btn-outline {
    @apply text-gray-700 bg-transparent hover:bg-gray-50 border-gray-300;
  }

  .btn-disabled {
    @apply pointer-events-none cursor-not-allowed text-gray-50 border-gray-300 bg-gray-300 hover:bg-gray-300 focus:ring-gray-200;
  }

  .btn-warning {
    @apply text-white bg-red-600 hover:bg-red-700 focus:ring-red-500;
  }

  .user_dialog_input {
    @apply appearance-none block w-full px-3 py-1 border border-gray-300 rounded-md text-gray-700 font-medium placeholder-gray-500 focus:outline-none focus:ring-protopink focus:border-protopink sm:text-sm;
  }
  
}

#root {
  background-color: #888;
}
.slick-slide {
  margin: 0 !important; /* Override any internal margin */
}
.slick-list {
  margin: 0; /* Remove any internal margin on slick list */
}

/* Rest of your CSS... */