:root {
  --bb-ink: var(--theme-palette-color-1);
  --bb-ink-hover: var(--theme-palette-color-2);
  --bb-ink-body: var(--theme-palette-color-3);
  --bb-line: var(--theme-palette-color-5);
  --bb-surface-alt: var(--theme-palette-color-6);
  --bb-surface: var(--theme-palette-color-8);
  --bb-on-ink: var(--theme-palette-color-8);
  --bb-ink-muted: var(--theme-palette-color-9);
  --bb-bone: var(--theme-palette-color-10);
  --bb-tan: var(--theme-palette-color-11);
  --bb-tan-text: var(--theme-palette-color-12);
  --bb-olive: var(--theme-palette-color-13);
  --bb-navy: var(--theme-palette-color-14);
  --bb-danger: var(--theme-palette-color-15);
  --bb-field-border: var(--theme-palette-color-16);
  --bb-olive-soft: var(--theme-palette-color-17);
  --bb-danger-soft: var(--theme-palette-color-18);
  --bb-ink-inverse: var(--theme-palette-color-10);
  --bb-ink-inverse-muted: var(--theme-palette-color-19);
  --bb-line-inverse: var(--theme-palette-color-20);
  --bb-scrim: rgba(27, 27, 25, 0.45);
  --bb-font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --bb-font-sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  --bb-space-1: 4px;
  --bb-space-2: 8px;
  --bb-space-3: 12px;
  --bb-space-4: 16px;
  --bb-space-5: 24px;
  --bb-space-6: 32px;
  --bb-space-7: 48px;
  --bb-space-8: 64px;
  --bb-space-9: 96px;
  --bb-target: 44px;
  --bb-button-height: 52px;
  --bb-field-height: 48px;
  --bb-swatch: 32px;
  --bb-container: 1312px;
  --bb-container-narrow: 680px;
  --bb-shadow-sticky: 0 -1px 0 var(--bb-line), 0 -8px 24px rgba(27, 27, 25, 0.06);
  --bb-shadow-drawer: -12px 0 40px rgba(27, 27, 25, 0.14);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--bb-ink);
  outline-offset: 2px;
}

.bb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--bb-space-3);
  font: 500 12px/1.4 var(--bb-font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bb-tan-text);
}

.bb-eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--bb-tan);
}

.bb-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
