:root{
  --bpx-font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI", Roboto,
    "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol";
  --bpx-font-display: var(--bpx-font-ui);
  --bpx-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  --bpx-font-regular: 430;
  --bpx-font-medium: 540;
  --bpx-font-semibold: 610;
  --bpx-font-strong: 660;
}

html{
  font-family: var(--bpx-font-ui);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
  font-optical-sizing: auto;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

body{
  font-family: var(--bpx-font-ui);
  font-weight: var(--bpx-font-regular);
  font-variant-numeric: tabular-nums;
  font-synthesis-weight: none;
  font-synthesis-style: none;
}

:where(button, input, select, textarea){
  font: inherit;
  font-variant-numeric: inherit;
}

:where(
  h1, h2, h3, h4, h5, h6,
  .bpx-brand,
  .bpx-wordmark,
  .login-products-brand,
  .bpx-product-name,
  .login-product-name,
  .bpx-card-name,
  .header-bar .title,
  .page-title,
  .section-title,
  .card-title
){
  font-family: var(--bpx-font-display);
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-optical-sizing: auto;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

:where(
  .bpx-sub,
  .bpx-card-meta,
  .bpx-product-meta,
  .login-product-meta,
  .muted,
  .subtle
){
  letter-spacing: 0;
}

:where(
  .bpx-products-title,
  .bpx-products-menu-title,
  .login-products-menu-header,
  .eyebrow,
  .kicker
){
  font-weight: var(--bpx-font-medium);
  letter-spacing: 0.08em;
}

:where(.bpx-btn, .btn, .button, button[type=submit], .link-btn){
  font-weight: var(--bpx-font-semibold);
}