/* ##### Variables ########## */

:root {
  /* Typography */

  --typography-font-family-base: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --typography-font-family-code: 'Lucida Console', Monaco, monospace;
  --typography-font-size-x07500: calc(var(--typography-font-size-x10000) * 0.75);
  --typography-font-size-x08750: calc(var(--typography-font-size-x10000) * 0.875);
  --typography-font-size-x10000: 16px;
  --typography-font-size-x11250: calc(var(--typography-font-size-x10000) * 1.125);
  --typography-font-size-x12500: calc(var(--typography-font-size-x10000) * 1.25);
  --typography-font-size-x15000: calc(var(--typography-font-size-x10000) * 1.5);
  --typography-font-size-x20000: calc(var(--typography-font-size-x10000) * 2);
  --typography-font-weight-regular: 400;
  --typography-font-weight-bold: 700;
  --typography-line-height-reset: 1;
  --typography-line-height-tight: 1.2;
  --typography-line-height-normal: 1.6;

  /* Colors */

  --color-gray-5: hsl(0, 0%, 5%);
  --color-gray-20: hsl(0, 0%, 20%);
  --color-gray-40: hsl(0, 0%, 40%);
  --color-gray-60: hsl(0, 0%, 60%);
  --color-gray-80: hsl(0, 0%, 80%);
  --color-gray-97: hsl(0, 0%, 97%);
  --color-gray-100: hsl(0, 0%, 100%);
  --color-azureradiance: hsl(210, 100%, 50%);

  /* Borders */

  --border: var(--sizing-x00625) solid var(--color-gray-80);
  --border-radius-25: var(--sizing-x02500);

  /* Sizing */

  --sizing-x00625: calc(var(--sizing-x10000) * 0.0625);
  --sizing-x02500: calc(var(--sizing-x10000) * 0.25);
  --sizing-x05000: calc(var(--sizing-x10000) * 0.5);
  --sizing-x10000: 16px;
  --sizing-x12500: calc(var(--sizing-x10000) * 1.25);
  --sizing-x15000: calc(var(--sizing-x10000) * 1.5);
  --sizing-x20000: calc(var(--sizing-x10000) * 2);
  --sizing-x30000: calc(var(--sizing-x10000) * 3);

  /* Spacing */

  --spacing-x00625: calc(var(--spacing-x10000) * 0.0625);
  --spacing-x02500: calc(var(--spacing-x10000) * 0.25);
  --spacing-x05000: calc(var(--spacing-x10000) * 0.5);
  --spacing-x10000: 16px;
  --spacing-x15000: calc(var(--spacing-x10000) * 1.5);
  --spacing-x20000: calc(var(--spacing-x10000) * 2);

  /* Custom Sizes */

  --toc-width: max-content;
  --content-max-width: 1280px;
}