@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

@layer base {
  @font-face {
    font-family: Inter;
    font-weight: 400;
    src: url("https://fonts.googleapis.com/css2?family=Inter&display=swap");
  }
  @font-face {
    font-family: Inter;
    font-weight: 500;
    src: url("https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap");
  }
}

@layer utilities {
  /* Global disabled state */
  .custom-disabled-state {
    @apply !text-gray-500 !bg-gray-50 !border-gray-200 shadow-none opacity-100 cursor-not-allowed;
  }
}

@layer components {
  input[type="text"]:disabled,
  input[type="tel"]:disabled {
    @apply custom-disabled-state;
  }
}
