@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@500;600&family=Inter:wght@500;600&display=swap');

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

@layer base {
  body {
    @apply font-sans bg-white text-gray-900 dark:bg-gray-900 dark:text-white;
  }
  h1, h2, h3, h4, h5, h6 {
    @apply font-serif text-gray-900 dark:text-white;
  }
}

@layer components {
  /* Flash messages */
  .alert {
    @apply
    p-4 
    mb-4
    text-sm
    text-gray-800
    rounded-lg
    bg-gray-50
    dark:bg-gray-800
    dark:text-gray-300
  }

  .alert.alert-danger {
    @apply
    text-red-800
    bg-red-50
    dark:bg-red-800
    dark:text-red-400
  }

  .alert.alert-success {
    @apply
    text-green-800
    bg-green-50
    dark:bg-green-800
    dark:text-green-400
  }

  .alert.alert-notice {
    @apply
    text-blue-800
    bg-blue-50
    dark:bg-blue-800
    dark:text-blue-400
  }

  .nav-link {
    @apply flex items-center p-2 w-full text-base font-medium text-gray-900 rounded-lg transition duration-75 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700
  }
  .nav-link svg {
    @apply mr-3 
  }
  .nav-link.is-current-page {
    @apply bg-gray-100 dark:text-white dark:bg-gray-700
  }


  /* Buttons */
  .btn {
    @apply
    inline-flex
    text-center
    items-center
    justify-center
    rounded-md
    bg-primary
    cursor-pointer
    px-3
    py-2
    text-sm
    font-medium
    text-white
    shadow-sm
    ring-1
    ring-inset
    ring-primary-100
    hover:bg-primary-100
    hover:no-underline
    focus:outline-none
    focus:ring-2
    focus:ring-primary-500
    focus:ring-offset-2
    transition-colors;
  }

  .btn.btn-secondary {
    @apply
    bg-secondary
    ring-secondary-100
    hover:bg-secondary-100
    focus:ring-secondary-500;
  }

  .btn-sm {
    @apply text-xs px-2 py-1;
  }

  .btn-md {
    @apply text-sm px-5 py-3;
  }

  .btn-lg {
    @apply text-base px-6 py-3;
  }

  .btn-xl {
    @apply text-lg px-8 py-4;
  }

  .btn-2xl {
    @apply text-xl px-10 py-5;
  }

  .btn-3xl {
    @apply text-2xl px-12 py-6;
  }

  /* Forms */

  .form-input,
  .form-select,
  .form-textarea,
  .form-richtext,
  .form-multiselect {
    @apply
    bg-gray-50 
    border 
    border-gray-300 
    text-gray-900
    text-sm
    rounded-lg
    focus:ring-primary
    focus:border-primary
    block
    w-full
    p-2.5
    dark:bg-gray-600
    dark:border-gray-500
    dark:placeholder-gray-400
    dark:text-white
    dark:focus:ring-primary-500
  }

  .form-label {
    @apply
    block
    text-sm
    font-medium
    text-gray-900
    dark:text-white
  }

  .form-textarea {
    @apply
    resize-none
    h-24
  }

  .form-checkbox {
    @apply
    h-4 
    w-4
    rounded
    border-gray-300
    text-primary
    focus:ring-primary-500
  }

  .form-radio {
    @apply
    h-4
    w-4
    rounded-full
    border-gray-300
    text-primary
    focus:ring-primary-500
  }

}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */