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

@layer base {
  :root {
    --font-sans: var(--font-inter);
    --font-sans-fallback: "InterVariable", "Inter", -apple-system,
      BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
      "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

    --site-header-height: 60px;

    --search-panel-height: 68px;
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

  html {
    color-scheme: light;
    /* Enable panning and pinch zoom gestures, but disable additional non-standard gestures such as double-tap to zoom */
    touch-action: manipulation;
  }

  html,
  body {
    background-color: white;
    font-family: var(--font-sans), var(--font-sans-fallback);
    font-synthesis-weight: none;
    font-feature-settings:
      "liga" 1,
      "calt" 1;
    text-rendering: optimizeLegibility;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    user-select: text;
    overflow-x: clip;
  }
  body {
    overscroll-behavior-y: contain;
    margin: 0;
    font-size: 100%;
    min-height: 100%;
    min-width: 360px;
    max-width: 100vw;
  }

  a {
    transition-delay: 0s;
    transition-duration: 0.2s;
    transition-property: all;
    transition-timing-function: ease;
  }

  strong {
    font-weight: 600;
    color: theme("colors.neutral.900");
  }

  /* https://bugs.webkit.org/show_bug.cgi?id=243601
  https://nextjs.org/docs/pages/api-reference/components/image#known-browser-bugs 
  Safari 15 and 16 display a gray border while loading */
  @supports (font: -apple-system-body) and (-webkit-appearance: none) {
    img[loading="lazy"] {
      clip-path: inset(0.6px);
    }
  }
}
