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

@layer base {
  /* Core */
  body {
    @apply
      text-main
      bg-main
      font-mono text-sm md:text-base
  }
  /* Forms */
  label {
    @apply
      font-sans font-medium block uppercase text-xs
      text-medium
      tracking-wider
  }
  .control,
  button, .button,
  input[type=text], input[type=email], input[type=password], select, textarea {
    @apply
      px-2.5 py-2
      border rounded-md
      bg-main
      border-gray-200 dark:border-gray-700
      font-mono text-base leading-tight      
  }
  input[type=text], input[type=email], input[type=password], select, textarea {
    @apply
      text-[1rem] /* Prevent iOS auto-zoom behavior */
      read-only:cursor-default
  }
  input[type=text], input[type=email], input[type=password], select {
    @apply
      min-h-[2.4rem]
  }
  input[type=text], input[type=email], input[type=password], textarea {
    @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
  }
  .error {
    @apply
      border-red-500 dark:border-red-400
  }
  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
  }
  a, .link {
    @apply
      hover:text-gray-600
      hover:dark:text-gray-400
  }
  /* Utilities: Text */
  .text-main {
    @apply
      text-gray-900 dark:text-gray-100
  }
  .text-invert {
    @apply
      text-white dark:text-black
  }
  .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
  }
  /* Utilities: Background */
  .bg-main {
    @apply
      bg-white dark:bg-black
  }
  .bg-content {
    @apply
      bg-white border-gray-200
      dark:bg-black dark:border-gray-800
  }
  .bg-invert {
    @apply
      bg-gray-900 dark:bg-gray-100
  }
  /* Utilities: Baseline Grid */
  .space-y-baseline {
    @apply
      space-y-[1.1875rem] md:space-y-[1.25rem]
  }
  .gap-y-baseline {
    @apply
      gap-y-[1.1875rem] md:gap-y-[1.25rem]
  }
  .gap-baseline {
    @apply
      gap-[1.1875rem] md:gap-[1.25rem]
  }
  .max-h-baseline {
    @apply
      max-h-[1.1875rem] md:max-h-[1.25rem]
  }
  .bg-baseline-grid {
    @apply
      bg-[repeating-linear-gradient(to_bottom,#eee,#eee_1px,transparent_1px,transparent_1.1875rem)]
      md:bg-[repeating-linear-gradient(to_bottom,#eee,#eee_1px,transparent_1px,transparent_1.25rem)]
      dark:bg-[repeating-linear-gradient(to_bottom,#222,#222_1px,transparent_1px,transparent_1.1875rem)]
      dark:md:bg-[repeating-linear-gradient(to_bottom,#222,#222_1px,transparent_1px,transparent_1.25rem)]
  }
}