@import "brand.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  input[type="number"] {
    -moz-appearance: textfield;
  }

  button {
    @apply rounded-md;
  }
}

@layer components {
  .btn {
    @apply rounded-md px-4 py-2 font-semibold;
  }

  .btn-primary {
    @apply bg-brand text-white;
  }

  .btn-accent {
    @apply bg-accent text-white;
  }

  .btn-outline {
    @apply border border-brand text-brand;
  }

  .btn-secondary {
    @apply border border-gray-300 bg-white text-gray-700 hover:bg-gray-50;
  }

  .btn-disabled {
    @apply bg-gray-100 text-gray-400 cursor-not-allowed;
  }
}

@layer base {
  body {
    @apply text-body-md font-sans;
  }
  h1 {
    @apply text-heading-2xl;
  }
  h2 {
    @apply text-heading-xl;
  }
  h3 {
    @apply text-heading-lg;
  }
  h4 {
    @apply text-heading-md;
  }
  h5 {
    @apply text-heading-sm;
  }
  h6 {
    @apply text-heading-xs;
  }
}