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

/* OLAK Design System CSS Variables */
:root {
  --olak-primary: #9C8671;
  --olak-primary-dark: #7A6656;
  --olak-primary-light: #B89F8E;
  --olak-accent: #D4A574;
  --olak-dark: #2C2C2C;
  --olak-gray: #F5F5F5;
  --olak-white: #FFFFFF;
  --olak-success: #4CAF50;
  --olak-warning: #FF9800;
  --olak-error: #F44336;
}

@layer components {
  /* Button Components */
  .btn-primary {
    @apply bg-olak-primary text-white px-6 py-3 rounded-lg font-semibold;
    @apply transition-all duration-300;
    @apply hover:bg-olak-primary-dark hover:-translate-y-0.5;
    @apply hover:shadow-lg;
    @apply border-none cursor-pointer;
  }

  .btn-secondary {
    @apply bg-white text-olak-primary px-6 py-3 rounded-lg font-semibold;
    @apply border-2 border-olak-primary;
    @apply transition-all duration-300;
    @apply hover:bg-olak-primary hover:text-white;
    @apply cursor-pointer;
  }

  /* Input Components */
  .input-olak {
    @apply w-full px-4 py-3 border-2 border-gray-200 rounded-lg text-base;
    @apply transition-all duration-300;
    @apply focus:outline-none focus:border-olak-primary;
    @apply focus:ring-4 focus:ring-olak-primary/10;
  }

  /* Card Components */
  .card-olak {
    @apply bg-white rounded-xl p-6;
    @apply shadow-md transition-all duration-300;
    @apply hover:shadow-xl hover:-translate-y-1;
  }

  /* Badge Components */
  .badge {
    @apply px-3 py-1.5 rounded-full text-sm font-semibold inline-block;
  }

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

  .badge-pending {
    @apply bg-yellow-100 text-yellow-800;
  }

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

  .badge-zone-tendue {
    @apply bg-olak-primary-light text-olak-dark;
  }

  .badge-furnished {
    @apply bg-blue-100 text-blue-800;
  }

  .badge-unfurnished {
    @apply bg-purple-100 text-purple-800;
  }

  /* Navigation Components */
  .nav-link {
    @apply text-olak-dark px-4 py-2 rounded-md transition-all duration-300 font-medium;
    @apply hover:bg-olak-gray hover:text-olak-primary;
  }

  .nav-link.active {
    @apply bg-olak-primary text-white;
  }
}