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

@layer base {
  :root {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 4.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 4.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 217.2 91.2% 59.8%;
    --radius: 0.75rem;
  }
}

@layer base {
  * {
    @apply border-border selection:bg-primary/20 selection:text-primary-foreground;
  }
  body {
    @apply bg-background text-foreground antialiased min-h-screen flex flex-col font-sans;
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 32px 32px;
  }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: hsl(var(--background));
}
::-webkit-scrollbar-thumb {
  background: hsl(var(--muted));
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.5);
}

/* Language Color Helpers */
.lang-typescript { color: #3178c6; }
.lang-javascript { color: #f7df1e; }
.lang-python { color: #3572A5; }
.lang-go { color: #00ADD8; }
.lang-rust { color: #dea584; }
.lang-java { color: #b07219; }
.lang-cpp, .lang-c\+\+ { color: #f34b7d; }
.lang-html { color: #e34c26; }
.lang-css { color: #563d7c; }

.lang-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
}