body {
  color: var(--text-color);
  font-family: var(--fontstack-prefix) var(--fontstack-sans-serif);
  font-size: var(--font-size);
  line-height: var(--line-height);
  padding: var(--space-xs);
  background: var(--bg-color);
  font-feature-settings: var(--font-features);
  text-size-adjust: none;
  text-rendering: optimizelegibility;
  image-rendering: optimizequality;
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-size: 300%;
  line-height: 1;
}

h2 {
  margin-top: 2em;
}

h3 {
  margin: 2em 0 .4em;
}

p {
  margin-bottom: 1em;
}

pre,
code {
  font-family: var(--fontstack-monospace);
  color: var(--code-color);
}

.flex {
  display: flex;
}

.flex > div {
  flex: 1;
  height: calc(100vw / 13);
}

.background-wrap {
  padding: var(--space-xs);
  margin: calc(var(--space-xs) * -1);
  background: var(--text-color-50);
}

a {
  color: var(--link-color);
  font-weight: bold;
}

a:hover {
  color: var(--link-color-light);
}

/*
  Demostrate how to define a set of different color schemes for buttons based
  on Root Variables
*/
button {
  --btn-bg-h: var(--link-color-h);
  --btn-bg-s: var(--link-color-s);
  --btn-bg-l: var(--link-color-l);
  --btn-bg-hsl: var(--btn-bg-h), var(--btn-bg-s), var(--btn-bg-l);

  --btn-bg: hsl(var(--btn-bg-hsl));
  --btn-bg-factor: .9;
  --btn-bg-light: hsl(var(--btn-bg-h), var(--btn-bg-s), calc(var(--btn-bg-l) / var(--btn-bg-factor)));
  --btn-bg-dark: hsl(var(--btn-bg-h), var(--btn-bg-s), calc(var(--btn-bg-l) * var(--btn-bg-factor)));
  --btn-bg-border: hsla(var(--btn-bg-hsl), .4);

  --btn-text: var(--bg-color);

  appearance: none;
  background: var(--btn-bg);
  color: var(--btn-text);
  border-radius: 4px;
  border: none;
  padding: .5em 1em;
  margin-bottom: 1em;
  font-family: inherit;
  font-size: 100%;
  font-weight: bold;
  cursor: pointer;
  outline: none;
  transition: box-shadow .2s ease;
}

button:hover {
  background-color: var(--btn-bg-light);
}

button:active {
  background-color: var(--btn-bg-dark);
}

button:active,
button:focus {
  box-shadow: 0 0 0 .15em var(--btn-bg-border);
}

button.secondary {
  --btn-bg-s: calc(var(--link-color-s) * .2);
}

button.success {
  --btn-bg-h: 150;
  --btn-bg-s: 100%;
  --btn-bg-l: 42%;
}

button.danger {
  --btn-bg-h: 340;
  --btn-bg-factor: .85;
}

button.warning {
  --btn-bg-h: 50;
  --btn-text: var(--text-color);
}

button.info {
  --btn-bg-h: -170;
  --btn-bg-s: 80%;
}

button.light {
  --btn-bg-s: 30%;
  --btn-bg-l: calc(var(--bg-color-l) * .9);
  --btn-bg-factor: .98;
  --btn-text: var(--text-color);
}

button.dark {
  --btn-bg-s: 30%;
  --btn-bg-h: var(--text-color-h);
  --btn-bg-l: calc(var(--text-color-l) * 2);
  --btn-bg-factor: .65;
}

button.link {
  --btn-bg-h: var(--link-color-h);
  --btn-bg-s: var(--link-color-s);
  --btn-bg-l: var(--bg-color-h);
  --btn-bg-factor: .96;
  --btn-text: var(--link-color);
}

button.link:hover {
  color: var(--link-color-light);
  text-decoration: underline;
}

button.invert {
  /* just invert link color */
  --btn-bg-h: calc(var(--link-color-h) + 180);
}

/* Dark mode, that's all we need */
@media (prefers-color-scheme: dark) {
  :root {
    --blue-l: 70%;
    --indigo-l: 71%;
    --purple-l: 80%;
    --pink-l: 83%;
    --red-l: 75%;
    --orange-l: 74%;
    --yellow-l: 80%;
    --green-l: 80%;
    --teal-l: 75%;
    --cyan-l: 80%;

    --text-color-h: 233;
    --text-color-s: 40%;
    --text-color-l: 70%;

    --link-color-h: 180;
    --link-color-s: 100%;
    --link-color-l: 60%;

    --bg-color-h: 220;
    --bg-color-s: 10%;
    --bg-color-l: 9%;

    --code-color-h: 300;
    --code-color-l: calc(var(--link-color-l) * 1.4);
  }

  a {
    text-shadow: var(--link-color-60) 0px 0px 10px, var(--link-color-20) 0px 0px 20px;
  }

  pre,
  code {
    text-shadow: var(--code-color-70) 0px 0px 10px, var(--code-color-20) 0px 0px 20px;
  }

  button.warning {
    --btn-text: var(--bg-color);
  }
}