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

@layer components {
  .btn {
    @apply font-semibold
    inline-flex
    items-center
    justify-center

    text-gray-800
    hover:text-white
    uppercase

    rounded-lg
    shadow-lg
    cursor-pointer
    outline-none;
  }
  .btn-primary {
    @apply px-3
    lg:px-5
    py-2
    bg-orange-500
    hover:bg-orange-600
    lg:text-lg

    focus:ring-4
    focus:ring-orange-500
    focus:ring-opacity-90;
  }

  .btn-secondary {
    @apply px-4
    py-3
    bg-gray-400
    hover:bg-orange-600
    text-sm

    focus:ring-4
    focus:ring-orange-500
    focus:ring-opacity-90;
  }

  .text-input {
    @apply px-3
    py-1
    rounded
    placeholder-gray-300
    text-center
    outline-none
    focus:ring-4
    focus:ring-orange-500
    focus:ring-opacity-90
    font-medium
    text-gray-700

    lg:px-4
    lg:py-2
    lg:text-lg;
  }
}

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

@layer components {
  .btn {
    @apply font-semibold
    inline-flex
    items-center
    justify-center

    text-gray-800
    hover:text-white
    uppercase

    rounded-lg
    shadow-lg
    cursor-pointer
    outline-none;
  }

  .btn-primary {
    @apply px-3
    lg:px-5
    py-2
    bg-orange-500
    hover:bg-orange-600
    lg:text-lg

    focus:ring-4
    focus:ring-orange-500
    focus:ring-opacity-90;
  }

  .btn-secondary {
    @apply px-4
    py-3
    bg-gray-400
    hover:bg-orange-600
    text-sm

    focus:ring-4
    focus:ring-orange-500
    focus:ring-opacity-90;
  }

  .text-input {
    @apply px-3
    py-1
    rounded
    bg-gray-600/60
    placeholder-gray-500/80
    text-gray-200
    font-medium

    outline-none
    focus:ring-2
    focus:ring-orange-500
    focus:ring-opacity-90

    lg:px-4
    lg:py-2
    lg:text-lg;
  }
}

Improve text input colors for dark theme
Improve text input colors for dark theme
