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

:root {
  --foreground-rgb: 0, 0, 0;
  --background-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-rgb: 0, 0, 0;
  }
}

body {
  color: rgb(var(--foreground-rgb));
  background: rgb(var(--background-rgb));
  /* Removed test styles 
  border: 10px solid red !important; 
  background-color: yellow !important;
  */
}

/* Restore custom base and component layers */
@layer base {
  h1 {
    @apply text-4xl font-bold mb-6;
  }
  
  h2 {
    @apply text-3xl font-bold mb-4;
  }
  
  h3 {
    @apply text-2xl font-bold mb-3;
  }
  
  h4 {
    @apply text-xl font-semibold mb-2;
  }
  
  h5 {
    @apply text-lg font-semibold mb-2;
  }
  
  h6 {
    @apply text-base font-semibold mb-2;
  }
  
  p {
    @apply mb-4;
  }
  
  a {
    @apply text-blue-600 hover:text-blue-800 transition-colors;
  }
}

@layer components {
  .btn {
    @apply inline-block rounded-md font-medium transition-colors;
  }
  
  .btn-primary {
    @apply bg-blue-600 text-white hover:bg-blue-700 py-2 px-4;
  }
  
  .btn-secondary {
    @apply bg-gray-200 text-gray-800 hover:bg-gray-300 py-2 px-4;
  }
  
  .btn-outline {
    @apply border border-blue-600 text-blue-600 hover:bg-blue-50 py-2 px-4;
  }
  
  .container {
    @apply mx-auto px-4;
  }
  
  .section {
    @apply py-16;
  }
}
/* End restore */