@tailwind utilities;

@layer utilities {
  /* Text color */
  .text-grey-5 {
    color: #f1f1f1;
  }
  .text-grey-10 {
    color: #eeeeee;
  }
  .text-grey-20 {
    color: #e0e0e0;
  }
  .text-grey-30 {
    color: #dbdbdb;
  }
  .text-grey-40 {
    color: #aaaaaa;
  }
  .text-grey-50 {
    color: #787878;
  }
  .text-grey-60 {
    color: #676767;
  }
  .text-grey-70 {
    color: #444444;
  }
  .text-grey-80 {
    color: #313131;
  }
  .text-grey-90 {
    color: #212121;
  }
  .text-grey-95 {
    color: #121212;
  }

  /* Font family */
  .font-pretendard {
    font-family: "Pretendard", sans-serif;
  }
  .font-poppins {
    font-family: "Poppins", sans-serif;
  }

  /* Line-height */
  .leading-100 {
    line-height: 100%;
  }
  .leading-120 {
    line-height: 120%;
  }
  .leading-140 {
    line-height: 140%;
  }
  .leading-160 {
    line-height: 160%;
  }

  /* Animation keyframes */
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes fadeOut {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  /* Animation classes */
  .animate-fadeIn {
    animation: fadeIn 0.5s ease-in-out;
  }
  .animate-fadeOut {
    animation: fadeOut 0.5s ease-in-out;
  }
}