html { font-family: 'Inter', system-ui, sans-serif; }
body { min-height: 100vh; }
/* Light theme variables */
:root {
  --bg-background: #F7F7F8;
  --bg-surface: #FFFFFF;
  --text-primary: #1A1A1A;
  --text-secondary: #6B7280;
  --bg-accent: #007BFF;
  --text-accent: #FFFFFF;
  --border-color: #E5E7EB;
  --bg-success: #10B981;
  --bg-error: #EF4444;
}
/* Dark theme variables */
html.dark {
  --bg-background: #121212;
  --bg-surface: #1E1E1E;
  --text-primary: #F9FAFB;
  --text-secondary: #9CA3AF;
  --bg-accent: #3B82F6;
  --text-accent: #FFFFFF;
  --border-color: #374151;
  --bg-success: #34D399;
  --bg-error: #F87171;
}

/* Modal Animations */
.modal-backdrop {
  animation: fadeIn 0.3s ease-out;
}

.modal-content {
  animation: slideIn 0.3s ease-out;
}

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

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

.modal-closing .modal-backdrop {
  animation: fadeOut 0.2s ease-in;
}

.modal-closing .modal-content {
  animation: slideOut 0.2s ease-in;
}

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

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