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

@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-base-950 text-ink-100 font-body antialiased;
    background-image: theme("backgroundImage.grid-fade");
    background-attachment: fixed;
  }

  h1,
  h2,
  h3,
  h4 {
    @apply font-display text-ink-100;
  }

  ::selection {
    @apply bg-blue-600/40 text-ink-100;
  }

  :focus-visible {
    outline: 2px solid theme("colors.blue.400");
    outline-offset: 3px;
    border-radius: 2px;
  }

  ::-webkit-scrollbar {
    width: 10px;
  }
  ::-webkit-scrollbar-track {
    @apply bg-base-950;
  }
  ::-webkit-scrollbar-thumb {
    @apply bg-base-700 rounded-full;
  }
  ::-webkit-scrollbar-thumb:hover {
    @apply bg-blue-700;
  }
}

@layer utilities {
  .text-gradient-blue {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-blue-600;
  }
  .text-gradient-green {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-green-300 to-green-500;
  }
  .clip-corner {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
  }
}

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