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

@import 'fonts';

body.dark * {
  @apply border-gray-600
}

* {
  font-family: GeneralSans, sans-serif !important;
}

#app {
   @apply min-h-screen;
}

@layer base {

  :root {
    --bg-form-color: #2563eb;
  }

  p, div {
    @apply text-gray-900 dark:text-white;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply text-gray-900 dark:text-white;
  }

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

  h2 {
    @apply text-3xl font-semibold;
  }

  a {
    @apply text-blue-600 hover:underline;
  }
}

.bg-white {
  @apply dark:bg-notion-dark;
}

.bg-gray-50 {
  @apply dark:bg-notion-dark-light;
}

.field-help {
  p {
    @apply text-gray-400 dark:text-gray-500;
  }
}