@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import "tailwindcss";

@theme {
  --font-inter: "Inter", sans-serif;

  --color-primary: #00BBA7;
  --color-primary-light: #b2dfdb;
  --color-primary-dark: #009689;
  --color-secondary: #006b63;
  --color-secondary-light: #e2e8f0;
  --color-secondary-dark: #009689;
  --color-background: #f5f5f5;

  --color-gray: #94a3b8;
  --color-gray-light: #e5e7eb;

  --color-text-primary: #111827;
  --color-black-text: #000000;
  --color-text-secondary: #6b7280;

  --color-border: #d1d5db;
  --color-border-dark: #adb5bd;
  --color-focus: #0d9488;

  --color-info: #3b82f6;
  --color-success: #22c55e;
  --color-error: #ef4444;
  --color-warning: #fca311;
}

button {
  cursor: pointer;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

/* If you're using Tailwind's @apply */
#custom-pagination .swiper-pagination-bullet {
  @apply bg-gray-400 opacity-60;
}

#custom-pagination .swiper-pagination-bullet-active {
  @apply bg-teal-500 opacity-100;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 3px;
}

/* Firefox support */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: gray transparent;
}