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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
  }
  
  * {
    @apply border-gray-700;
  }
  
  body {
    @apply bg-[#191A1A] text-gray-100;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
      sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  #root {
    @apply min-h-screen;
  }

  /* Custom Scrollbar - Theme Matching */
  * {
    scrollbar-width: thin;
    scrollbar-color: #2A2C2C #191A1A;
  }

  *::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }

  *::-webkit-scrollbar-track {
    background: #191A1A;
    border-radius: 6px;
  }

  *::-webkit-scrollbar-thumb {
    background: #2A2C2C;
    border-radius: 6px;
    border: 2px solid #191A1A;
    transition: background 0.2s ease;
  }

  *::-webkit-scrollbar-thumb:hover {
    background: #1FB8CD;
  }

  *::-webkit-scrollbar-thumb:active {
    background: #1AA5B8;
  }

  *::-webkit-scrollbar-corner {
    background: #191A1A;
  }

  /* Specific styling for code/terminal-like containers */
  .terminal-scroll::-webkit-scrollbar-track {
    background: #0A0A0A;
  }

  .terminal-scroll::-webkit-scrollbar-thumb {
    background: #1F2121;
    border: 2px solid #0A0A0A;
  }

  .terminal-scroll::-webkit-scrollbar-thumb:hover {
    background: #1FB8CD;
  }
}

@layer utilities {
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  /* Smooth fade-in and slide animation for trace spans */
  @keyframes fadeInSlide {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}