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

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

* {
  font-family: 'Inter', system-ui, sans-serif;
}

@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  body {
    @apply bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100 antialiased;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-display font-bold tracking-tight;
  }
}

@layer components {
  /* Buttons */
  .btn {
    @apply inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-xl font-semibold text-sm
           transition-all duration-300 ease-out
           focus:outline-none focus:ring-2 focus:ring-offset-2
           disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none
           active:scale-[0.98];
  }
  
  .btn-primary {
    @apply btn bg-gradient-to-r from-primary-600 to-primary-500 text-white
           hover:from-primary-700 hover:to-primary-600 hover:shadow-lg hover:shadow-primary-500/25
           focus:ring-primary-500;
  }

  .btn-secondary {
    @apply btn bg-gray-100 text-gray-700 border border-gray-200
           hover:bg-gray-200 hover:border-gray-300
           dark:bg-gray-800 dark:text-gray-200 dark:border-gray-700
           dark:hover:bg-gray-700 dark:hover:border-gray-600
           focus:ring-gray-500;
  }

  .btn-outline {
    @apply btn border-2 border-primary-600 text-primary-600 bg-transparent
           hover:bg-primary-600 hover:text-white
           focus:ring-primary-500;
  }
  
  .btn-ghost {
    @apply btn text-gray-600 dark:text-gray-400
           hover:bg-gray-100 dark:hover:bg-gray-800
           focus:ring-gray-500;
  }
  
  .btn-danger {
    @apply btn bg-gradient-to-r from-error-600 to-error-500 text-white
           hover:from-error-700 hover:to-error-600 hover:shadow-lg hover:shadow-error-500/25
           focus:ring-error-500;
  }
  
  .btn-success {
    @apply btn bg-gradient-to-r from-success-600 to-success-500 text-white
           hover:from-success-700 hover:to-success-600 hover:shadow-lg hover:shadow-success-500/25
           focus:ring-success-500;
  }
  
  .btn-lg {
    @apply px-8 py-3.5 text-base rounded-2xl;
  }
  
  .btn-sm {
    @apply px-4 py-2 text-xs rounded-lg;
  }
  
  .btn-icon {
    @apply p-2.5 rounded-xl;
  }

  /* Input Fields */
  .input-field {
    @apply w-full px-4 py-3 bg-white dark:bg-gray-800 
           border border-gray-200 dark:border-gray-700 rounded-xl
           text-gray-900 dark:text-white placeholder-gray-400
           transition-all duration-200 ease-out
           focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500
           hover:border-gray-300 dark:hover:border-gray-600;
  }
  
  .input-field-error {
    @apply input-field border-error-500 focus:ring-error-500/20 focus:border-error-500;
  }
  
  .input-label {
    @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2;
  }

  /* Cards */
  .card {
    @apply bg-white dark:bg-gray-800 rounded-2xl shadow-soft p-6
           border border-gray-100 dark:border-gray-700
           transition-all duration-300 ease-out;
  }
  
  .card-hover {
    @apply card hover:shadow-soft-lg hover:-translate-y-1 hover:border-gray-200 dark:hover:border-gray-600;
  }
  
  .card-interactive {
    @apply card-hover cursor-pointer active:scale-[0.99];
  }

  /* Badges */
  .badge {
    @apply inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold;
  }

  .badge-primary {
    @apply badge bg-primary-100 text-primary-700 dark:bg-primary-900 dark:bg-opacity-30 dark:text-primary-400;
  }
  
  .badge-success {
    @apply badge bg-green-100 text-green-700 dark:bg-green-900 dark:bg-opacity-30 dark:text-green-400;
  }

  .badge-warning {
    @apply badge bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:bg-opacity-30 dark:text-yellow-400;
  }

  .badge-error {
    @apply badge bg-red-100 text-red-700 dark:bg-red-900 dark:bg-opacity-30 dark:text-red-400;
  }
  
  .badge-gray {
    @apply badge bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300;
  }
  
  /* Glass Effect */
  .glass {
    @apply bg-white/70 dark:bg-gray-800/70 backdrop-blur-xl border border-white/20;
  }
  
  .glass-dark {
    @apply bg-gray-900/70 backdrop-blur-xl border border-gray-700/50;
  }
  
  /* Skeleton Loading */
  .skeleton {
    @apply bg-gradient-to-r from-gray-200 via-gray-100 to-gray-200 
           dark:from-gray-700 dark:via-gray-600 dark:to-gray-700
           bg-[length:200%_100%] animate-shimmer rounded-lg;
  }
  
  /* Gradient Text */
  .gradient-text {
    @apply bg-gradient-to-r from-primary-600 via-accent-500 to-primary-600 
           bg-clip-text text-transparent bg-[length:200%_auto] animate-shimmer;
  }
  
  /* Section Headers */
  .section-title {
    @apply text-2xl md:text-3xl font-display font-bold text-gray-900 dark:text-white;
  }
  
  .section-subtitle {
    @apply text-gray-500 dark:text-gray-400 mt-2 max-w-2xl;
  }
  
  /* Dividers */
  .divider {
    @apply border-t border-gray-200 dark:border-gray-700;
  }
  
  .divider-vertical {
    @apply border-l border-gray-200 dark:border-gray-700 h-6;
  }
  
  /* Links */
  .link {
    @apply text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300
           font-medium transition-colors duration-200 underline-offset-4 hover:underline;
  }
  
  /* Tooltips */
  .tooltip {
    @apply absolute z-50 px-3 py-1.5 text-xs font-medium text-white bg-gray-900 
           rounded-lg shadow-lg dark:bg-gray-700 whitespace-nowrap
           opacity-0 invisible transition-all duration-200
           group-hover:opacity-100 group-hover:visible;
  }
  
  /* Avatar */
  .avatar {
    @apply rounded-full object-cover ring-2 ring-white dark:ring-gray-800;
  }
  
  .avatar-sm { @apply w-8 h-8; }
  .avatar-md { @apply w-10 h-10; }
  .avatar-lg { @apply w-14 h-14; }
  .avatar-xl { @apply w-20 h-20; }
  
  /* Table */
  .table-container {
    @apply overflow-hidden rounded-xl border border-gray-200 dark:border-gray-700;
  }
  
  .table-header {
    @apply bg-gray-50 dark:bg-gray-800/50 text-left text-xs font-semibold 
           text-gray-500 dark:text-gray-400 uppercase tracking-wider;
  }
  
  .table-row {
    @apply border-b border-gray-100 dark:border-gray-700/50 
           hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors;
  }
  
  .table-cell {
    @apply px-6 py-4 text-sm text-gray-700 dark:text-gray-300;
  }
  
  /* Stat Card */
  .stat-card {
    @apply card flex items-center gap-4;
  }
  
  .stat-icon {
    @apply p-3 rounded-xl;
  }
  
  .stat-value {
    @apply text-2xl font-bold text-gray-900 dark:text-white;
  }
  
  .stat-label {
    @apply text-sm text-gray-500 dark:text-gray-400;
  }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  @apply bg-gray-100 dark:bg-gray-800;
}

::-webkit-scrollbar-thumb {
  @apply bg-gray-300 dark:bg-gray-600 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-400 dark:bg-gray-500;
}

/* Selection */
::selection {
  @apply bg-primary-500/20 text-primary-900 dark:text-primary-100;
}

/* Focus visible */
*:focus-visible {
  @apply outline-none ring-2 ring-primary-500 ring-offset-2 ring-offset-white dark:ring-offset-gray-900;
}

/* Hide number input spinners */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/* Custom checkbox */
input[type="checkbox"] {
  @apply rounded border-gray-300 dark:border-gray-600 
         text-primary-600 focus:ring-primary-500 focus:ring-offset-0
         dark:bg-gray-700 transition-colors cursor-pointer;
}

/* Radio button */
input[type="radio"] {
  @apply border-gray-300 dark:border-gray-600 
         text-primary-600 focus:ring-primary-500 focus:ring-offset-0
         dark:bg-gray-700 cursor-pointer;
}

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }
}