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

@layer base {
  * { border-color: theme('colors.hairline.dark'); }
  body { @apply bg-canvas-dark text-[#eaecef] antialiased; }
  ::selection { @apply bg-brand-yellow/20 text-brand-yellow; }
  ::-webkit-scrollbar { @apply w-1.5; }
  ::-webkit-scrollbar-track { @apply bg-canvas-dark; }
  ::-webkit-scrollbar-thumb { @apply bg-surface-elevated rounded-full; }
  ::-webkit-scrollbar-thumb:hover { @apply bg-muted; }
}

@layer utilities {
  .glow-yellow { box-shadow: 0 0 20px rgba(252,213,53,0.15), 0 0 60px rgba(252,213,53,0.05); }
  .glow-green { box-shadow: 0 0 12px rgba(14,203,129,0.25); }
  .grid-pattern {
    background-image: linear-gradient(rgba(43,49,57,0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(43,49,57,0.3) 1px, transparent 1px);
    background-size: 40px 40px;
  }
}