AbdullahMirajDev/Agent_Builder

1@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');2 3@tailwind base;4@tailwind components;5@tailwind utilities;6 7@layer base {8  html {9    -webkit-font-smoothing: antialiased;10    -moz-osx-font-smoothing: grayscale;11    text-rendering: optimizeLegibility;12  }13 14  body {15    @apply bg-slate-50 text-slate-900 font-sans;16  }17 18  ::selection {19    @apply bg-brand-200 text-brand-900;20  }21}22 23@layer components {24  .input-base {25    @apply w-full px-3.5 py-2.5 bg-white border border-slate-200 rounded-lg text-sm26           placeholder:text-slate-400 transition-all duration-15027           focus:outline-none focus:ring-2 focus:ring-brand-500/20 focus:border-brand-50028           disabled:bg-slate-50 disabled:text-slate-400 disabled:cursor-not-allowed;29  }30 31  .btn-primary {32    @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-semibold33           text-white bg-brand-600 rounded-lg shadow-sm34           hover:bg-brand-700 active:bg-brand-80035           focus:outline-none focus:ring-2 focus:ring-brand-500/40 focus:ring-offset-236           disabled:opacity-50 disabled:cursor-not-allowed37           transition-all duration-150;38  }39 40  .btn-secondary {41    @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-medium42           text-slate-700 bg-white border border-slate-200 rounded-lg shadow-sm43           hover:bg-slate-50 hover:border-slate-300 active:bg-slate-10044           focus:outline-none focus:ring-2 focus:ring-slate-500/20 focus:ring-offset-245           disabled:opacity-50 disabled:cursor-not-allowed46           transition-all duration-150;47  }48 49  .btn-ghost {50    @apply inline-flex items-center justify-center gap-1.5 px-3 py-2 text-sm font-medium51           text-slate-600 rounded-lg52           hover:bg-slate-100 hover:text-slate-900 active:bg-slate-20053           focus:outline-none54           disabled:opacity-50 disabled:cursor-not-allowed55           transition-all duration-150;56  }57 58  .btn-danger {59    @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-medium60           text-red-700 bg-red-50 border border-red-200 rounded-lg61           hover:bg-red-100 hover:border-red-300 active:bg-red-20062           focus:outline-none focus:ring-2 focus:ring-red-500/2063           transition-all duration-150;64  }65 66  .card {67    @apply bg-white rounded-xl border border-slate-200/80 shadow-card;68  }69 70  .card-hover {71    @apply card hover:shadow-card-hover hover:border-slate-300/80 transition-all duration-200;72  }73}74 75@keyframes slideIn {76  from { opacity: 0; transform: translateY(8px); }77  to { opacity: 1; transform: translateY(0); }78}79 80@keyframes fadeIn {81  from { opacity: 0; }82  to { opacity: 1; }83}84 85@keyframes shimmer {86  from { background-position: 200% 0; }87  to { background-position: -200% 0; }88}89 90.animate-slideIn {91  animation: slideIn 0.2s ease-out;92}93 94.animate-fadeIn {95  animation: fadeIn 0.15s ease-out;96}97 98.scrollbar-thin {99  scrollbar-width: thin;100  scrollbar-color: #cbd5e1 transparent;101}102 103.scrollbar-thin::-webkit-scrollbar {104  width: 6px;105}106 107.scrollbar-thin::-webkit-scrollbar-track {108  background: transparent;109}110 111.scrollbar-thin::-webkit-scrollbar-thumb {112  background: #cbd5e1;113  border-radius: 3px;114}115