/* [project]/apps/agency-site/src/shared/styles/global.css [app-client] (css) */
:root {
  --layout-rail: 148px;
  --measure-statement: 21ch;
  --measure-headline: 17ch;
  --measure-lead: 46ch;
  --measure-prose: 66ch;
  --divider-fade-block: linear-gradient(to bottom,
    transparent,
    var(--color-surface-inverse) 20%,
    var(--color-surface-inverse) 80%,
    transparent);
  --layout-screen-min: 244px;
}

*, :before, :after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

:root.lenis {
  scroll-behavior: auto;
}

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

body {
  background: var(--color-surface-base);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

a {
  color: inherit;
}

img, svg {
  max-width: 100%;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-default) transparent;
}

::-webkit-scrollbar {
  width: var(--space-8);
  height: var(--space-8);
}

::-webkit-scrollbar-track {
  background: none;
}

::-webkit-scrollbar-thumb {
  background: var(--color-border-default);
  border-radius: var(--radius-full);
  border: var(--space-2) solid transparent;
  background-clip: padding-box;
}

@media (hover: hover) and (pointer: fine) {
  ::-webkit-scrollbar-thumb:hover {
    background: var(--color-border-strong);
    background-clip: padding-box;
  }
}