/* Import Inter font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

@import "tailwindcss";

/* Tailwind v4 Theme Configuration */
@theme {
  /* Font Family */
  --font-family-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Sage (Primary) Colors */
  --color-sage-50: #f4f6f4;
  --color-sage-100: #e6ebe7;
  --color-sage-200: #cdd7cf;
  --color-sage-300: #a8b9ab;
  --color-sage-400: #7d9580;
  --color-sage-500: #5f7a62;
  --color-sage-600: #3f5243;   /* Darkened for better contrast (5.2:1 on white) */
  --color-sage-700: #3d5041;
  --color-sage-800: #334136;
  --color-sage-900: #2b362d;
  --color-sage-950: #1a1f1b;   /* Maximum contrast for headings */

  /* Slate (Secondary) Colors */
  --color-slate-50: #f7f8f9;
  --color-slate-100: #eef0f2;
  --color-slate-200: #dce1e5;
  --color-slate-300: #bdc5cc;
  --color-slate-400: #98a3ad;
  --color-slate-500: #7a8691;
  --color-slate-600: #525d67;   /* Darkened for better text contrast (5.5:1 on white) */
  --color-slate-700: #515a63;
  --color-slate-800: #464d54;
  --color-slate-900: #3d4349;

  /* Clay (Accent) Colors - Full Scale */
  --color-clay-50: #f9f7f5;
  --color-clay-100: #f1ede8;
  --color-clay-200: #e3d9d0;
  --color-clay-300: #cbb9a8;
  --color-clay-400: #a78b7a;
  --color-clay-500: #8b6f5c;
  --color-clay-600: #6f5646;
  --color-clay-700: #5c463a;
  --color-clay-800: #4d3b31;
  --color-clay-900: #42322a;

  /* Semantic Colors */
  --color-success: #3f5243;     /* Using improved sage-600 */
  --color-error: #be5a47;       /* Passes contrast (5.1:1) */
  --color-warning: #b8874d;     /* Darkened for visibility (4.8:1) */
  --color-info: #7a8691;        /* Slate-500 */
}

