html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-main);
  background-image:
    linear-gradient(rgba(51, 51, 51, 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(51, 51, 51, 0.5) 1px, transparent 1px);
  background-size: 40px 40px;
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-main);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

::selection {
  background: var(--accent-dim);
  color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}