@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;600;700&display=swap');

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

@layer base {
  :root {
    color-scheme: dark;
  }

  html,
  body,
  #root {
    height: 100%;
  }

  body {
    @apply bg-ink-950 text-neutral-100 font-sans antialiased;
    font-feature-settings: 'cv11', 'ss01';
  }

  ::selection {
    @apply bg-brand-500/40 text-white;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

@layer utilities {
  .scrollbar-none::-webkit-scrollbar {
    display: none;
  }
  .bg-grid {
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 32px 32px;
    background-position: -1px -1px;
  }
}
