@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --radius: 0.5rem;
    --background: #fafafa;
    --foreground: #0f172a;
    --card: #ffffff;
    --card-foreground: #0f172a;
    --primary: #1e293b;
    --primary-foreground: #f8fafc;
    --secondary: #f1f5f9;
    --secondary-foreground: #1e293b;
    --muted: #f1f5f9;
    --muted-foreground: #64748b;
    --accent: #f1f5f9;
    --accent-foreground: #1e293b;
    --destructive: #ef4444;
    --border: #e2e8f0;
    --input: #e2e8f0;
    --ring: #94a3b8;
    --chart-1: #2563eb;
    --chart-2: #06b6d4;
    --chart-3: #334155;
    --chart-4: #f59e0b;
    --chart-5: #f97316;
    --sidebar: #1e293b;
    --sidebar-foreground: #f8fafc;
    --sidebar-primary: #2563eb;
    --sidebar-primary-foreground: #f8fafc;
    --sidebar-accent: #334155;
    --sidebar-accent-foreground: #f8fafc;
    --sidebar-border: rgba(255, 255, 255, 0.1);
}

@layer base {
    * {
        @apply border-slate-200;
    }
    body {
        @apply bg-slate-50 text-slate-900 antialiased;
    }
}

@layer components {
    .animate-in {
        animation: animateIn 0.5s ease-out forwards;
    }

    .fade-in {
        opacity: 0;
    }

    .slide-in-from-bottom-4 {
        transform: translateY(1rem);
    }

    .slide-in-from-right {
        transform: translateX(100%);
    }
}

@keyframes animateIn {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}