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

@layer components {
  /* Private HQ Design System - Figma Aligned Colors */
  
  /* Button Components */
  .btn-luxury-primary {
    @apply bg-slate-900 hover:bg-slate-800 text-white rounded-xl font-semibold px-6 py-3 transition-all duration-200 shadow-sm hover:shadow-md;
  }
  
  .btn-luxury-secondary {
    @apply bg-white hover:bg-slate-50 text-slate-700 hover:text-slate-900 border border-slate-200 hover:border-slate-300 rounded-xl font-medium px-4 py-2 transition-all duration-200;
  }
  
  .btn-luxury-outline {
    @apply border-2 border-slate-900 text-slate-900 hover:bg-slate-900 hover:text-white rounded-xl font-medium px-4 py-2 transition-all duration-200;
  }

  /* Card Components */
  .card-luxury {
    @apply bg-white border border-slate-200/60 shadow-sm rounded-2xl transition-all duration-200 hover:shadow-md hover:border-slate-300/60;
  }
  
  .card-luxury-elevated {
    @apply bg-white border border-slate-200/60 shadow-lg rounded-2xl;
  }

  /* Status Badges */
  .status-green {
    @apply bg-emerald-50 text-emerald-700 border border-emerald-200/60 rounded-lg;
  }
  
  .status-blue {
    @apply bg-blue-50 text-blue-700 border border-blue-200/60 rounded-lg;
  }
  
  .status-amber {
    @apply bg-amber-50 text-amber-700 border border-amber-200/60 rounded-lg;
  }
  
  .status-red {
    @apply bg-red-50 text-red-700 border border-red-200/60 rounded-lg;
  }
  
  .status-purple {
    @apply bg-purple-50 text-purple-700 border border-purple-200/60 rounded-lg;
  }

  /* Input Components */
  .input-luxury {
    @apply w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-slate-900 focus:border-transparent bg-white placeholder-slate-500 text-slate-900 transition-all duration-200;
  }
  
  .select-luxury {
    @apply px-4 py-3 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-slate-900 bg-white text-slate-900 transition-all duration-200;
  }

  /* Navigation Components */
  .nav-item-active {
    @apply bg-slate-900 text-white shadow-sm;
  }
  
  .nav-item-inactive {
    @apply text-slate-600 hover:text-slate-900 hover:bg-slate-50;
  }

  /* Background Variations */
  .bg-luxury-primary {
    @apply bg-slate-900;
  }
  
  .bg-luxury-secondary {
    @apply bg-slate-50;
  }
  
  .bg-luxury-accent {
    @apply bg-blue-600;
  }

  /* Text Variations */
  .text-luxury-primary {
    @apply text-slate-900;
  }
  
  .text-luxury-secondary {
    @apply text-slate-600;
  }
  
  .text-luxury-muted {
    @apply text-slate-500;
  }

  /* Shadow Utilities */
  .shadow-luxury {
    @apply shadow-sm;
  }
  
  .shadow-luxury-lg {
    @apply shadow-lg;
  }

  /* Border Utilities */
  .border-luxury {
    @apply border-slate-200/60;
  }
  
  .border-luxury-strong {
    @apply border-slate-300;
  }

  /* Hover States */
  .hover-luxury {
    @apply hover:bg-slate-50 hover:border-slate-300/60 transition-all duration-200;
  }

  /* Admin Specific Components */
  .admin-sidebar {
    @apply w-60 bg-white border-r border-slate-200/60 shadow-sm;
  }
  
  .admin-header {
    @apply bg-white border-b border-slate-200/60 shadow-sm;
  }
  
  .admin-content {
    @apply bg-slate-50;
  }

  /* Notification Styles */
  .notification-badge {
    @apply absolute -top-1 -right-1 h-4 w-4 bg-red-500 text-white text-xs rounded-full flex items-center justify-center font-medium;
  }

  /* Table Styles */
  .table-luxury {
    @apply w-full;
  }
  
  .table-luxury thead tr {
    @apply border-b border-slate-100;
  }
  
  .table-luxury tbody tr {
    @apply border-b border-slate-50 hover:bg-slate-50 transition-colors;
  }
  
  .table-luxury th {
    @apply text-left text-slate-700 font-semibold text-sm py-3;
  }
  
  .table-luxury td {
    @apply py-4;
  }
}