/* Custom styles for Runway Ready */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&display=swap');

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

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Brand Colors */
:root {
  --primary-gradient: linear-gradient(135deg, #f8e8ff 0%, #e8d5ff 50%, #dac4ff 100%);
  --accent-pink: #e91e63;
  --accent-purple: #9c27b0;
  --text-dark: #2d1b69;
  --card-shadow: 0 10px 40px rgba(156, 39, 176, 0.1);
  --button-gradient: linear-gradient(135deg, #e91e63 0%, #9c27b0 100%);
}

.brand-gradient {
  background: var(--primary-gradient);
}

.text-brand-dark {
  color: var(--text-dark);
}

.btn-brand {
  background: var(--button-gradient);
  color: white;
  border: none;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.025em;
  box-shadow: 0 4px 20px rgba(233, 30, 99, 0.3);
  transition: all 0.3s ease;
}

.btn-brand:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(233, 30, 99, 0.4);
}

.card-elegant {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: var(--card-shadow);
}

.heading-primary {
  font-family: 'Playfair Display', serif;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.2;
}

.text-muted-elegant {
  color: #6b7280;
  font-weight: 400;
}

/* Button styles */
.btn {
  @apply px-6 py-3 rounded-2xl font-semibold transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.btn-primary {
  background: var(--button-gradient);
  color: white;
  box-shadow: 0 4px 20px rgba(233, 30, 99, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(233, 30, 99, 0.4);
}

.btn-secondary {
  @apply bg-white text-gray-700 border-2 border-gray-200 hover:border-gray-300 focus:ring-gray-400;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.btn-secondary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
}

.btn-danger {
  @apply bg-red-500 text-white hover:bg-red-600 focus:ring-red-400;
}

.btn-success {
  @apply bg-green-500 text-white hover:bg-green-600 focus:ring-green-400;
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--accent-pink);
  color: var(--accent-pink);
}

.btn-outline:hover {
  background: var(--accent-pink);
  color: white;
}

/* Form styles */
.form-input {
  @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-black focus:border-transparent;
}

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

.form-error {
  @apply text-red-600 text-sm mt-1;
}

/* Card styles */
.card {
  @apply bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden;
}

.card-header {
  @apply px-6 py-4 border-b border-gray-100;
}

.card-body {
  @apply p-6;
}

.card-footer {
  @apply px-6 py-4 border-t border-gray-100 bg-gray-50;
}

/* Loading animation */
.loading-spinner {
  @apply animate-spin rounded-full border-2 border-gray-200 border-t-black;
}

/* Workout player styles */
.workout-player {
  background: linear-gradient(135deg, #1e1e2e 0%, #2d2d44 100%);
}

.timer-circle {
  transform-origin: center;
  transition: stroke-dasharray 0.1s linear;
}

.progress-ring {
  transform: rotate(-90deg);
}

/* Video player styles */
.video-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  background: #000;
  border-radius: 12px;
  overflow: hidden;
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Exercise card styles */
.exercise-card {
  @apply bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden transition-all duration-200 hover:shadow-md;
}

.exercise-card:hover {
  transform: translateY(-2px);
}

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

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

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

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

/* Community styles */
.community-post {
  @apply bg-white rounded-lg border border-gray-200 p-6 hover:shadow-sm transition-shadow;
}

.community-post-header {
  @apply flex items-center justify-between mb-4;
}

.community-post-content {
  @apply text-gray-700 mb-4 whitespace-pre-wrap;
}

.community-post-actions {
  @apply flex items-center space-x-4 text-sm text-gray-500;
}

/* Progress styles */
.progress-bar {
  @apply w-full bg-gray-200 rounded-full h-2;
}

.progress-fill {
  @apply bg-black h-2 rounded-full transition-all duration-300;
}

/* Toast notification styles */
.toast {
  @apply fixed top-4 right-4 bg-white border border-gray-200 rounded-lg shadow-lg p-4 max-w-sm z-50 transform transition-all duration-300;
}

.toast-success {
  @apply border-green-200 bg-green-50;
}

.toast-error {
  @apply border-red-200 bg-red-50;
}

.toast-info {
  @apply border-blue-200 bg-blue-50;
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
  .card-body {
    @apply p-4;
  }
  
  .btn {
    @apply px-4 py-2 text-sm;
  }
  
  .form-input {
    @apply px-3 py-2;
  }
}

/* Dark mode support for workout player */
@media (prefers-color-scheme: dark) {
  .workout-player {
    background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 100%);
  }
}

/* Accessibility improvements */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus styles for keyboard navigation */
.focus-visible {
  @apply focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2;
}

/* Animation classes */
.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

.slide-up {
  animation: slideUp 0.3s ease-out;
}

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

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

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}