:root {
  --tl-type-nav: 1.25rem;
  --tl-type-title-1: clamp(2.5rem, 4vw, 4.25rem);
  --tl-type-title-2: clamp(2rem, 3.2vw, 3.25rem);
  --tl-type-title-3: clamp(1.375rem, 2vw, 1.875rem);
  --tl-type-title-4: clamp(1rem, 1.45vw, 1.25rem);
  --tl-type-body: clamp(1.125rem, 1.6vw, 1.5rem);
  --tl-type-card-copy: clamp(1.125rem, 1.5vw, 1.5rem);
  --tl-type-card-list: clamp(1rem, 1.25vw, 1.25rem);
  --tl-type-footnote: clamp(1.0625rem, 1.5vw, 1.375rem);
  --tl-type-panel-compact-body: clamp(0.87rem, 1.3vw, 1.07rem);
  --tl-type-pill: clamp(1.0625rem, 1.3vw, 1.3125rem);
  --tl-type-button: 1.0625rem;
  --tl-type-button-compact: 0.875rem;
  --tl-type-footer: 1.125rem;
  --tl-type-footer-compact: 0.875rem;
  --tl-type-social-mini: 0.64rem;
  --tl-type-social-mark: 1.25rem;
  --tl-type-social-mark-alt: 1.5rem;
  --tl-type-form-label: 1.25rem;
  --tl-type-form-field: 1.125rem;
  --tl-type-form-status: 0.875rem;
  --tl-type-form-note: 0.75rem;
  --tl-type-form-compact-label: 0.6rem;
  --tl-type-form-compact-field: 0.75rem;
  --tl-type-form-compact-status: 0.68rem;
}

.tl-type-nav {
  font-size: var(--tl-type-nav);
  line-height: 1.2;
}

.tl-type-title-1 {
  font-size: var(--tl-type-title-1);
  line-height: 1.08;
}

.tl-type-title-2 {
  font-size: var(--tl-type-title-2);
  line-height: 1.12;
}

.tl-type-title-3 {
  font-size: var(--tl-type-title-3);
  line-height: 1.3;
}

.tl-type-title-4 {
  font-size: var(--tl-type-title-4);
  line-height: 1.25;
}

.tl-type-body {
  font-size: var(--tl-type-body);
  line-height: 1.55;
}

.tl-type-card-copy {
  font-size: var(--tl-type-card-copy);
  line-height: 1.55;
}

.tl-type-card-list {
  font-size: var(--tl-type-card-list);
  line-height: 1.55;
}

.tl-type-footnote {
  font-size: var(--tl-type-footnote);
  line-height: 1.45;
}

.tl-type-panel-compact-body {
  font-size: var(--tl-type-panel-compact-body);
  line-height: 1.55;
}

.tl-type-pill {
  font-size: var(--tl-type-pill);
  line-height: 1.2;
}

.tl-type-button {
  font-size: var(--tl-type-button);
  line-height: 1.2;
}

.tl-type-button-compact {
  font-size: var(--tl-type-button-compact);
  line-height: 1.2;
}

.tl-type-footer {
  font-size: var(--tl-type-footer);
  line-height: 1.55;
}

.tl-type-footer-compact {
  font-size: var(--tl-type-footer-compact);
  line-height: 1.5;
}

.tl-type-social-mini {
  font-size: var(--tl-type-social-mini);
  line-height: 1;
}

.tl-type-social-mark {
  font-size: var(--tl-type-social-mark);
  line-height: 1;
}

.tl-type-social-mark-alt {
  font-size: var(--tl-type-social-mark-alt);
  line-height: 1;
}

.tl-type-form-label {
  font-size: var(--tl-type-form-label);
  line-height: 1.3;
}

.tl-type-form-field {
  font-size: var(--tl-type-form-field);
  line-height: 1.4;
}

.tl-type-form-status {
  font-size: var(--tl-type-form-status);
  line-height: 1.4;
}

.tl-type-form-note {
  font-size: var(--tl-type-form-note);
  line-height: 1.45;
}

.tl-type-form-compact-label {
  font-size: var(--tl-type-form-compact-label);
  line-height: 1.4;
}

.tl-type-form-compact-field {
  font-size: var(--tl-type-form-compact-field);
  line-height: 1.4;
}

.tl-type-form-compact-status {
  font-size: var(--tl-type-form-compact-status);
  line-height: 1.4;
}