@import './helpers';
@import './reset.css';
@import './fonts.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --font-system: -apple-system, blinkmacsystemfont, segoe ui, roboto, oxygen,
    ubuntu, cantarell, fira sans, droid sans, helvetica neue, sans-serif;
  --font-body: 'Inter', var(--font-system), sans-serif;
  --inspect-color: #f00;
}

html {
  line-height: 1.5;
  box-sizing: border-box;
  text-rendering: geometricprecision;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  // tweak if site is light mode.
  color-scheme: dark;
  background-color: black;
}

body {
  font-family: var(--font-body);
  transition: opacity #{$duration / 3 + 's'} ease-in;
}

html.hide-scroll,
html.hide-scroll body {
  -ms-overflow-style: none; /* for Internet Explorer, Edge */
  scrollbar-width: none; /* for Firefox */
  overflow-y: scroll;

  &::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
  }
}

html,
body,
#__next {
  /* stylelint-disable-next-line unit-no-unknown */
  min-height: 100svh;
  overscroll-behavior: none;
}

body.inspect * {
  outline: 1px solid var(--inspect-color) !important;
}

body:not(.user-is-tabbing) button:focus,
body:not(.user-is-tabbing) input:focus,
body:not(.user-is-tabbing) select:focus,
body:not(.user-is-tabbing) textarea:focus {
  outline: none;
}

// WARNING: if you don't want to use a fade in for the body, you can remove
// this chunk of CSS. But ALSO make sure you remove the style tag in the body in _document.tsx
// and the transition property on the body as well. thx.
html.fonts-loaded body {
  opacity: 1 !important;
}
// end warning
