@import "tailwindcss";

@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;
  }
  .effect-outset {
    @apply shadow-inner;
    @apply [box-shadow:inset_0_1px_0_0_rgba(255,255,255,0.15),inset_0_-1px_0_0_rgba(0,0,0,0.3)];
  }
  .effect-inset {
    @apply shadow-inner;
    @apply [box-shadow:inset_0_1px_2px_0_rgba(0,0,0,0.3),inset_0_-1px_1px_0_rgba(255,255,255,0.15)];
  }
}