@import "./brand-system.css";

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

/**
 * Prosperity Control - Application Styles
 * 
 * Core styles are imported from brand-system.css above.
 * This file handles Tailwind integration and app-specific overrides.
 */

/* ============================================================================
   COMPONENT UTILITIES (Legacy Support & Tailwind Extensions)
   ============================================================================ */

/* Buttons - extending brand system with Tailwind utility composition */
.btn {
  @apply inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors;
  border-radius: var(--radius-base);
  transition: all var(--transition-base);
}

.btn-primary {
  @apply text-white;
  background-color: var(--primary);
}
.btn-primary:hover {
  background-color: var(--primary-600);
}
.btn-primary:focus {
  box-shadow: var(--focus-ring);
}

.btn-secondary {
  @apply text-white;
  background-color: var(--secondary);
}
.btn-secondary:hover {
  background-color: var(--secondary-600);
}
.btn-secondary:focus {
  box-shadow: 0 0 0 2px var(--secondary), 0 0 0 4px rgba(255, 116, 2, 0.2);
}

.btn-ghost {
  @apply bg-transparent border-gray-300;
  color: var(--text-secondary);
}
.btn-ghost:hover {
  background-color: var(--gray-50);
  color: var(--text-primary);
}

.btn-danger {
  @apply text-white;
  background-color: var(--error);
}
.btn-danger:hover {
  background-color: var(--error-600);
}
.btn-danger:focus {
  box-shadow: var(--focus-ring-error);
}

/* Forms */
.form-control {
  @apply block w-full shadow-sm sm:text-sm;
  border-color: var(--border);
  border-radius: var(--radius-base);
}
.form-control:focus {
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}

.form-label {
  @apply block text-sm font-medium mb-1;
  color: var(--text-primary);
}

/* Cards */
.card {
  @apply bg-white overflow-hidden shadow rounded-lg;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.card-header {
  @apply px-4 py-5 sm:px-6;
  border-bottom: 1px solid var(--border);
  background-color: var(--gray-50);
}

.card-body {
  @apply px-4 py-5 sm:p-6;
}

.card-footer {
  @apply px-4 py-4 sm:px-6;
  background-color: var(--gray-50);
  border-top: 1px solid var(--border);
}

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

.badge-success {
  background-color: var(--success-50);
  color: var(--success-700);
}

.badge-warning {
  background-color: var(--warning-50);
  color: var(--warning-700);
}

.badge-error {
  background-color: var(--error-50);
  color: var(--error-700);
}

.badge-info {
  background-color: var(--primary-50);
  color: var(--primary-700);
}

/* ============================================================================
   ANIMATIONS & TRANSITIONS
   ============================================================================ */

@layer utilities {
  /* Fade in animation */
  .animate-fade-in {
    animation: fadeIn 0.3s ease-in-out;
  }

  /* Slide up animation */
  .animate-slide-up {
    animation: slideUp 0.3s ease-out;
  }

  /* Slide in from right */
  .animate-slide-in-right {
    animation: slideInRight 0.3s ease-out;
  }

  /* Scale up animation */
  .animate-scale-up {
    animation: scaleUp 0.2s ease-out;
  }

  /* Smooth transitions */
  .transition-smooth {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleUp {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* Hover effects for interactive elements */
.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}