@import "tailwindcss";

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

/* Set default background and text colors and font family */
@layer base {
  html, body {
    @apply bg-neutral-800;
    @apply text-neutral-200;
    @apply font-sans;
  }

  /* Apply the custom fonts to headings for better visibility */
  h1, h2, h3, h4, h5, h6 {
    @apply font-sans;
    @apply font-medium;
  }
}

@layer utilities {
  .border-inset {
    @apply border-1;
    @apply border-b-neutral-400/30;
    @apply border-r-neutral-400/30;
    @apply border-t-neutral-950/60;
    @apply border-l-neutral-950/60;
    @apply rounded-md;
    @apply shadow-md;
  }
  .border-outset {
    @apply border-1;
    @apply border-t-neutral-300/30;
    @apply border-l-neutral-300/30;
    @apply border-b-neutral-950/60;
    @apply border-r-neutral-950/60;
    @apply rounded-md;
    @apply shadow-md;
  }
}