@tailwind base; /* Preflight is injected here */
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    /* text-lg == prose-lg */
    /* text-xl == prose-xl */
    @apply md:text-lg lg:text-xl font-texts text-rp-dawn-text dark:text-rp-moon-iris;
  }
  text {
    @apply text-rp-dawn-text dark:text-rp-moon-iris;
  }
  a {
    @apply underline decoration-2 underline-offset-4 decoration-rp-dawn-gold dark:decoration-rp-moon-pine;
  }
  a:hover {
    @apply underline decoration-2 underline-offset-4 decoration-rp-dawn-foam dark:decoration-rp-moon-rose;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-headings text-rp-dawn-text dark:text-rp-moon-love;
  }
  h1 {
    @apply text-5xl md:text-7xl mb-9;
  }
  h2 {
    @apply text-4xl md:text-5xl mb-9;
  }
  h3 {
    @apply text-3xl md:text-4xl;
  }
  h4 {
    @apply md:text-3xl;
  }
  h5 {
    @apply text-2xl;
  }
  h6 {
    @apply text-xl;
  }
  img {
    @apply drop-shadow-lg;
  }
  dd {
    @apply ml-12 md:ml-24;
  }
}

@layer components {
  /*This does not seem to affect prismjs which is good*/
  code {
    @apply bg-rp-dawn-highlight-low dark:bg-rp-moon-highlight-low;
  }
}