@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply text-wood-800;
  }

  *:focus:not(input):not(textarea) {
    @apply focus:outline-none focus:ring-2 focus:ring-emerald-700 focus:ring-offset-1;
  }

  input,
  textarea {
    @apply focus:outline-none;
  }

  input:disabled {
    @apply opacity-40 cursor-not-allowed;
  }

  ::placeholder {
    @apply opacity-40;
  }

  button:disabled {
    @apply opacity-50 cursor-not-allowed;
  }

  button {
    @apply focus:outline-none focus:ring-2 focus:ring-offset-1;
  }

  h1 {
    @apply font-serif text-3xl sm:text-4xl font-semibold;
  }

  h2 {
    @apply font-serif text-2xl sm:text-3xl font-semibold;
  }

  h3 {
    @apply font-serif text-xl sm:text-2xl font-semibold;
  }

  h4 {
    @apply font-serif text-lg sm:text-xl font-semibold;
  }

  h5 {
    @apply font-serif text-base sm:text-lg font-semibold;
  }

  h6 {
    @apply font-serif text-sm sm:text-base font-semibold;
  }

  details > summary::-webkit-details-marker {
    display: none;
  }
}

@layer components {
  .btn {
    @apply flex items-center justify-center gap-2 px-3 py-2 rounded-full font-semibold text-sm tracking-wide cursor-pointer;
  }

  .btn-primary {
    @apply btn text-white bg-emerald-500 hover:bg-emerald-600;
  }

  .btn-primary-inverse {
    @apply btn text-emerald-600 bg-white hover:bg-emerald-50;
  }

  .btn-secondary {
    @apply btn text-emerald-600 bg-emerald-100 hover:bg-emerald-200;
  }

  .btn-danger {
    @apply btn bg-white text-red-500 hover:bg-red-100;
  }

  .btn-link {
    @apply btn text-wood-500 hover:text-wood-600 underline underline-offset-4 rounded-xl text-base;
  }

  .btn-ai {
    @apply btn px-4 py-3 text-white bg-gradient-to-r from-violet-800 via-fuchsia-400 to-sky-300 transition-all duration-300;
  }

  .btn-ai:hover:not(:disabled) {
    /* violet-600, fuchsia-400, sky-300 */
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.4), 0 0 30px rgba(232, 121, 249, 0.3),
      0 0 45px rgba(56, 189, 248, 0.2);
  }

  /* Hide scrollbar for Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar for IE, Edge and Firefox */
  .no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

  @keyframes scrollToHighlightAnimation {
    0% {
      @apply border-neutral-400;
      box-shadow: 0 0 0.75rem rgb(74, 222, 128); /* Soft blur, emerald-400 */
    }
    100% {
      @apply border-neutral-100;
      box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    }
  }

  .scrolled-to-highlight {
    animation: scrollToHighlightAnimation 3s ease-in forwards;
  }

  .full-viewport-child {
    @apply w-screen ml-[calc(50%-50vw)] -mb-12 sm:-mb-16 pt-8 pb-12 sm:pb-16 px-4 sm:px-6 lg:px-8;
  }
}