im-amrith/crisp

1@tailwind base;2@tailwind components;3@tailwind utilities;4 5/* Custom CSS Variables for Professional Design */6:root {7  /* Primary Colors - Professional Blue/Green Palette */8  --primary-50: #f0f9ff;9  --primary-100: #e0f2fe;10  --primary-200: #bae6fd;11  --primary-300: #7dd3fc;12  --primary-400: #38bdf8;13  --primary-500: #0ea5e9;14  --primary-600: #0284c7;15  --primary-700: #0369a1;16  --primary-800: #075985;17  --primary-900: #0c4a6e;18 19  /* Secondary Colors - Professional Green */20  --secondary-50: #f0fdf4;21  --secondary-100: #dcfce7;22  --secondary-200: #bbf7d0;23  --secondary-300: #86efac;24  --secondary-400: #4ade80;25  --secondary-500: #22c55e;26  --secondary-600: #16a34a;27  --secondary-700: #15803d;28  --secondary-800: #166534;29  --secondary-900: #14532d;30 31  /* Neutral Colors - Professional Grays */32  --neutral-50: #fafafa;33  --neutral-100: #f5f5f5;34  --neutral-200: #e5e5e5;35  --neutral-300: #d4d4d4;36  --neutral-400: #a3a3a3;37  --neutral-500: #737373;38  --neutral-600: #525252;39  --neutral-700: #404040;40  --neutral-800: #262626;41  --neutral-900: #171717;42 43  /* Accent Colors */44  --accent-warning: #f59e0b;45  --accent-error: #ef4444;46  --accent-success: #10b981;47  --accent-info: #3b82f6;48 49  /* Shadows */50  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);51  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);52  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);53  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);54  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);55 56  /* Glassmorphism */57  --glass-bg: rgba(255, 255, 255, 0.222);58  --glass-border: rgba(255, 255, 255, 0.334);59  --glass-backdrop: blur(16px);60}61 62/* Professional Component Styles */63@layer components {64  /* Professional Card Component */65  .professional-card {66    @apply bg-white/90 backdrop-blur-sm border border-white/20 rounded-2xl shadow-xl;67    background: linear-gradient(135deg, rgba(255, 255, 255, 0.377) 0%, rgba(255, 255, 255, 0.312) 100%);68    box-shadow: 69      0 8px 32px rgba(0, 0, 0, 0.1),70      0 1px 0 rgba(255, 255, 255, 0.5) inset,71      0 -1px 0 rgba(0, 0, 0, 0.05) inset;72  }73 74  /* Professional Button Styles */75  .btn-primary {76    @apply px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white font-semibold rounded-xl;77    @apply shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200;78    @apply focus:outline-none focus:ring-4 focus:ring-blue-500/30;79    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);80  }81 82  .btn-primary:hover {83    background: linear-gradient(135deg, #0284c7 0%, #075985 100%);84  }85 86  .btn-secondary {87    @apply px-6 py-3 bg-gradient-to-r from-green-600 to-green-700 text-white font-semibold rounded-xl;88    @apply shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200;89    @apply focus:outline-none focus:ring-4 focus:ring-green-500/30;90    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);91  }92 93  .btn-secondary:hover {94    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);95  }96 97  .btn-outline {98    @apply px-6 py-3 border-2 border-gray-300 text-gray-700 font-semibold rounded-xl;99    @apply hover:border-blue-500 hover:text-blue-600 hover:bg-blue-50;100    @apply transform hover:-translate-y-0.5 transition-all duration-200;101    @apply focus:outline-none focus:ring-4 focus:ring-blue-500/30;102  }103 104  /* Professional Input Styles */105  .input-professional {106    @apply w-full px-4 py-3 border-2 border-gray-200 rounded-xl text-gray-900;107    @apply focus:border-blue-500 focus:ring-4 focus:ring-blue-500/20 focus:outline-none;108    @apply transition-all duration-200 bg-white/80 backdrop-blur-sm;109    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);110  }111 112  .input-professional:focus {113    box-shadow: 114      0 4px 12px rgba(59, 130, 246, 0.15),115      0 0 0 4px rgba(59, 130, 246, 0.1);116  }117 118  /* Professional Select Styles */119  .select-professional {120    @apply w-full px-4 py-3 border-2 border-gray-200 rounded-xl text-gray-900;121    @apply focus:border-blue-500 focus:ring-4 focus:ring-blue-500/20 focus:outline-none;122    @apply transition-all duration-200 bg-white/80 backdrop-blur-sm appearance-none;123    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");124    background-position: right 12px center;125    background-repeat: no-repeat;126    background-size: 16px;127    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);128  }129 130  .select-professional:focus {131    box-shadow: 132      0 4px 12px rgba(59, 130, 246, 0.15),133      0 0 0 4px rgba(59, 130, 246, 0.1);134  }135 136  /* Professional Badge Styles */137  .badge-success {138    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium;139    @apply bg-green-100 text-green-800 border border-green-200;140  }141 142  .badge-warning {143    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium;144    @apply bg-yellow-100 text-yellow-800 border border-yellow-200;145  }146 147  .badge-info {148    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium;149    @apply bg-blue-100 text-blue-800 border border-blue-200;150  }151 152  /* Professional Gradient Backgrounds */153  .gradient-primary {154    background: linear-gradient(135deg, #0ea5e9 0%, #22c55e 100%);155  }156 157  .gradient-secondary {158    background: linear-gradient(135deg, #f0f9ff 0%, #f0fdf4 100%);159  }160 161  .gradient-dark {162    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);163  }164 165  /* Professional Animation Classes */166  .animate-fade-in {167    animation: fadeIn 0.5s ease-in-out;168  }169 170  .animate-slide-up {171    animation: slideUp 0.5s ease-out;172  }173 174  .animate-scale-in {175    animation: scaleIn 0.3s ease-out;176  }177 178  /* Professional Loading Spinner */179  .loading-spinner {180    @apply inline-block w-6 h-6 border-2 border-gray-300 border-t-blue-600 rounded-full;181    animation: spin 1s linear infinite;182  }183 184  /* Professional Chart Container */185  .chart-container {186    @apply professional-card p-6;187    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);188  }189 190  /* Professional Stats Card */191  .stats-card {192    @apply professional-card p-6 text-center;193    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);194    border: 1px solid rgba(59, 130, 246, 0.1);195  }196 197  .stats-card:hover {198    @apply transform -translate-y-1;199    box-shadow: 200      0 12px 40px rgba(0, 0, 0, 0.12),201      0 1px 0 rgba(255, 255, 255, 0.6) inset;202  }203 204  /* Professional Header Gradient */205  .header-gradient {206    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%);207    border-bottom: 1px solid rgba(59, 130, 246, 0.1);208    backdrop-filter: blur(8px);209  }210 211  /* Professional Section Divider */212  .section-divider {213    @apply w-full h-px bg-gradient-to-r from-transparent via-gray-300 to-transparent my-8;214  }215}216 217/* Keyframe Animations */218@keyframes fadeIn {219  from { opacity: 0; }220  to { opacity: 1; }221}222 223@keyframes slideUp {224  from { 225    opacity: 0; 226    transform: translateY(20px); 227  }228  to { 229    opacity: 1; 230    transform: translateY(0); 231  }232}233 234@keyframes scaleIn {235  from { 236    opacity: 0; 237    transform: scale(0.95); 238  }239  to { 240    opacity: 1; 241    transform: scale(1); 242  }243}244 245@keyframes spin {246  to { transform: rotate(360deg); }247}248 249/* Professional Scrollbar */250::-webkit-scrollbar {251  width: 8px;252}253 254::-webkit-scrollbar-track {255  background: #f1f5f9;256  border-radius: 4px;257}258 259::-webkit-scrollbar-thumb {260  background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);261  border-radius: 4px;262}263 264::-webkit-scrollbar-thumb:hover {265  background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);266}267 268/* Professional Focus Styles */269*:focus {270  outline: none;271}272 273/* Professional Typography */274.heading-primary {275  @apply text-3xl font-bold bg-gradient-to-r from-gray-900 to-gray-700 bg-clip-text text-transparent;276}277 278.heading-secondary {279  @apply text-xl font-semibold text-gray-800;280}281 282.text-muted {283  @apply text-gray-600;284}285 286.text-accent {287  @apply text-blue-600 font-medium;288}289 290/* Responsive Design Enhancements */291@media (max-width: 768px) {292  .professional-card {293    @apply rounded-xl;294  }295  296  .btn-primary,297  .btn-secondary,298  .btn-outline {299    @apply px-4 py-2 text-sm;300  }301}302