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

/* Global styles for prose content */
p {
  @apply text-gray-800 leading-relaxed;
}

.prose p {
  @apply text-gray-800 leading-relaxed;
}

.prose li {
  @apply text-gray-800 font-medium;
}

/* Style for inline code, but not code blocks */
.prose code:not(pre code) {
  @apply bg-gray-100 text-nix-dark px-1.5 py-0.5 rounded font-medium;
}

/* Ensure syntax highlighting in code blocks is not affected by global styles */
.prose pre {
  @apply p-0 m-0 overflow-hidden rounded-lg;
}

.prose pre code {
  @apply bg-transparent p-0 text-inherit;
}

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 240, 240, 245;
  --background-end-rgb: 255, 255, 255;
}

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

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb));
}

@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-nix-primary text-white rounded-md hover:bg-nix-dark transition-colors font-medium shadow-sm;
  }
  
  .btn-secondary {
    @apply px-4 py-2 border border-nix-primary text-nix-primary rounded-md hover:bg-nix-light transition-colors font-medium shadow-sm;
  }

  .container-custom {
    @apply container mx-auto px-4 md:px-6 lg:px-8 max-w-7xl;
  }
}