/* ===== Navigation ===== */

.nav-link {
  @apply text-sm font-medium transition-all duration-300;
  @apply text-neutral-500;
  @apply hover:text-neutral-900;
  @apply dark:text-neutral-400 dark:hover:text-white;
}

.nav-link-active {
  @apply text-rose-600;
  @apply dark:text-rose-400;
}

.social-icon {
  @apply text-neutral-400 transition-all duration-300;
  @apply hover:text-rose-600;
  @apply dark:text-neutral-500 dark:hover:text-rose-400;
}

/* ===== Cards ===== */

.card {
  @apply rounded-2xl border p-6 transition-all duration-500 cursor-pointer;
  @apply border-neutral-200 bg-white;
  @apply hover:border-rose-200 hover:shadow-lg;
  @apply dark:border-white/[0.06] dark:bg-white/[0.02];
  @apply dark:hover:border-rose-500/20 dark:hover:bg-white/[0.04];
  @apply dark:hover:shadow-[0_0_30px_rgba(225,29,72,0.08)];
}

/* ===== Buttons ===== */

.btn-primary {
  @apply inline-flex items-center justify-center font-semibold rounded-full transition-all duration-300 cursor-pointer;
  @apply bg-rose-600 text-white;
  @apply hover:bg-rose-500 hover:shadow-[0_0_30px_rgba(225,29,72,0.4)];
  @apply dark:bg-rose-600 dark:text-white;
  @apply dark:hover:bg-rose-500 dark:hover:shadow-[0_0_30px_rgba(225,29,72,0.4)];
}

.btn-outline {
  @apply inline-flex items-center justify-center font-semibold rounded-full transition-all duration-300 cursor-pointer;
  @apply border border-rose-600 text-rose-600;
  @apply hover:bg-rose-600 hover:text-white;
  @apply dark:border-rose-500 dark:text-rose-400;
  @apply dark:hover:bg-rose-500 dark:hover:text-white;
}

.btn-ghost {
  @apply inline-flex items-center justify-center font-medium rounded-full transition-all duration-300 cursor-pointer;
  @apply text-neutral-600;
  @apply hover:text-rose-600;
  @apply dark:text-neutral-400 dark:hover:text-rose-400;
}

/* ===== Scrollbar ===== */

.modal-content {
  scrollbar-color: rgb(163 163 163) transparent;
}

.modal-content * {
  scrollbar-color: rgb(163 163 163) transparent;
}

@variant dark {
  .modal-content {
    scrollbar-color: rgb(64 64 64) transparent;
  }

  .modal-content * {
    scrollbar-color: rgb(64 64 64) transparent;
  }
}

/* ===== Contact ===== */

.contact-item {
  @apply flex items-center gap-4;
}

.contact-icon {
  @apply shrink-0 text-rose-600;
  @apply dark:text-rose-400;
}
