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

@layer utilities {
  @keyframes pulse-bg {
    0%, 100% {
      background-color: rgb(31, 41, 55); /* bg-gray-800 */
    }
    50% {
      background-color: rgb(17, 24, 39); /* bg-gray-900 */
    }
  }

  .skeleton {
    background-color: #e0e0e0;
    border-radius: 4px;
    animation: pulse-bg 1.5s infinite ease-in-out;
  }
}
/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

@layer components {
  /* Button Variants */
  .btn-primary {
    @apply flex w-full justify-center rounded-md bg-gradient-to-b from-emerald-600 to-green-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:from-emerald-500 hover:to-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600;
  }

  .btn-secondary {  
    @apply flex w-full justify-center rounded-md bg-gradient-to-b from-blue-600 to-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:from-blue-500 hover:to-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600;
  }

  .btn-danger {
    @apply flex w-full justify-center rounded-md bg-gradient-to-b from-rose-600 to-red-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:from-rose-500 hover:to-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600;
  }

  .btn-social {
    @apply flex w-full justify-center rounded-md bg-gradient-to-b from-blue-600 to-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:from-blue-500 hover:to-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600;
  }

  /* Form Input Styles */
  .form-input {
    @apply block w-full rounded-md border-0 py-1.5 px-3 text-gray-900 dark:text-white shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-600 placeholder:text-gray-400 dark:placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 dark:focus:ring-indigo-500 sm:text-sm sm:leading-6 dark:bg-gray-800;
  }

  .form-label {
    @apply block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100;
  }

  .form-checkbox {
    @apply h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600;
  }

  /* Link Styles */
  .link-primary {
    @apply font-semibold text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300;
  }

  .card {
    @apply bg-white dark:bg-gray-800 
           shadow-sm 
           rounded-xl 
           border border-gray-200 dark:border-gray-700
           p-6;
  }

  .terminal-output {
    background-color: #0c0c0c;
    border-radius: 6px;
    padding: 12px;
    font-family: 'Courier New', Courier, monospace;
    color: #00ff00;
    min-height: 2.5em;
    border: 1px solid #333;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }
  
  .terminal-output:empty {
    display: none;
  }
  
  .terminal-output:not(:empty) {
    display: block;
  }
}