:root {
  --font-sans: Helvetica, Arial, sans-serif;
  --ch-font-sans: Helvetica, Arial, sans-serif;
  --ch-mono: Helvetica, Arial, sans-serif;
  --ch-heading-font: "Hanken Grotesk", Helvetica, Arial, sans-serif;
  --ch-field-font-family: Helvetica, Arial, sans-serif;
  --ch-field-line-height: 18px;
  --ch-body-font-size: 14px;
  --ch-button-font-size: 14px;
  --ch-subtitle-font-size: 14px;
}

body,
body *:not(.bi):not([class^="bi-"]):not([class*=" bi-"]) {
  font-family: Helvetica, Arial, sans-serif !important;
}

body.app-page {
  font-size: var(--ch-body-font-size);
}

/* Compact navigation labels stay smaller than interface and record text. */
.mobile-bottom-nav .mobile-bottom-link > span {
  font-size: 12px !important;
}

/* Record names use the same size as the surrounding body copy. */
.feed-card-name,
.calendar-chip-name {
  font-size: var(--ch-body-font-size) !important;
}

:is(
  input:not([type]),
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  textarea
) {
  font-family: var(--ch-field-font-family) !important;
  line-height: var(--ch-field-line-height) !important;
}

:is(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  [role="button"],
  a.btn,
  a.button,
  a[class*="-button"],
  a.marketing-mobile-try,
  a.tools-signup
) {
  font-size: var(--ch-button-font-size) !important;
}

:is(
  .ch-subtitle,
  [class$="-subtitle"],
  [class*="-subtitle "],
  [data-reference-detail-subtitle],
  [data-platform-detail-description],
  [class$="-heading"] :is(h1, h2, h3, h4, h5, h6) + p,
  [class*="-heading "] :is(h1, h2, h3, h4, h5, h6) + p,
  [class$="-header"] :is(h1, h2, h3, h4, h5, h6) + p,
  [class*="-header "] :is(h1, h2, h3, h4, h5, h6) + p
) {
  font-size: var(--ch-subtitle-font-size) !important;
  font-weight: 400 !important;
  line-height: 1.45;
}

:is(h1, h2, h3, h4, h5, h6, .modal-title),
:is(h1, h2, h3, h4, h5, h6, .modal-title) *:not(.bi):not([class^="bi-"]):not([class*=" bi-"]) {
  font-family: "Hanken Grotesk", Helvetica, Arial, sans-serif !important;
}

/* Authentication surfaces use the same typeface as the primary workspace headings. */
body.auth-hero-page,
body.auth-hero-page *:not(.bi):not([class^="bi-"]):not([class*=" bi-"]),
.android-login,
.android-login *:not(.bi):not([class^="bi-"]):not([class*=" bi-"]) {
  font-family: "Hanken Grotesk", Helvetica, Arial, sans-serif !important;
}

.platform-select,
.platform-select .platform-select-toggle,
.platform-select-menu,
.platform-select-menu .platform-select-option {
  font-family: Helvetica, Arial, sans-serif !important;
}

body.auth-hero-page .platform-select .platform-select-toggle.platform-select-toggle,
body.auth-hero-page .platform-select .platform-select-toggle.platform-select-toggle *,
body.auth-hero-page .platform-select-menu .platform-select-option.platform-select-option,
body.auth-hero-page .platform-select-menu .platform-select-option.platform-select-option * {
  font-family: Helvetica, Arial, sans-serif !important;
}

.account-setup-fields .platform-select .platform-select-value {
  font-weight: 400 !important;
}

body.auth-hero-page .account-setup-card.account-setup-card .signup-compact-heading.signup-compact-heading p {
  font-family: Helvetica, Arial, sans-serif !important;
  font-size: var(--ch-subtitle-font-size) !important;
  font-weight: 400 !important;
}

.signup-page .signup-fields.signup-fields input:not([type="hidden"]):not([type="submit"]),
.signup-page .signup-fields.signup-fields textarea {
  font-family: Helvetica, Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

@media (hover: none), (pointer: coarse) {
  .signup-page .signup-fields.signup-fields input:not([type="hidden"]):not([type="submit"]),
  .signup-page .signup-fields.signup-fields textarea {
    font-size: 16px !important;
  }
}

/* Uppercase eyebrow and metric labels form a lighter, quieter level of hierarchy. */
:is(
  .kpi-card small,
  .team-summary-grid small,
  .page-kicker,
  .settings-eyebrow,
  .modal-eyebrow,
  .auth-form-eyebrow,
  .marketing-eyebrow,
  .platform-eyebrow,
  .platform-kicker,
  .platform-panel header span,
  .platform-trend-card header span,
  .rail-title,
  .team-section-heading > span,
  .billing-current-plan > header,
  .billing-plan-card header span,
  .pricing-card-top > div:first-child > span,
  .signup-plan-top small,
  .onboarding-card > header small,
  .sketch-metrics small,
  .mobile-metric-grid small,
  .mobile-sketch-page-head small,
  .sketch-page-header > div > small
) {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 300 !important;
}
