:root {
  --ink: var(--pu-color-ink);
  --ink-soft: var(--pu-color-muted);
  --muted: var(--pu-color-muted);
  --line: var(--pu-color-line);
  --panel: var(--pu-color-soft);
  --soft: var(--pu-color-soft);
  --paper: var(--pu-color-paper);
  --white: var(--pu-color-paper);
  --lime: var(--pu-color-lime);
  --lime-strong: var(--pu-color-lime-strong);
  --lime-dark: var(--pu-color-lime-strong);
  --green: var(--pu-color-green);
  --radius: var(--pu-radius-feature);
}

html {
  color-scheme: light;
  font-family: var(--pu-font-sans);
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
button,
input,
select,
textarea {
  font-family: var(--pu-font-sans);
}

body {
  font-size: var(--pu-type-body);
  line-height: var(--pu-leading-body);
}

:where(.hero h1, .hero-copy h1, .bf-hero h1, .bf-hero__title) {
  font-size: var(--pu-type-display);
  line-height: var(--pu-leading-display);
  letter-spacing: var(--pu-tracking-display);
}

:where(.section-heading h2, .section-title, .bf-section-title) {
  font-size: var(--pu-type-heading);
  line-height: var(--pu-leading-heading);
  letter-spacing: var(--pu-tracking-heading);
}

:where(.button, .seo-global-action, .bf-button, .action) {
  border-radius: var(--pu-radius-control);
}

:where(.button--lime, .bf-button--lime, .seo-global-action--download) {
  border-color: var(--pu-color-lime-strong);
  background: var(--pu-color-lime);
  color: var(--pu-color-ink);
}

:where(.button--lime, .bf-button--lime, .seo-global-action--download):hover {
  background: color-mix(in srgb, var(--pu-color-lime) 88%, white);
}

:where(.pill--lime, .bf-kicker, .section-kicker) {
  color: var(--pu-color-green);
}

:where(.pill--lime, .bf-kicker) {
  background: var(--pu-color-lime);
}

:where(.card, .challenge-card, .record-card, .team-card, .bf-card, .bf-panel) {
  border-radius: var(--pu-radius-card);
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--pu-color-lime-strong) 62%, transparent);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  :where(.hero h1, .hero-copy h1, .bf-hero h1, .bf-hero__title) {
    font-size: var(--pu-type-display);
  }
}