/* Base resets and typography */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: var(--bf-font-size-base);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--bf-font-sans);
  font-weight: 500;
  line-height: var(--bf-line-height-base);
  color: var(--bf-neutral-900);
  background: var(--bf-neutral-100);
  zoom: var(--bf-platform-ui-scale);
}

html[data-platform-density='compact'] body {
  width: calc(100% / var(--bf-platform-ui-scale));
  min-height: calc(100vh / var(--bf-platform-ui-scale));
}

@supports not (zoom: 1) {
  html[data-platform-density='compact'] body {
    transform: scale(var(--bf-platform-ui-scale));
    transform-origin: top left;
  }
}

@media (min-width: 600px) {
  :root {
    --bf-gutter: var(--bf-gutter-md);
  }
}

@media (min-width: 840px) {
  :root {
    --bf-gutter: var(--bf-gutter-lg);
  }
}

a {
  color: var(--bf-primary);
  text-decoration: none;
}
a:hover {
  color: var(--bf-primary-soft);
  text-decoration: underline;
}

button,
input,
select,
textarea {
  font: inherit;
}

:focus-visible {
  outline: none;
  box-shadow: var(--bf-focus);
}

::selection {
  background: var(--bf-accent-teal);
  color: #fff;
}

.bf-container {
  width: min(var(--bf-rail-wide), 100%);
  margin: 0 auto;
  padding: 0 var(--bf-gutter);
}

.bf-section {
  margin: var(--bf-space-48) auto;
}

.bf-rail {
  width: min(var(--bf-rail), 100%);
  margin: 0 auto;
}

.bf-bleed {
  width: calc(100% + (var(--bf-gutter) * 2));
  margin-inline: calc(-1 * var(--bf-gutter));
}

.bf-edge {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.bf-stack {
  display: grid;
  gap: var(--bf-space-16);
}

.bf-grid-2 {
  display: grid;
  gap: var(--bf-space-24);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}