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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 234 20% 12%;
    --card: 0 0% 98%;
    --card-foreground: 234 20% 12%;
    --border: 234 15% 88%;
    --input: 234 15% 88%;
    --primary: 239 84% 67%;
    --primary-foreground: 0 0% 100%;
    --secondary: 234 15% 93%;
    --secondary-foreground: 234 20% 12%;
    --muted: 234 15% 93%;
    --muted-foreground: 233 10% 45%;
    --accent: 234 15% 93%;
    --accent-foreground: 234 20% 12%;
    --destructive: 0 62.8% 50%;
    --destructive-foreground: 0 0% 100%;
    --ring: 239 84% 67%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 235 30% 5%;
    --foreground: 226 100% 96%;
    --card: 234 25% 8%;
    --card-foreground: 226 100% 96%;
    --border: 234 20% 16%;
    --input: 234 20% 16%;
    --primary: 239 84% 67%;
    --primary-foreground: 226 100% 96%;
    --secondary: 234 20% 16%;
    --secondary-foreground: 226 100% 96%;
    --muted: 234 20% 16%;
    --muted-foreground: 233 15% 55%;
    --accent: 234 20% 16%;
    --accent-foreground: 226 100% 96%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 226 100% 96%;
    --ring: 255 60% 72%;
  }
}

* {
  border-color: hsl(var(--border));
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: ui-sans-serif, system-ui, sans-serif;
}

/* Thin scrollbar for log list */
.log-scroll::-webkit-scrollbar {
  width: 6px;
}
.log-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.log-scroll::-webkit-scrollbar-thumb {
  background: hsl(var(--border));
  border-radius: 3px;
}
.log-scroll::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground));
}