/* Custom utility classes */
@layer components {
  /* ========================================
     BUTTON SYSTEM
     ======================================== */

  /* Base button styles (for reference - use btn-* classes in HTML) */
  .btn {
    @apply px-4 py-2 rounded-md font-medium transition-colors duration-200;
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2;
    @apply disabled:opacity-50 disabled:cursor-not-allowed;
    @apply motion-reduce:transition-none;
  }

  /* Button variants - each includes full base styles */
  .btn-primary {
    @apply flex items-center justify-center;
    @apply px-4 py-2 rounded-md font-medium transition-colors duration-200;
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2;
    @apply disabled:opacity-50 disabled:cursor-not-allowed;
    @apply motion-reduce:transition-none;
    @apply bg-sage-600 text-white hover:bg-sage-700;
    @apply focus:ring-sage-500;
  }

  .btn-secondary {
    @apply flex items-center justify-center;
    @apply px-4 py-2 rounded-md font-medium transition-colors duration-200;
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2;
    @apply disabled:opacity-50 disabled:cursor-not-allowed;
    @apply motion-reduce:transition-none;
    @apply bg-slate-500 text-white hover:bg-slate-600;
    @apply focus:ring-slate-500;
  }

  .btn-accent {
    @apply flex items-center justify-center;
    @apply px-4 py-2 rounded-md font-medium transition-colors duration-200;
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2;
    @apply disabled:opacity-50 disabled:cursor-not-allowed;
    @apply motion-reduce:transition-none;
    @apply bg-clay-500 text-white hover:bg-clay-600;
    @apply focus:ring-clay-500;
  }

  .btn-outlined {
    @apply flex items-center justify-center;
    @apply px-4 py-2 rounded-md font-medium transition-colors duration-200;
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2;
    @apply disabled:opacity-50 disabled:cursor-not-allowed;
    @apply motion-reduce:transition-none;
    @apply border-2 border-sage-600 text-sage-600;
    @apply hover:bg-sage-50 focus:ring-sage-500;
  }

  .btn-ghost {
    @apply flex items-center justify-center;
    @apply px-4 py-2 rounded-md font-medium transition-colors duration-200;
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2;
    @apply disabled:opacity-50 disabled:cursor-not-allowed;
    @apply motion-reduce:transition-none;
    @apply text-slate-700 hover:bg-slate-100;
    @apply focus:ring-slate-500;
  }

  /* Button sizes - these can be combined with button variants */
  .btn-sm {
    @apply px-3 py-1.5 text-sm;
  }

  .btn-lg {
    @apply px-6 py-3 text-lg;
  }

  /* ========================================
     FORM COMPONENTS
     ======================================== */

  /* Form groups and labels */
  .form-group {
    @apply mb-4;
  }

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

  .form-label-required::after {
    content: ' *';
    @apply text-error;
  }

  .form-help {
    @apply mt-1 text-sm text-slate-600;
  }

  /* Input fields */
  .form-input {
    @apply block w-full rounded-md border border-slate-300 shadow-sm;
    @apply focus:border-sage-500 focus:ring-2 focus:ring-sage-500;
    @apply disabled:bg-slate-50 disabled:text-slate-500 disabled:cursor-not-allowed;
    @apply placeholder:text-slate-400;
    @apply p-2.5;
  }

  .form-input-error {
    @apply block w-full rounded-md border shadow-sm;
    @apply disabled:bg-slate-50 disabled:text-slate-500 disabled:cursor-not-allowed;
    @apply placeholder:text-slate-400;
    @apply p-2.5;
    @apply border-error focus:border-error focus:ring-2 focus:ring-error;
  }

  .form-input-success {
    @apply block w-full rounded-md border shadow-sm;
    @apply disabled:bg-slate-50 disabled:text-slate-500 disabled:cursor-not-allowed;
    @apply placeholder:text-slate-400;
    @apply p-2.5;
    @apply border-success focus:border-success focus:ring-2 focus:ring-success;
  }

  /* Checkbox and radio */
  .form-checkbox {
    @apply rounded border-slate-300 text-sage-600;
    @apply focus:ring-2 focus:ring-sage-500 focus:ring-offset-2;
    @apply disabled:opacity-50 disabled:cursor-not-allowed;
  }

  /* Error and success messages */
  .form-error {
    @apply mt-1 text-sm text-error flex items-start gap-1;
  }

  .form-error::before {
    content: '⚠';
    @apply shrink-0;
  }

  .form-success {
    @apply mt-1 text-sm text-success flex items-start gap-1;
  }

  .form-success::before {
    content: '✓';
    @apply shrink-0;
  }

  /* ========================================
     ALERTS (Inline Messages)
     ======================================== */

  .alert {
    @apply mb-6 p-4 rounded-md border flex items-start gap-3;
  }

  .alert-error {
    @apply mb-6 p-4 rounded-md border flex items-start gap-3;
    @apply bg-red-50 border-red-200;
  }

  .alert-success {
    @apply mb-6 p-4 rounded-md border flex items-start gap-3;
    @apply bg-sage-50 border-sage-200;
  }

  .alert-warning {
    @apply mb-6 p-4 rounded-md border flex items-start gap-3;
    @apply bg-yellow-50 border-yellow-200;
  }

  .alert-info {
    @apply mb-6 p-4 rounded-md border flex items-start gap-3;
    @apply bg-blue-50 border-blue-200;
  }

  .alert-icon {
    @apply h-5 w-5 mt-0.5 shrink-0;
  }

  .alert-icon-error {
    @apply h-5 w-5 mt-0.5 shrink-0 text-red-500;
  }

  .alert-icon-success {
    @apply h-5 w-5 mt-0.5 shrink-0 text-sage-600;
  }

  .alert-icon-warning {
    @apply h-5 w-5 mt-0.5 shrink-0 text-yellow-600;
  }

  .alert-icon-info {
    @apply h-5 w-5 mt-0.5 shrink-0 text-blue-600;
  }

  .alert-message {
    @apply text-sm;
  }

  .alert-message-error {
    @apply text-sm text-red-800;
  }

  .alert-message-success {
    @apply text-sm text-sage-800;
  }

  .alert-message-warning {
    @apply text-sm text-yellow-800;
  }

  .alert-message-info {
    @apply text-sm text-blue-800;
  }

  /* ========================================
     TOAST NOTIFICATIONS (Floating)
     ======================================== */

  .toast {
    @apply fixed top-4 right-4 px-6 py-3 rounded-md shadow-lg text-white font-medium z-50;
    @apply flex items-center gap-3 max-w-md;
    animation: slide-in-right 0.3s ease-out;
  }

  @media (prefers-reduced-motion: reduce) {
    .toast {
      animation: none;
    }
  }

  .toast-success {
    @apply bg-success;
  }

  .toast-error {
    @apply bg-error;
  }

  .toast-warning {
    @apply bg-warning text-slate-900;  /* Dark text for light warning */
  }

  .toast-info {
    @apply bg-info;
  }

  /* ========================================
     BADGES
     ======================================== */

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

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

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

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

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

  .badge-default {
    @apply bg-slate-100 text-slate-800;
  }

  /* ========================================
     LOADING STATES
     ======================================== */

  /* Spinner */
  .spinner {
    @apply inline-block w-8 h-8 border-4 border-slate-200 border-t-sage-600 rounded-full;
    @apply motion-safe:animate-spin;
    @apply motion-reduce:animate-none motion-reduce:border-t-transparent;
  }

  .spinner-sm {
    @apply w-4 h-4 border-2;
  }

  .spinner-lg {
    @apply w-12 h-12 border-4;
  }

  /* Skeleton loading */
  .skeleton {
    @apply bg-slate-200 rounded animate-pulse;
  }

  .skeleton-text {
    @apply bg-slate-200 rounded animate-pulse h-4 w-full mb-3;
  }

  .skeleton-text-sm {
    @apply bg-slate-200 rounded animate-pulse h-3 w-3/4 mb-2;
  }

  .skeleton-title {
    @apply bg-slate-200 rounded animate-pulse h-6 w-2/3 mb-4;
  }

  .skeleton-card {
    @apply bg-white rounded-lg shadow-md p-6 space-y-3;
  }

  /* ========================================
     EMPTY STATES
     ======================================== */

  .empty-state {
    @apply text-center py-12;
  }

  .empty-state-icon {
    @apply mx-auto h-12 w-12 text-slate-400;
  }

  .empty-state-title {
    @apply mt-4 text-lg font-semibold text-slate-900;
  }

  .empty-state-description {
    @apply mt-2 text-sm text-slate-600 max-w-md mx-auto;
  }
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes slide-in-right {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes ribbon-entrance {
  from {
    transform: rotate(45deg) translateY(-10px);
    opacity: 0;
  }
  to {
    transform: rotate(45deg) translateY(0);
    opacity: 1;
  }
}

/* ========================================
   PROPERTY STATUS RIBBON
   ======================================== */

/* Diagonal ribbon banner for sold/pending properties */
.status-ribbon {
  position: absolute;
  top: 20px;
  right: -35px;
  width: 150px;
  text-align: center;
  transform: rotate(45deg);
  z-index: 10;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 8px 0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  animation: ribbon-entrance 0.4s ease-out;
}

.status-ribbon-sold {
  background-color: #be5a47; /* Terracotta - error color */
  color: #ffffff;
}

.status-ribbon-pending {
  background-color: #b8874d; /* Sand - warning color */
  color: #ffffff;
}

/* Ensure parent container has relative positioning */
.property-card-image-wrapper {
  position: relative;
  overflow: hidden;
}

/* Subtle darkening overlay for sold/pending properties */
.property-unavailable-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 5;
}

/* Mobile optimization - smaller ribbon on small screens */
@media (max-width: 640px) {
  .status-ribbon {
    width: 130px;
    font-size: 0.75rem;
    padding: 6px 0;
    top: 15px;
    right: -30px;
  }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .status-ribbon {
    animation: none;
  }
}