@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap');

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

:root {
  --primary-color: #00aacb;
  --secondary-color: #0562a4;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html {
  scroll-behavior: smooth;
}

@layer components {
  .btn-primary {
    @apply inline-flex items-center justify-center px-6 py-3 bg-primary-500 text-white font-semibold rounded-md hover:bg-primary-600 transition-colors duration-200 cursor-pointer;
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center px-6 py-3 bg-secondary-500 text-white font-semibold rounded-md hover:bg-secondary-600 transition-colors duration-200 cursor-pointer;
  }

  .btn-outline {
    @apply inline-flex items-center justify-center px-6 py-3 border-2 border-primary-500 text-primary-500 font-semibold rounded-md hover:bg-primary-500 hover:text-white transition-colors duration-200 cursor-pointer;
  }

  .btn-ghost {
    @apply inline-flex items-center justify-center px-4 py-2 text-gray-600 font-medium rounded-md hover:bg-gray-100 transition-colors duration-200 cursor-pointer;
  }

  .card {
    @apply bg-white rounded-lg shadow-md overflow-hidden;
  }

  .input-field {
    @apply w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-shadow duration-200;
  }

  .label {
    @apply block text-sm font-medium text-gray-700 mb-1;
  }

  .badge-stock {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  }

  .badge-instock {
    @apply badge-stock bg-green-100 text-green-800;
  }

  .badge-lowstock {
    @apply badge-stock bg-amber-100 text-amber-800;
  }

  .badge-outofstock {
    @apply badge-stock bg-red-100 text-red-800;
  }

  .section-title {
    @apply text-3xl font-bold text-secondary-500 mb-2;
  }

  .section-subtitle {
    @apply text-lg text-gray-500 mb-8;
  }
}

/* Fade transitions */
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; }

/* Page loader shimmer */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}