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

/* CSS Custom Properties - Light Mode */
:root {
  --background: 0 0% 98%;
  --foreground: 0 0% 13%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 13%;
  --border: 0 0% 90%;
  --input: 0 0% 90%;
  --ring: 220 65% 50%;
  --primary: 220 65% 50%;
  --primary-foreground: 0 0% 100%;
  --primary-light: 220 65% 95%;
  --secondary: 220 60% 65%;
  --secondary-foreground: 0 0% 100%;
  --accent: 220 40% 95%;
  --accent-foreground: 0 0% 13%;
  --destructive: 8 75% 55%;
  --destructive-foreground: 0 0% 100%;
  --muted: 0 0% 96%;
  --muted-foreground: 0 0% 45%;
  --sidebar-background: 0 0% 97%;
  --sidebar-foreground: 0 0% 13%;
  --hover: 0 0% 93%;
  --success: 142 71% 45%;
  --success-light: 142 76% 90%;
  --warning: 38 92% 50%;
  --warning-light: 48 96% 89%;
  --info: 210 80% 55%;
  --info-light: 210 80% 92%;
  --indigo: 239 65% 60%;
  --indigo-light: 239 65% 92%;
  --orange: 25 90% 55%;
  --orange-light: 25 90% 92%;
}

/* Dark Mode */
[data-theme="dark"] {
  --background: 220 13% 10%;
  --foreground: 0 0% 90%;
  --card: 220 13% 14%;
  --card-foreground: 0 0% 90%;
  --border: 220 13% 20%;
  --input: 220 13% 20%;
  --ring: 220 65% 55%;
  --primary: 220 65% 55%;
  --primary-foreground: 0 0% 100%;
  --primary-light: 220 50% 25%;
  --secondary: 220 60% 60%;
  --secondary-foreground: 0 0% 100%;
  --accent: 220 30% 20%;
  --accent-foreground: 0 0% 90%;
  --destructive: 8 70% 50%;
  --destructive-foreground: 0 0% 100%;
  --muted: 220 13% 18%;
  --muted-foreground: 0 0% 55%;
  --sidebar-background: 220 13% 12%;
  --sidebar-foreground: 0 0% 90%;
  --hover: 220 13% 22%;
  --success: 142 71% 40%;
  --success-light: 142 50% 20%;
  --warning: 38 85% 45%;
  --warning-light: 40 50% 20%;
  --info: 210 75% 50%;
  --info-light: 210 50% 20%;
  --indigo: 239 60% 55%;
  --indigo-light: 239 40% 20%;
  --orange: 25 85% 50%;
  --orange-light: 25 50% 20%;
}

/* Base styles */
@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
  }
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--border));
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground));
}

/* Animations */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}