@tailwind base;

@layer base {
  h1, h2, h3, h4, h5, h6, blockquote {
    @apply text-balance;
  }

  *::marker {
    @apply hidden !important;
  }

  :root {
    color-scheme: dark;
  }

  ::placeholder {
    @apply text-black/5;
  }

  body, html {
    @mixin themed-background;

    font-family: var(--font-family);
    font-size: 13px;

    @apply text-k-text-primary font-light leading-6 overflow-hidden;
  }

  input, select, button, textarea, .btn {
    font-family: var(--font-family);

    @apply appearance-none border-0 outline-0 text-base font-light;

    &:required, &:invalid {
      @apply shadow-none;
    }

    &::-moz-focus-inner {
      @apply border-0 !important;
    }
  }

  a {
    @apply no-underline text-k-text-primary cursor-pointer hover:text-k-accent focus:text-k-accent;

    &:link, &:visited {
      @apply text-k-accent;
    }
  }

  :root {
    --fade-size: 3rem;
  }

  button, [role=button] {
    @apply touch-manipulation select-none cursor-pointer focus-visible:outline-1 focus-visible:outline-k-accent;
  }

  * {
    @apply focus-visible:ring-0 focus-visible:outline-1 focus-visible:outline-k-accent;
  }
}