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

@layer base {
  * {
    @apply box-border font-body font-medium scroll-smooth scroll-m-8;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-headers font-black;
  }

  a {
    @apply transition-colors underline-offset-2 decoration-dotted underline decoration-dark hover:text-dark;
  }

  *::selection {
    @apply bg-dark text-light;
  }

  /* SCROLLBARS STYLING */

  * {
    @apply [scrollbar-color:theme(colors.dark)_transparent] [scrollbar-width:thin];
  }

  *::-webkit-scrollbar {
    @apply w-3 mobile:w-0;
  }

  *::-webkit-scrollbar-track {
    @apply bg-light;
  }

  *::-webkit-scrollbar-thumb {
    @apply bg-dark rounded-full border-[3px] border-solid border-light;
  }

  /* CHANGE PROSE DEFAULTS */

  .prose,
  .prose p,
  .prose h1,
  .prose h2,
  .prose h3,
  .prose h4,
  .prose h5,
  .prose h6,
  .prose a,
  .prose strong {
    @apply text-black;
  }

  .prose a {
    @apply transition-colors underline-offset-2 decoration-dotted underline decoration-dark hover:text-dark;
  }

  .prose footer {
    @apply border-t-[3px] border-dotted pt-6;
  }

  .prose footer > div {
    @apply my-2 px-6 py-4 rounded-xl;
  }

  .prose footer > div:target {
    @apply bg-mid shadow-inner-sm shadow-shade;
  }

  .prose li::marker {
    @apply text-dark;
  }

  .prose blockquote {
    @apply border-l-dark;
  }

  /* INPUT */

  input {
    @apply rounded-full p-2 text-center bg-light outline outline-mid outline-2 outline-offset-[-2px] hover:outline-[transparent] text-dark hover:bg-mid transition-all;
  }

  input::placeholder {
    @apply text-dark opacity-60;
  }

  input:focus-visible {
    @apply outline-none bg-mid shadow-inner-sm;
  }
}

@layer components {
  .texture-paper-dots {
    @apply [background-image:var(--theme-texture-dots)] [background-blend-mode:var(--theme-texture-dots-blend)] bg-local bg-[length:10cm];
  }
}