/* Better Together - Professional UI Styles */

/* Base Styles */
* {
  box-sizing: border-box;
}

:root {
  --primary-pink: #ec4899;
  --primary-purple: #8b5cf6;
  --primary-blue: #3b82f6;
  --success-green: #10b981;
  --warning-yellow: #f59e0b;
  --error-red: #ef4444;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  line-height: 1.6;
  color: var(--gray-800);
  scroll-behavior: smooth;
}

/* Typography Enhancements */
.text-gradient {
  background: linear-gradient(135deg, var(--primary-pink) 0%, var(--primary-purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Button Enhancements */
.btn-primary {
  @apply bg-pink-600 text-white px-6 py-3 rounded-lg font-semibold transition-all duration-200 shadow-lg;
}

.btn-primary:hover {
  @apply bg-pink-700 transform scale-105 shadow-xl;
}

.btn-secondary {
  @apply bg-white text-gray-700 px-6 py-3 rounded-lg font-semibold border border-gray-300 transition-all duration-200 shadow-md;
}

.btn-secondary:hover {
  @apply bg-gray-50 shadow-lg;
}

/* Card Components */
.card {
  @apply bg-white rounded-2xl shadow-lg transition-all duration-300;
}

.card:hover {
  @apply shadow-2xl transform translate-y-1;
}

.feature-card {
  @apply bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all duration-300;
}

.feature-card:hover {
  @apply transform translate-y-[-4px];
}

/* Icon Containers */
.icon-container {
  @apply w-16 h-16 rounded-2xl flex items-center justify-center text-2xl text-white shadow-lg;
}

.icon-container.pink {
  background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
}

.icon-container.purple {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.icon-container.blue {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.icon-container.green {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

/* Progress Bars */
.progress-bar {
  @apply w-full bg-gray-200 rounded-full h-3 overflow-hidden;
}

.progress-fill {
  @apply h-full rounded-full transition-all duration-1000 ease-out;
  background: linear-gradient(90deg, #10b981 0%, #059669 100%);
}

.progress-fill.pink {
  background: linear-gradient(90deg, #ec4899 0%, #be185d 100%);
}

.progress-fill.purple {
  background: linear-gradient(90deg, #8b5cf6 0%, #7c3aed 100%);
}

.progress-fill.blue {
  background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
}

/* Achievement Badges */
.achievement-badge {
  @apply inline-flex items-center px-4 py-2 rounded-full text-sm font-medium shadow-lg;
  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
  color: white;
}

/* Love Language Badges */
.love-language-badge {
  @apply inline-block px-3 py-1 rounded-full text-xs font-semibold;
}

.love-language-words { 
  @apply bg-blue-100 text-blue-800 border border-blue-200; 
}

.love-language-quality { 
  @apply bg-green-100 text-green-800 border border-green-200; 
}

.love-language-touch { 
  @apply bg-pink-100 text-pink-800 border border-pink-200; 
}

.love-language-acts { 
  @apply bg-yellow-100 text-yellow-800 border border-yellow-200; 
}

.love-language-gifts { 
  @apply bg-purple-100 text-purple-800 border border-purple-200; 
}

/* Connection Score Indicators */
.score-excellent { @apply text-green-600 font-bold; }
.score-good { @apply text-blue-600 font-bold; }
.score-fair { @apply text-yellow-600 font-bold; }
.score-poor { @apply text-red-600 font-bold; }

/* Challenge Difficulty Indicators */
.difficulty-beginner { 
  @apply bg-green-100 text-green-800 border border-green-200; 
}

.difficulty-intermediate { 
  @apply bg-yellow-100 text-yellow-800 border border-yellow-200; 
}

.difficulty-advanced { 
  @apply bg-red-100 text-red-800 border border-red-200; 
}

/* Animated Elements */
@keyframes heartbeat {
  0%, 50%, 100% { transform: scale(1); }
  25%, 75% { transform: scale(1.1); }
}

.heart-pulse {
  animation: heartbeat 2s infinite;
}

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

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

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

.animate-slide-in-right {
  animation: slideInRight 0.6s ease-out;
}

/* Modal Enhancements */
.modal {
  @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4;
  animation: fadeIn 0.3s ease-out;
}

.modal-content {
  @apply bg-white rounded-2xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto;
  animation: slideIn 0.3s ease-out;
}

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

@keyframes slideIn {
  from { 
    opacity: 0;
    transform: translateY(-20px) scale(0.95); 
  }
  to { 
    opacity: 1;
    transform: translateY(0) scale(1); 
  }
}

/* Notification System */
.notification {
  @apply fixed top-4 right-4 p-4 rounded-lg shadow-xl z-50 max-w-md;
  animation: slideInRight 0.3s ease-out;
}

.notification.success {
  @apply bg-green-500 text-white;
}

.notification.error {
  @apply bg-red-500 text-white;
}

.notification.warning {
  @apply bg-yellow-500 text-black;
}

.notification.info {
  @apply bg-blue-500 text-white;
}

/* Form Enhancements */
.form-input {
  @apply w-full p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-pink-500 transition-all duration-200;
}

.form-input:focus {
  @apply outline-none shadow-lg border-pink-500;
}

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

.form-select {
  @apply w-full p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-pink-500 transition-colors bg-white;
}

/* Relationship Health Scoring */
.health-score {
  @apply text-3xl font-bold;
}

.health-excellent { @apply text-green-600; }
.health-good { @apply text-blue-600; }
.health-fair { @apply text-yellow-600; }
.health-poor { @apply text-red-600; }

/* Streak Counter */
.streak-counter {
  @apply inline-flex items-center px-4 py-2 rounded-full font-bold text-lg shadow-lg text-white;
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

/* Activity Type Icons */
.activity-icon {
  @apply w-10 h-10 rounded-lg flex items-center justify-center text-white font-semibold;
}

.activity-date-night {
  background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
}

.activity-quality-time {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.activity-adventure {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.activity-relaxation {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

/* Loading States */
.spinner {
  @apply animate-spin rounded-full border-4 border-gray-200 border-t-pink-600;
}

.skeleton {
  @apply animate-pulse bg-gray-200 rounded;
}

/* Gradient Backgrounds */
.bg-gradient-primary {
  background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
}

.bg-gradient-secondary {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.bg-gradient-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.bg-gradient-warm {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}

/* Responsive Design Helpers */
@media (max-width: 768px) {
  .mobile-stack {
    @apply flex-col space-y-4;
  }
  
  .mobile-full {
    @apply w-full;
  }
  
  .mobile-center {
    @apply text-center;
  }
  
  .mobile-hide {
    @apply hidden;
  }
}

/* Print Styles */
@media print {
  .no-print {
    display: none !important;
  }
  
  .print-break {
    page-break-after: always;
  }
}

/* Dark Mode Support (Future Enhancement) */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #1f2937;
    --text-primary: #f9fafb;
    --border-color: #374151;
  }
}

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

::-webkit-scrollbar-track {
  background: var(--gray-100);
}

::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}

/* Focus Accessibility */
*:focus {
  outline: 2px solid var(--primary-pink);
  outline-offset: 2px;
}

button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--primary-pink);
  outline-offset: 2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .card {
    border: 2px solid var(--gray-800);
  }
  
  .btn-primary {
    border: 2px solid var(--gray-900);
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}