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

@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #1f2937;
  }
}

@layer components {
  .code-block {
    @apply bg-gray-900 text-gray-100 p-6 rounded-lg font-mono text-sm leading-relaxed overflow-x-auto;
  }
  
  .code-line {
    @apply block;
  }
  
  .code-comment {
    @apply text-gray-400;
  }
  
  .code-keyword {
    @apply text-purple-400;
  }
  
  .code-string {
    @apply text-green-400;
  }
  
  .code-function {
    @apply text-blue-400;
  }
  
  .code-variable {
    @apply text-yellow-400;
  }
  
  .gradient-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }
  
  .react-logo {
    animation: spin 20s linear infinite;
  }
  
  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
}