:root {

  /*
    Typography
  ----------------------------------------------------------------------------*/
  --fontstack-prefix: -apple-system, BlinkMacSystemFont,;
  --fontstack-sans-serif: "Helvetica Neue", "Segoe UI", sans-serif;
  --fontstack-serif: Georgia, serif;
  --fontstack-monospace: Menlo, Consolas, monospace;
  --fontstack-default: var(--fontstack-prefix) var(--fontstack-sans-serif);
  --font-size-base: 1rem;
  --font-size-factor: 1vw;
  --font-size: calc(var(--font-size-base) + var(--font-size-factor));
  --font-features: "halt", "ss01", "ss02";
  --line-height: calc(20 / 14);

  /*
    Layout
  ----------------------------------------------------------------------------*/
  --breakpoint-lg: 1600px;
  --breakpoint-md: 1080px;
  --breakpoint-sm: 640px;
  --breakpoint-xs: 400px;

  --space-lg: 24vw;
  --space-md: 8vw;
  --space-sm: 4vw;
  --space-xs: 1.2vw;

  --border-lg: 4px;
  --border-md: 2px;
  --border-sm: 1px;

  /* Nav */
  --nav-padding: 1.4vmax;
  --nav-item-space: 1vmax;

  /*
    Colors
  ----------------------------------------------------------------------------*/

  /* Color - text color */
  --text-color-h: 238;
  --text-color-s: 71%;
  --text-color-l: 11%;
  --text-color-hsl: var(--text-color-h), var(--text-color-s), var(--text-color-l);

  --text-color: hsl(var(--text-color-hsl));
  --text-color-0: hsla(var(--text-color-hsl), 0);
  --text-color-3: hsla(var(--text-color-hsl), .03);
  --text-color-5: hsla(var(--text-color-hsl), .05);
  --text-color-7: hsla(var(--text-color-hsl), .07);
  --text-color-10: hsla(var(--text-color-hsl), .1);
  --text-color-20: hsla(var(--text-color-hsl), .2);
  --text-color-30: hsla(var(--text-color-hsl), .3);
  --text-color-40: hsla(var(--text-color-hsl), .4);
  --text-color-50: hsla(var(--text-color-hsl), .5);
  --text-color-60: hsla(var(--text-color-hsl), .6);
  --text-color-70: hsla(var(--text-color-hsl), .7);
  --text-color-80: hsla(var(--text-color-hsl), .8);
  --text-color-90: hsla(var(--text-color-hsl), .9);
  --text-color-light: hsl(var(--text-color-h), var(--text-color-s), calc(var(--text-color-l) / .9));
  --text-color-dark: hsl(var(--text-color-h), var(--text-color-s), calc(var(--text-color-l) * .9));

  /* Color - link color */
  --link-color-h: 211;
  --link-color-s: 100%;
  --link-color-l: 50%;
  --link-color-hsl: var(--link-color-h), var(--link-color-s), var(--link-color-l);

  --link-color: hsl(var(--link-color-hsl));
  --link-color-0: hsla(var(--link-color-hsl), 0);
  --link-color-3: hsla(var(--link-color-hsl), .03);
  --link-color-5: hsla(var(--link-color-hsl), .05);
  --link-color-7: hsla(var(--link-color-hsl), .07);
  --link-color-10: hsla(var(--link-color-hsl), .1);
  --link-color-20: hsla(var(--link-color-hsl), .2);
  --link-color-30: hsla(var(--link-color-hsl), .3);
  --link-color-40: hsla(var(--link-color-hsl), .4);
  --link-color-50: hsla(var(--link-color-hsl), .5);
  --link-color-60: hsla(var(--link-color-hsl), .6);
  --link-color-70: hsla(var(--link-color-hsl), .7);
  --link-color-80: hsla(var(--link-color-hsl), .8);
  --link-color-90: hsla(var(--link-color-hsl), .9);
  --link-color-light: hsl(var(--link-color-h), var(--link-color-s), calc(var(--link-color-l) / .9));
  --link-color-dark: hsl(var(--link-color-h), var(--link-color-s), calc(var(--link-color-l) * .9));

  /* Color - background color */
  --bg-color-h: 0;
  --bg-color-s: 0%;
  --bg-color-l: 100%;
  --bg-color-hsl: var(--bg-color-h), var(--bg-color-s), var(--bg-color-l);

  --bg-color: hsl(var(--bg-color-hsl));
  --bg-color-0: hsla(var(--bg-color-hsl), 0);
  --bg-color-3: hsla(var(--bg-color-hsl), .03);
  --bg-color-5: hsla(var(--bg-color-hsl), .05);
  --bg-color-7: hsla(var(--bg-color-hsl), .07);
  --bg-color-10: hsla(var(--bg-color-hsl), .1);
  --bg-color-20: hsla(var(--bg-color-hsl), .2);
  --bg-color-30: hsla(var(--bg-color-hsl), .3);
  --bg-color-40: hsla(var(--bg-color-hsl), .4);
  --bg-color-50: hsla(var(--bg-color-hsl), .5);
  --bg-color-60: hsla(var(--bg-color-hsl), .6);
  --bg-color-70: hsla(var(--bg-color-hsl), .7);
  --bg-color-80: hsla(var(--bg-color-hsl), .8);
  --bg-color-90: hsla(var(--bg-color-hsl), .9);
  --bg-color-light: hsl(var(--bg-color-h), var(--bg-color-s), calc(var(--bg-color-l) / .9));
  --bg-color-dark: hsl(var(--bg-color-h), var(--bg-color-s), calc(var(--bg-color-l) * .9));

  /* Color - code color, an inverted demo from link-color */
  --code-color-h: calc(var(--link-color-h) + 180);
  --code-color-s: var(--link-color-s);
  --code-color-l: var(--link-color-l);
  --code-color-hsl: var(--code-color-h), var(--code-color-s), var(--code-color-l);

  --code-color: hsl(var(--code-color-hsl));
  --code-color-0: hsla(var(--code-color-hsl), 0);
  --code-color-3: hsla(var(--code-color-hsl), .03);
  --code-color-5: hsla(var(--code-color-hsl), .05);
  --code-color-7: hsla(var(--code-color-hsl), .07);
  --code-color-10: hsla(var(--code-color-hsl), .1);
  --code-color-20: hsla(var(--code-color-hsl), .2);
  --code-color-30: hsla(var(--code-color-hsl), .3);
  --code-color-40: hsla(var(--code-color-hsl), .4);
  --code-color-50: hsla(var(--code-color-hsl), .5);
  --code-color-60: hsla(var(--code-color-hsl), .6);
  --code-color-70: hsla(var(--code-color-hsl), .7);
  --code-color-80: hsla(var(--code-color-hsl), .8);
  --code-color-90: hsla(var(--code-color-hsl), .9);
  --code-color-light: hsl(var(--code-color-h), var(--code-color-s), calc(var(--code-color-l) / .9));
  --code-color-dark: hsl(var(--code-color-h), var(--code-color-s), calc(var(--code-color-l) * .9));

  /*
    Color variants/variable mappings (based on our main color scheme)
  ----------------------------------------------------------------------------*/
  --border-color: var(--text-color-10);
}
