.bk-sr-only {
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.bk-skip-link {
  background: var(--bk-green);
  border-radius: var(--bk-radius-sm);
  color: var(--bk-white);
  font-weight: 700;
  left: var(--bk-space-4);
  padding: var(--bk-space-3) var(--bk-space-4);
  position: fixed;
  text-decoration: none;
  top: var(--bk-space-4);
  transform: translateY(-200%);
  transition: transform var(--bk-motion-fast) var(--bk-ease);
  z-index: 100000;
}

.bk-skip-link:focus {
  transform: translateY(0);
}

.bk-text-red {
  color: var(--bk-red);
}

.bk-bg-red { background: var(--bk-red); }
.bk-bg-red-dark { background: var(--bk-red-dark); }
.bk-bg-green { background: var(--bk-green); }
.bk-bg-green-dark { background: var(--bk-green-dark); }
.bk-bg-cream { background: var(--bk-cream); }
.bk-bg-surface { background: var(--bk-surface); }
.bk-bg-text { background: var(--bk-text); }
.bk-bg-border { background: var(--bk-border); }

.bk-radius-sm { border-radius: var(--bk-radius-sm); }
.bk-radius-md { border-radius: var(--bk-radius-md); }
.bk-radius-lg { border-radius: var(--bk-radius-lg); }
.bk-radius-xl { border-radius: var(--bk-radius-xl); }
.bk-radius-2xl { border-radius: var(--bk-radius-2xl); }
.bk-radius-pill { border-radius: var(--bk-radius-pill); }