@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Domine:wght@400..700&display=swap");
@import "tailwindcss";
@plugin '@tailwindcss/typography';

@theme {
  --font-sans: "Inter", sans-serif;
  --font-serif: "Domine", serif;
}

@layer base {
  body {
    @apply bg-zinc-50 dark:bg-zinc-900 dark:text-zinc-50;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-sans font-semibold text-zinc-900 dark:text-zinc-100;
  }
  h1 {
    @apply font-serif text-3xl mb-4;
  }
  h2 {
    @apply font-serif text-2xl mb-2;
  }
  h3 {
    @apply text-xl mb-2;
  }
  a {
    @apply hover:underline text-orange-600 hover:text-orange-700 active:text-orange-800 active:dark:text-orange-200 hover:dark:text-orange-300 transition-colors;
  }
  .prose {
    a {
      @apply hover:underline text-orange-600 hover:text-orange-700 active:text-orange-800 active:dark:text-orange-200 hover:dark:text-orange-300 transition-colors;
    }
  }
}

@media (prefers-color-scheme: dark) {
  .astro-code,
  .astro-code span {
    color: var(--shiki-dark) !important;
    background-color: var(--shiki-dark-bg) !important;
    font-style: var(--shiki-dark-font-style) !important;
    font-weight: var(--shiki-dark-font-weight) !important;
    text-decoration: var(--shiki-dark-text-decoration) !important;
  }
}