:root {
  /* Low-level variables */
  /* Do not use outside of this document */

  /* Predefined units based on an exponential scale of --unit-ratio */
  --unit-ratio: 1.25;
  --unit-large-10: calc(var(--unit-normal) * var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio));
  --unit-large-9: calc(var(--unit-normal) * var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio));
  --unit-large-8: calc(var(--unit-normal) * var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio));
  --unit-large-7: calc(var(--unit-normal) * var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio));
  --unit-large-6: calc(var(--unit-normal) * var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio));
  --unit-large-5: calc(var(--unit-normal) * var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio));
  --unit-large-4: calc(var(--unit-normal) * var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio));
  --unit-large-3: calc(var(--unit-normal) * var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio));
  --unit-large-2: calc(var(--unit-normal) * var(--unit-ratio) * var(--unit-ratio));
  --unit-large: calc(var(--unit-normal) * var(--unit-ratio));
  --unit-normal: 20px;
  --unit-small: calc(var(--unit-normal) / var(--unit-ratio));
  --unit-small-2: calc(var(--unit-normal) / var(--unit-ratio) / var(--unit-ratio));
  --unit-small-3: calc(var(--unit-normal) / var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio));
  --unit-small-4: calc(var(--unit-normal) / var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio));
  --unit-small-5: calc(var(--unit-normal) / var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio));
  --unit-small-6: calc(var(--unit-normal) / var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio));
  --unit-small-7: calc(var(--unit-normal) / var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio));
  --unit-small-8: calc(var(--unit-normal) / var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio));
  --unit-small-9: calc(var(--unit-normal) / var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio));
  --unit-small-10: calc(var(--unit-normal) / var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio));
  --unit-hairline: 1px;

  /* Font and type basics */
  --font-stack-system: -apple-system, blinkmacsystemfont, segoe ui, 'helvetica neue', helvetica, ubuntu, roboto, noto, arial, sans-serif;

  /* Named colors */
  --color-gray: #707070;
  --color-gray-light: #d4cfcf;
  --color-gray-dark: #434343;
  --color-white: whitesmoke;
  --color-indigo: #5258EA;
  --color-indigo-light: #878BED;
  --color-indigo-dark: #11169B;
  --color-indigo-dark-2: #00058A;
}

:root {
  /* High-level variables */
  /* These are meant to be used in the normal stylesheet */

  /* Typography */
  --line-height-large: 1.35;
  --line-height-normal: 1.21;
  --line-height-small: 1;

  --font-size-large-3: var(--unit-large-5);
  --font-size-large-2: var(--unit-large-2);
  --font-size-large: var(--unit-large);
  --font-size-normal: var(--unit-normal);
  --font-size-small: var(--unit-small);

  --font-stack-primary: var(--font-stack-system);

  /* Colors */
  --color-text: var(--color-gray);
  --color-text-light: var(--color-gray-light);
  --color-text-dark: var(--color-gray-dark);
  --color-brand: hotpink;
  --color-border: var(--color-gray-light);
  --color-background: var(--color-white);
  --color-background-inverted: #222;
  --color-link: var(--color-indigo);
  --color-link-hover: var(--color-indigo-light);
  --color-link-active: var(--color-indigo-dark);
  --color-link-border: var(--color-indigo);
  --color-link-inverted: var(--color-white);
  --color-link-inverted-hover: var(--color-gray-light);
  --color-link-inverted-active: var(--color-white);
  --color-link-inverted-border: var(--color-indigo-light);
  --color-link-inverted-background: var(--color-indigo-light);
  --color-link-inverted-background-inverted: var(--color-indigo);

  /* Spacing */
  --spacing-horizontal-large-2: var(--unit-large-4);
  --spacing-horizontal-large: var(--unit-large);
  --spacing-horizontal: var(--unit-small);
  --spacing-horizontal-small: var(--unit-small-3);
  --spacing-horizontal-small-2: var(--unit-small-6);

  --spacing-vertical-large-2: var(--unit-large-4);
  --spacing-vertical-large: var(--unit-large);
  --spacing-vertical: var(--unit-small);
  --spacing-vertical-small: var(--unit-small-3);
  --spacing-vertical-small-2: var(--unit-small-6);
  --spacing-vertical-small-3: var(--unit-small-8);

  /* Borders */
  --border-width-normal: var(--unit-hairline);
  --border-width-large: var(--unit-small-7);
  --border-normal: var(--border-width-normal) solid var(--color-text-light);
}

/* Utility classes */
/* Typography */

.text-block-heading {
  font-size: var(--font-size-large-3);
  line-height: var(--line-height-small);
  font-weight: 400;
  color: var(--color-text-dark);
}

.text-block-subhead {
  font-size: var(--font-size-large);
  line-height: var(--line-height-small);
  font-weight: 400;
}

.text-block-normal {
  font-size: var(--font-size-normal);
  line-height: var(--line-height-normal);
}

.text-block-small {
  font-size: var(--font-size-small);
  line-height: var(--line-height-large);
}

.text-inline-code {
  font-size: 0.8em;
  background: var(--color-text-light);
}

.text-color-dark {
  color: var(--color-text-dark);
}

.text-color-light {
  color: var(--color-text-light);
}