@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
:root {
--color-primary: 14 165 233;
--color-secondary: 99 102 241;
--color-success: 34 197 94;
--color-warning: 251 146 60;
--color-error: 239 68 68;
--color-dark: 15 23 42;
--color-light: 248 250 252;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
@apply bg-gray-900 text-gray-100 min-h-screen;
}
#root {
@apply min-h-screen;
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
@apply bg-gray-800;
}
::-webkit-scrollbar-thumb {
@apply bg-gray-600 rounded-full;
}
::-webkit-scrollbar-thumb:hover {
@apply bg-gray-500;
}
/* Custom animations */
@keyframes pulse-slow {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.animate-pulse-slow {
animation: pulse-slow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
/* Video editor specific styles */
.video-timeline {
@apply bg-gray-800 rounded-lg p-4;
}
.video-preview {
@apply bg-black rounded-lg overflow-hidden aspect-video;
}
.timeline-track {
@apply bg-gray-700 rounded h-16 relative overflow-hidden;
}
.timeline-clip {
@apply bg-primary-500 h-full absolute rounded transition-all duration-200;
}
.timeline-clip:hover {
@apply bg-primary-400;
}
/* Component base styles */
.btn {
@apply px-4 py-2 rounded-lg font-medium transition-all duration-200;
}
.btn-primary {
@apply bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-800;
}
.btn-secondary {
@apply bg-gray-700 text-gray-100 hover:bg-gray-600 active:bg-gray-500;
}
.btn-outline {
@apply border border-gray-600 text-gray-300 hover:bg-gray-800 active:bg-gray-700;
}
/* Input styles */
.input {
@apply w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-gray-100 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200;
}
/* Loading states */
.loading-spinner {
@apply animate-spin h-5 w-5 border-2 border-gray-600 border-t-primary-500 rounded-full;
}
/* Card styles */
.card {
@apply bg-gray-800 rounded-lg p-6 border border-gray-700;
}
.card-header {
@apply mb-4 pb-4 border-b border-gray-700;
}
.card-title {
@apply text-lg font-semibold text-gray-100;
}
.card-content {
@apply text-gray-300;
}
