: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-sans: 'system-arrows', -apple-system, BlinkMacSystemFont, segoe ui, 'helvetica neue', helvetica, Arial, roboto, ubuntu, noto, sans-serif;
  --font-stack-alternative: 'iA Writer Quattro', -apple-system, BlinkMacSystemFont, segoe ui, 'helvetica neue', helvetica, Arial, roboto, ubuntu, noto, sans-serif;
  --font-stack-serif: 'Century Schoolbook L', 'Times New Roman', 'Times', serif;
  --font-stack-monospace: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace; /* '188 Sans Mono',  */

  /* Named colors */
  --color-gray-50: #FCFCFB;
  --color-gray-100: #F0F0ED;
  --color-gray-200: #E6E8E6;
  --color-gray-300: #E1EDF2;
  --color-gray-400: #D3D8E3;
  --color-gray-500: #BFC4CE;
  --color-gray-550: #939BAA;
  --color-gray-600: #7D798F;
  --color-gray-700: #605F70;
  --color-gray-800: #413F4A;
  --color-gray-900: #242329;
  --color-gray-925: #1E1C24;
  --color-gray-950: #100F12;

  --color-blue-50: #EDF4FC;
  --color-blue-100: #D3E6FC;
  --color-blue-200: #B3D2F7;
  --color-blue-300: #85B7F2;
  --color-blue-400: #63A2E0;
  --color-blue-500: #366EB1;
  --color-blue-600: #1A5498;
  --color-blue-700: #103F77;
  --color-blue-800: #052E5F;
  --color-blue-900: #0A2545;
  --color-blue-950: #091426;

  --color-yellow-100: #F2EEE6;
  --color-yellow-200: #F2DFBD;
  --color-yellow-300: #F2D39D;
  --color-yellow-400: #F2D39D;
  --color-yellow-500: #E3BF81;
  --color-yellow-600: #B59E76;
  --color-yellow-700: #A67E3A;
  --color-yellow-800: #735728;
  --color-yellow-900: #241D12;

  /* color-seagreen */
  /* 50–500 EBFFFA,BCFFED,8DFFE0,5EFFD4,2FFFC7,00FFBA */
  /* 500–950 00FFBA,00D098,00A176,007253,004331,00140F */
  /* This colour scheme is linear from 50–500, and linear 500–950 */
  /* And such it is not really great for our purposes */

  --color-seagreen-50: #EBFFFA;
  --color-seagreen-100: #BCFFED;
  --color-seagreen-200: #8DFFE0;
  --color-seagreen-300: #5EFFD4;
  --color-seagreen-400: #2FFFC7;
  --color-seagreen-500: #00FFBA;
  --color-seagreen-600: #00D098;
  --color-seagreen-700: #00A176;
  --color-seagreen-800: #007253;
  --color-seagreen-900: #004331;
  --color-seagreen-950: #00140F;
}

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

  /* Typography */
  --line-height-large-2: 1.6;
  --line-height-large: 1.375;
  --line-height-normal: 1.25;
  --line-height-small: 1.15;

  --font-size-large-3: var(--unit-large-3);
  --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-size-small-2: var(--unit-small-2);
  --font-size-small-3: var(--unit-small-3);

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

  /* Colors */
  --color-text: var(--color-gray-500);
  --color-text-selection: var(--color-blue-800);
  --color-text-selection-alternative: var(--color-blue-100);
  --color-text-muted: var(--color-gray-550);
  --color-text-muted-2: var(--color-gray-600);
  --color-text-muted-3: var(--color-gray-700);
  --color-text-highlight: var(--color-gray-400);

  --color-text-mark: var(--color-yellow-700);

  --color-border: var(--color-gray-600);
  --color-border-muted: var(--color-gray-800);

  --color-background: var(--color-gray-900);
  --color-background-contrast: var(--color-gray-925);

  --color-link: var(--color-blue-400);
  --color-link-hover: var(--color-blue-300);
  --color-link-active: var(--color-blue-500);
  --color-link-current: var(--color-blue-500);
  --color-link-border: inherit;

  --color-link-inverted: var(--color-blue-700);
  --color-link-inverted-hover: var(--color-blue-500);
  --color-link-inverted-active: var(--color-blue-300);
  --color-link-inverted-border: inherit;
  --color-link-inverted-background: var(--color-gray-500);
  --color-link-inverted-background-inverted: var(--color-gray-800);

  --color-node-current: var(--color-yellow-800);
  --color-node-current-outline: var(--color-yellow-500);
  --color-node-current-outline-hover: var(--color-yellow-400);
  --color-node-current-outline-active: var(--color-yellow-700);

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

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

  --grid-gap-small: var(--unit-small-2);
  --grid-gap: var(--unit-large);
  --grid-gap-large: var(--unit-large-5);
  --grid-gap-large-2: var(--unit-large-9);

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

@media (prefers-color-scheme: light) {
  :root {
    /* Implement this native-behaviour instead of the class-based */
  }
}

.theme-alternative {
  -moz-osx-font-smoothing: unset;
  -webkit-font-smoothing: unset;

  --color-background: var(--color-gray-50);
  --color-background-contrast: var(--color-gray-100);

  --color-text: var(--color-gray-800);
  --color-text-muted: var(--color-gray-600);
  --color-text-muted-2: var(--color-gray-550);
  --color-text-muted-3: var(--color-gray-500);
  --color-text-highlight: var(--color-gray-550);

  --color-link: var(--color-blue-500);
  --color-link-hover: var(--color-blue-400);
  --color-link-active: var(--color-blue-700);
  --color-link-current: var(--color-blue-400);

  --color-link-inverted: var(--color-blue-400);
  --color-link-inverted-hover: var(--color-blue-500);
  --color-link-inverted-active: var(--color-blue-300);
  --color-link-inverted-background: var(--color-blue-800);

  --color-border-muted: var(--color-gray-400);

  --color-node-current: var(--color-yellow-400);
  --color-node-current-outline: var(--color-yellow-800);
  --color-node-current-outline-hover: var(--color-yellow-700);
  --color-node-current-outline-active: var(--color-yellow-500);
}

/* 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-highlight); */
  letter-spacing: -0.008em;
  word-spacing: -0.05em;
}

.text-block-subhead {
  font-size: var(--font-size-small-3);
  line-height: var(--line-height-small);
  font-weight: 400;
  /* font-family: var(--font-stack-serif); */
  text-transform: uppercase;
  letter-spacing: 0.21em;
}

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

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

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

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

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