:root {
  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: "Charter", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --text-body-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  --text-meta-size: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --text-title-size: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem);
  --text-display-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);
  --text-code-size: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --leading-body: 1.65;
  --leading-meta: 1.45;
  --leading-tight: 1.15;
  --leading-code: 1.45;
}

html {
  font-size: 100%;
}

body,
button,
input,
textarea,
select {
  font-family: var(--font-ui);
  font-size: var(--text-body-size);
  line-height: var(--leading-body);
  text-rendering: optimizeLegibility;
}

button,
input,
textarea,
select {
  font: inherit;
}

.t-body {
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--leading-body);
}

.t-meta {
  font-family: var(--font-ui);
  font-size: var(--text-meta-size);
  line-height: var(--leading-meta);
}

.t-title {
  font-family: var(--font-ui);
  font-size: var(--text-title-size);
  line-height: var(--leading-tight);
  font-weight: 650;
  letter-spacing: -0.01em;
}

.t-display {
  font-family: var(--font-ui);
  font-size: var(--text-display-size);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.t-code {
  font-family: var(--font-mono);
  font-size: var(--text-code-size);
  line-height: var(--leading-code);
}

.t-tabular {
  font-variant-numeric: tabular-nums;
}

.t-strong {
  font-weight: 650;
}

.t-reading {
  text-align: left;
}