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

@layer base {
  /* Core */
  body {
    @apply
      text-main
      font-mono text-sm md:text-base
      bg-white dark:bg-black
  }
  /* Forms */
  label {
    @apply
      font-sans font-medium block uppercase text-xs
      text-medium
      tracking-wider
  }
  button, .button,
  input[type=text], input[type=email], input[type=password], select {
    @apply
      px-2.5 py-2
      border rounded-md
      bg-white dark:bg-black
      border-gray-200 dark:border-gray-700
      font-mono text-base leading-tight
      min-h-[2.4rem]
  }
  input[type=text], input[type=email], input[type=password], select {
    @apply
      text-[1rem] /* Prevent iOS auto-zoom behavior */
      min-w-[20rem] read-only:cursor-default
  }
  input[type=text], input[type=email], input[type=password] {
    @apply
      read-only:bg-gray-100
      dark:read-only:bg-gray-900 dark:read-only:text-gray-400
  }
  /* Required for readonly behavior on <select /> */
  .disabled-select {
    @apply
      text-medium
      bg-gray-100 dark:bg-gray-900
      pointer-events-none
  }
  input[type=file] {
    @apply
      block font-mono w-full text-medium
      file:bg-white dark:file:bg-gray-950
      file:mr-2 file:my-2 file:px-4 file:py-1.5 file:rounded-md
      file:border-solid file:border
      file:border-gray-200 dark:file:border-gray-700
      file:cursor-pointer
      file:shadow-sm
      file:active:bg-gray-100
      file:disabled:bg-gray-100
      file:hover:border-gray-300 file:dark:hover:border-gray-600
      file:hover:disabled:border-gray-200 file:dark:hover:disabled:border-gray-700
      file:active:disabled:bg-white
      file:hover:disabled:cursor-not-allowed
  }
  input[type=checkbox] {
    @apply
      rounded-md
  }
  button, .button {
    @apply
      cursor-pointer
      hover:no-underline
      inline-flex gap-2 items-center
      px-4
      text-base
      shadow-sm
      active:bg-gray-100 dark:active:bg-gray-900
      hover:border-gray-300 dark:hover:border-gray-600
      disabled:cursor-not-allowed
      disabled:bg-gray-100 dark:disabled:bg-gray-900
      disabled:border-gray-200 disabled:dark:border-gray-700
  }
  button.subtle, .button.subtle {
    @apply
      disabled:shadow-none
      disabled:bg-transparent dark:disabled:bg-transparent
      disabled:border-gray-100 dark:disabled:border-gray-900
  }
  button.primary, .button.primary {
    @apply
      text-invert
      bg-gray-900 dark:bg-gray-100
      disabled:bg-gray-900 disabled:dark:bg-gray-100
      border-gray-900 dark:border-gray-100
      active:bg-gray-700 active:border-gray-700
      active:dark:bg-gray-300 active:dark:border-gray-300
      shadow-none
  }
  button.primary.disabled, .button.primary.disabled {
    @apply
      text-medium
  }
  button.link {
    @apply
      p-0 min-h-0
      border-none active:bg-transparent shadow-none
  }
  /* Toasts */
  .toaster [data-sonner-toast] {
    @apply
      font-mono font-normal
      !border-gray-200 dark:!border-gray-800
  }
  /* Common Utilities */
  .text-main {
    @apply
      text-gray-900 dark:text-gray-100
  }
  .text-invert {
    @apply
      text-gray-100 dark:text-gray-900
  }
  .text-medium {
    @apply
      text-gray-500 dark:text-gray-400
  }
  .text-dim {
    @apply
      text-gray-400 dark:text-gray-500
  }
  .text-extra-dim {
    @apply
      text-gray-400/80 dark:text-gray-400/50
  }
  .text-icon {
    @apply
      text-gray-800 dark:text-gray-200
  }
  .text-error {
    @apply
      text-red-500 dark:text-red-400
  }
}