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

@layer base {
  @font-face {
    font-family: 'Inter-Medium';
    src: url('/fonts/InterDisplay-Medium.otf') format('opentype'),
         url('/fonts/InterDisplay-Medium.woff2') format('woff2');
    font-display: swap;
  }
  @font-face {
    font-family: 'Inter-Regular';
    src: url('/fonts/InterDisplay-Regular.otf') format('opentype'),
         url('/fonts/InterDisplay-Regular.woff2') format('woff2');
    font-display: swap;
  }

  @font-face {
    font-family: 'Inter-Light';
    src: url('/fonts/SF-Pro-Display-Light.otf') format('opentype'),
         url('/fonts/SF-Pro-Display-Light.woff2') format('woff2');
    font-display: swap;
  }
}

:root {
  --color-black: #202020;
  --color-white: #ffffff;
  --color-light-gray: #ebebeb;
  --color-gray: #a5a5a5;
  --color-dark-gray: #6e6e6e;
  --color-text-dark: #000000;
  --color-text-light: #ffffff;
  --color-accent: #b6ee69;
  --color-footer-links: #8b8b8b;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

html {
  scroll-behavior: smooth;
}

.font-inter-medium{
  font-family: "Inter-Medium", sans-serif;
}

.font-inter-regular{
  font-family: "Inter-Regular", sans-serif;
}

.font-inter-light{
  font-family: "Inter-Light", sans-serif;
}

body {  
  letter-spacing: -0.3px;
  scroll-behavior: smooth;
  margin: 0;
  background-color: var(--color-white);
  color: var(--color-text-dark);
}