:root {
  --font-family: "Roboto", BlinkMacSystemFont, -apple-system, "Segoe UI", Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --font-monospace:
    "JetBrains Mono", "Fira Code", SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  /* Display */
  --typography-display-large: 700 normal
    clamp(36px, calc(1.6534rem + 2.5455vw), 57px) / 1.2 var(--font-family);
  --typography-display-medium: 700 normal
    clamp(28px, calc(1.2671rem + 2.0606vw), 45px) / 1.2 var(--font-family);
  --typography-display-small: 700 normal
    clamp(24px, calc(1.1591rem + 1.4545vw), 36px) / 1.2 var(--font-family);

  /* Headline */
  --typography-headline-large: 600 normal
    clamp(24px, calc(1.2727rem + 0.9697vw), 32px) / 1.3 var(--font-family);
  --typography-headline-medium: 600 normal
    clamp(21px, calc(1.0852rem + 0.9697vw), 29px) / 1.3 var(--font-family);
  --typography-headline-small: 600 normal
    clamp(20px, calc(1.0795rem + 0.7273vw), 26px) / 1.3 var(--font-family);

  /* Title */
  --typography-title-large: 500 normal
    clamp(18px, calc(0.983rem + 0.6061vw), 23px) / 1.4 var(--font-family);
  --typography-title-medium: 500 normal
    clamp(16px, calc(0.8864rem + 0.4848vw), 20px) / 1.4 var(--font-family);
  --typography-title-small: 500 normal
    clamp(14px, calc(0.7614rem + 0.4848vw), 18px) / 1.4 var(--font-family);

  /* Label */
  --typography-label-large: 500 normal
    clamp(13px, calc(0.7841rem + 0.1212vw), 14px) / 1.5 var(--font-family);
  --typography-label-medium: 500 normal
    clamp(12px, calc(0.7216rem + 0.1212vw), 13px) / 1.5 var(--font-family);
  --typography-label-small: 500 normal
    clamp(10px, calc(0.5966rem + 0.1212vw), 11px) / 1.5 var(--font-family);

  /* Body */
  --typography-body-large: 400 normal
    clamp(15px, calc(0.8523rem + 0.3636vw), 18px) / 1.7 var(--font-family);
  --typography-body-medium: 400 normal
    clamp(14px, calc(0.8182rem + 0.2424vw), 16px) / 1.5 var(--font-family);
  --typography-body-small: 400 normal
    clamp(12px, calc(0.6932rem + 0.2424vw), 14px) / 1.5 var(--font-family);

  /* Code */
  --typography-code: 400 normal
    clamp(13px, calc(0.7273rem + 0.3636vw), 16px) / 1.7 var(--font-monospace);

  --code-background: var(--color-surface);
  --p-margin--y: var(--spacing-md);
}

html {
  font-size: 16px;
}

body {
  font: var(--typography-body-medium);
  color: var(--color-text);
}

p {
  margin-top: var(--p-margin--y);
  margin-bottom: var(--p-margin--y);
}

small {
  font-size: 80%;
  font-weight: normal;
}

big {
  font-size: 120%;
  font-weight: normal;
}

mark {
  padding: var(--spacing-xs);
  background-color: var(--color-mark-background);
}

code {
  font: var(--typography-code);
  padding: 0.2em 0.4em;
  word-break: break-all;
  border-radius: var(--radius-xs);
  background-color: var(--code-background);
}

pre code {
  padding: unset;
}