@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap");

:root {
  --font-sans: "Geist Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --type-display-2xl: 3.5rem; /* 56 */
  --type-display-xl: 3rem; /* 48 */
  --type-display-lg: 2.5rem; /* 40 */
  --type-h1: 2.25rem; /* 36 */
  --type-h2: 2rem; /* 32 */
  --type-h3: 1.75rem; /* 28 */
  --type-h4: 1.5rem; /* 24 */
  --type-subheading: 1.375rem; /* 22 */
  --type-body-lg: 1.125rem; /* 18 */
  --type-body-md: 1rem; /* 16 */
  --type-body-sm: 0.875rem; /* 14 */
  --type-caption: 0.75rem; /* 12 */

  --lh-display: 1.1;
  --lh-heading: 1.3;
  --lh-body: 1.55;
  --lh-caption: 1.4;
}

html {
  font-size: 16px;
}

body {
  font-family: var(--font-sans);
}

.app-header__title {
  font-size: var(--type-h1) !important;
  line-height: var(--lh-display);
}

.page-title {
  font-size: var(--type-h2) !important;
  line-height: var(--lh-display);
}

.section-title,
h2 {
  font-size: var(--type-h3);
  line-height: var(--lh-heading);
}

.section-subtitle,
.subtitle,
.hero-subtitle,
h3 {
  font-size: var(--type-subheading);
  line-height: var(--lh-heading);
}

p,
li,
label,
input,
textarea,
select,
button,
.app-copy,
.body-text {
  font-size: var(--type-body-md);
  line-height: var(--lh-body);
}

small,
.caption,
.helper-text,
.text-muted {
  font-size: var(--type-caption);
  line-height: var(--lh-caption);
}

code,
pre,
kbd,
samp,
.bubble code,
.markdown-body code {
  font-family: var(--font-mono) !important;
}

@media (max-width: 768px) {
  .app-header__title,
  .page-title {
    font-size: var(--type-h3) !important;
  }

  .section-title,
  h2 {
    font-size: var(--type-subheading);
  }
}