:root {
  --font-body: "Karla", "Segoe UI", Arial, sans-serif;
  --font-heading: "Mukta", "Segoe UI", Arial, sans-serif;
  --type-hero: 3rem;
  --type-section: 2rem;
  --type-subheading: 1.375rem;
  --type-h4: 1.125rem;
  --type-card-title: 1.0625rem;
  --type-body: 1rem;
  --type-small: .875rem;
  --type-label: .8125rem;
  --type-button: .875rem;
}

html { font-size: 16px; }
body {
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
}
h1 { font-size: var(--type-hero); }
h2 { font-size: var(--type-section); }
h3 { font-size: var(--type-subheading); }
h4 { font-size: var(--type-h4); }
h5 { font-size: var(--type-card-title); }
h6 { font-size: 1rem; }
p, li, dd, dt { line-height: 1.6; }
.small, small { font-size: var(--type-small); }
label, .form-label, .form-floating > label { font-size: var(--type-label); }
input, select, textarea, .form-control, .form-select { font-size: var(--type-body); }
.btn, button { font-size: var(--type-button); font-weight: 700; }

@media (max-width: 767.98px) {
  :root {
    --type-hero: 1.875rem;
    --type-section: 1.5625rem;
    --type-subheading: 1.1875rem;
    --type-card-title: 1rem;
    --type-body: .9375rem;
    --type-small: .8125rem;
    --type-label: .75rem;
  }
}