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

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

:root {
  --brand-green: #18AF4A;
  --brand-green-light: #1EC75A;
}

@layer base {
  *, html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  html {
    scroll-behavior: smooth;
  }

  /* Custom scrollbar */
  ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: #D1D5DB;
    border-radius: 99px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #9CA3AF;
  }
}

@layer utilities {
  .focus-ring {
    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-green/40 focus-visible:ring-offset-2;
  }
}

/* KaTeX overrides */
.katex {
  font-size: 1em !important;
}

/* Markmap */
.markmap > svg {
  width: 100%;
  height: 100%;
}