/* Neutral typography contract. Load ../fonts/fonts.css before this file. */

:root {
  --font-sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Commit Mono", ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  --font-weight-body: 500;
  --font-weight-heading: 600;
  --font-weight-technical: 450;
  --font-weight-technical-emphasis: 600;
  --font-weight-technical-strong: 500;

  --type-display-xl-size: clamp(3.5rem, 2.25rem + 4vw, 6rem);
  --type-display-xl-line: 0.96;
  --type-display-xl-tracking: -0.04em;

  --type-display-lg-size: clamp(2.75rem, 1.875rem + 2.8vw, 4.5rem);
  --type-display-lg-line: 1;
  --type-display-lg-tracking: -0.035em;

  --type-heading-1-size: clamp(2.25rem, 1.875rem + 1.2vw, 3rem);
  --type-heading-1-line: 1.08;
  --type-heading-1-tracking: -0.03em;

  --type-heading-2-size: clamp(1.75rem, 1.5rem + 0.8vw, 2.25rem);
  --type-heading-2-line: 1.12;
  --type-heading-2-tracking: -0.02em;

  --type-heading-3-size: 1.5rem;
  --type-heading-3-line: 1.25;
  --type-heading-3-tracking: -0.01em;

  --type-body-lg-size: 1.25rem;
  --type-body-lg-line: 1.5;
  --type-body-size: 1rem;
  --type-body-line: 1.5;
  --type-body-sm-size: 0.875rem;
  --type-body-sm-line: 1.43;

  --type-ui-title-lg-size: 1.5rem;
  --type-ui-title-lg-line: 1.25;
  --type-ui-title-md-size: 1.125rem;
  --type-ui-title-md-line: 1.333;
  --type-ui-title-sm-size: 1rem;
  --type-ui-title-sm-line: 1.375;
  --type-ui-body-size: 0.875rem;
  --type-ui-body-line: 1.428;
  --type-ui-label-size: 0.8125rem;
  --type-ui-label-line: 1.384;
  --type-ui-metadata-size: 0.75rem;
  --type-ui-metadata-line: 1.333;

  --type-technical-size: 0.8125rem;
  --type-technical-line: 1.538;
  --type-technical-label-size: 0.75rem;
  --type-technical-label-line: 1.333;
  --type-metric-lg-size: 1.75rem;
  --type-metric-lg-line: 1.143;
}

.type-display-xl,
.type-display-lg,
.type-heading-1,
.type-heading-2,
.type-heading-3,
.type-body-lg,
.type-body,
.type-body-sm,
.type-ui-title-lg,
.type-ui-title-md,
.type-ui-title-sm,
.type-ui-body,
.type-ui-control,
.type-ui-label,
.type-ui-metadata {
  font-family: var(--font-sans);
  font-synthesis: none;
}

.type-display-xl {
  font-size: var(--type-display-xl-size);
  line-height: var(--type-display-xl-line);
  font-weight: var(--font-weight-heading);
  letter-spacing: var(--type-display-xl-tracking);
}

.type-display-lg {
  font-size: var(--type-display-lg-size);
  line-height: var(--type-display-lg-line);
  font-weight: var(--font-weight-heading);
  letter-spacing: var(--type-display-lg-tracking);
}

.type-heading-1 {
  font-size: var(--type-heading-1-size);
  line-height: var(--type-heading-1-line);
  font-weight: var(--font-weight-heading);
  letter-spacing: var(--type-heading-1-tracking);
}

.type-heading-2 {
  font-size: var(--type-heading-2-size);
  line-height: var(--type-heading-2-line);
  font-weight: var(--font-weight-heading);
  letter-spacing: var(--type-heading-2-tracking);
}

.type-heading-3 {
  font-size: var(--type-heading-3-size);
  line-height: var(--type-heading-3-line);
  font-weight: var(--font-weight-heading);
  letter-spacing: var(--type-heading-3-tracking);
}

.type-body-lg {
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-line);
  font-weight: var(--font-weight-body);
}

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

.type-body-sm {
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  font-weight: var(--font-weight-body);
}

.type-ui-title-lg {
  font-size: var(--type-ui-title-lg-size);
  line-height: var(--type-ui-title-lg-line);
  font-weight: var(--font-weight-heading);
  letter-spacing: var(--type-heading-3-tracking);
}

.type-ui-title-md {
  font-size: var(--type-ui-title-md-size);
  line-height: var(--type-ui-title-md-line);
  font-weight: var(--font-weight-heading);
}

.type-ui-title-sm {
  font-size: var(--type-ui-title-sm-size);
  line-height: var(--type-ui-title-sm-line);
  font-weight: var(--font-weight-heading);
}

.type-ui-body,
.type-ui-control {
  font-size: var(--type-ui-body-size);
  line-height: var(--type-ui-body-line);
}

.type-ui-body { font-weight: var(--font-weight-body); }
.type-ui-control { font-weight: var(--font-weight-heading); }

.type-ui-label {
  font-size: var(--type-ui-label-size);
  line-height: var(--type-ui-label-line);
  font-weight: var(--font-weight-heading);
}

.type-ui-metadata {
  font-size: var(--type-ui-metadata-size);
  line-height: var(--type-ui-metadata-line);
  font-weight: var(--font-weight-body);
}

.type-technical,
.type-technical-emphasis,
.type-technical-label,
.type-metric-lg {
  font-family: var(--font-mono);
  font-synthesis: none;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "liga" 0, "calt" 0;
}

.type-technical {
  font-size: var(--type-technical-size);
  line-height: var(--type-technical-line);
  font-weight: var(--font-weight-technical);
}

.type-technical-emphasis {
  font-size: var(--type-technical-size);
  line-height: var(--type-technical-line);
  font-weight: var(--font-weight-technical-emphasis);
}

.type-technical-label {
  font-size: var(--type-technical-label-size);
  line-height: var(--type-technical-label-line);
  font-weight: var(--font-weight-technical-emphasis);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.type-metric-lg {
  font-size: var(--type-metric-lg-size);
  line-height: var(--type-metric-lg-line);
  font-weight: var(--font-weight-technical-strong);
}