/* Shared styles across all pages */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --primary-color: #3b82f6; /* blue-500 */
  --secondary-color: #f59e0b; /* yellow-500 */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: #111827; /* gray-900 */
  color: #f9fafb; /* gray-50 */
}

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

::-webkit-scrollbar-track {
  background: #1f2937; /* gray-800 */
}

::-webkit-scrollbar-thumb {
  background: #3b82f6; /* blue-500 */
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #2563eb; /* blue-600 */
}

/* Animation utilities */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.6s ease-out forwards;
}

/* Button styles */
.btn-primary {
  @apply bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-lg transition duration-300;
}

.btn-secondary {
  @apply bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-bold py-3 px-6 rounded-lg transition duration-300;
}
/* Editor specific styles */
.canvas-container {
  background-color: #1f2937; /* gray-800 */
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.toolbar-btn {
  padding: 0.75rem;
  border-radius: 0.5rem;
  background-color: #374151; /* gray-700 */
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toolbar-btn:hover {
  background-color: #4b5563; /* gray-600 */
}

.tool-active {
  background-color: #3b82f6; /* blue-500 */
  color: white;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .toolbar {
    flex-direction: row !important;
    overflow-x: auto;
    padding: 0.5rem;
  }
  
  .toolbar .toolbar-btn {
    margin-right: 0.5rem;
    margin-bottom: 0;
  }
}