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

/* Alpine.js x-cloak to prevent flash of unstyled content */
[x-cloak] {
  display: none !important;
}

/* Import monospace font for terminal feel */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* Custom utility classes for smooth transitions */
@layer utilities {
  .transition-smooth {
    transition: all 0.2s ease-in-out;
  }

  /* Subtle elevation effects */
  .elevation-1 {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  }

  .elevation-2 {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(122, 162, 247, 0.1);
  }

  /* Glassmorphism utility */
  .glass {
    background: rgba(26, 27, 38, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
  }

  /* Custom Scrollbar */
  .custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  .custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }
  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(65, 72, 104, 0.5);
    border-radius: 3px;
  }
  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(122, 162, 247, 0.5);
  }
}

/* Base styles for terminal aesthetic */
@layer base {
  code, pre, .font-mono {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
  }
  
  /* Global smooth scrolling */
  html {
    scroll-behavior: smooth;
  }
}