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

h1 {
  font-family: Lexend;
}


h2 {
  @apply text-3xl font-bold text-center mb-8;
}

@layer utilities {
  .authBackgroundColor {
    background-color: var(--main-bg-color);
  }

  .authContainer {
    @apply min-h-screen flex items-center justify-center p-4;
    background-color: var(--main-bg-color);
  }

  .authModal {
    @apply bg-white rounded-lg shadow-xl w-full max-w-md p-8;
  }

  .authConfirmButton {
    @apply w-full bg-blue-600 text-white py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors mb-4 mt-4;
  }

  .inputStyle {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
  }

  .inputTitle {
    color: var(--input-title-color);
    font-size: 14px;
    font-family: Manrope-Bold;
  }

  .placeholderStyle {
    color: #424445;
  }

  .saveButton {
    @apply rounded-md px-3.5 py-2 bg-blue-600 hover:bg-blue-500 text-white inline-block font-medium cursor-pointer;
  }

  .primaryButton {
    @apply px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-500 text-sm font-medium transition-colors;
  }

  .returnButton {
    @apply ml-2 rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-50 inline-block font-medium;
  }

  .columnTableTitles {
    @apply py-3 px-6 text-left text-sm font-medium text-gray-500 tracking-wider;
  }

  .rowTableContent {
    @apply py-4 px-6 text-sm text-gray-700;
  }

}

:root {
  --main-bg-color: #A5B3E4;
  --input-title-color: #424856;
}

@layer components {
  .searchInput {
    @apply w-80 px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-gray-50 placeholder-gray-400;
  }

  .dropdownInput {
    @apply w-80 px-4 py-2 border-2 border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-gray-50 placeholder-gray-400;
  }
}