html,
body {
  background: var(--color-bg-body);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--line-height-normal);
  touch-action: manipulation;
}

html {
  scroll-behavior: smooth;
}
/* ================= SCROLLBAR ================= */

html {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

html::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

html::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

html::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-full);
}

html::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* ================= BODY ================= */

body {
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;

  display: flex;
  flex-direction: column;
}

body.is-scroll-locked {
  overflow: hidden;
}

/* ================= SELECTION ================= */

::selection {
  background: var(--selection-bg);
  color: var(--color-text-primary);
}

/* ================= MAIN ================= */

.site-main {
  display: block;
  flex: 1;
}

.site-main--hero-layout {
  min-height: 100vh;
}