@import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Ubuntu&family=Merriweather&display=swap');
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@layer base {
  html {
    @apply text-body;
  }

  h1 {
    @apply text-4xl font-bold leading-10 tracking-tight  sm:text-5xl;
  }

  h2 {
    @apply text-2xl font-bold leading-9 tracking-tight sm:text-3xl;
  }

  h3 {
    @apply text-base font-semibold leading-6;
  }

  button {
    @apply rounded-md px-2.5 py-2 text-sm font-medium text-white transition disabled:cursor-not-allowed disabled:bg-secondary disabled:opacity-75 disabled:hover:bg-secondary;
  }

  label {
    @apply block text-sm font-medium leading-6 text-secondary-dark;
  }

  [type='text'],
  [type='email'],
  [type='url'],
  [type='password'],
  [type='number'],
  [type='date'],
  [type='datetime-local'],
  [type='month'],
  [type='search'],
  [type='tel'],
  [type='time'],
  [type='week'],
  [multiple],
  textarea,
  select {
    @apply rounded-md border-0 px-2.5 py-1.5 shadow-sm ring-1 ring-secondary placeholder:text-secondary focus:ring-2 focus:ring-primary sm:text-sm sm:leading-6;
  }
}

@layer components {
  .btn-primary {
    @apply bg-primary hover:bg-primary-dark;
  }

  .btn-secondary {
    @apply bg-secondary hover:bg-secondary-dark;
  }

  .btn-success {
    @apply bg-success hover:bg-success-dark;
  }

  .btn-danger {
    @apply bg-danger hover:bg-danger-dark;
  }

  .btn-warning {
    @apply bg-warning text-body hover:bg-warning-dark;
  }

  .btn-info {
    @apply bg-info hover:bg-info-dark;
  }

  .btn-white {
    @apply bg-white text-body hover:bg-secondary-light;
  }
}

@layer utilities {
  .shadow {
    @apply shadow-secondary;
  }
}
