html {
  --scale: 1.3;
  --design-size: 18px;
  --medium: clamp(1em, var(--design-size) + .1vw, 1.5em);
  font-size: var(--medium);
  --xxx-large: calc(1rem * pow(var(--scale),   4));
  --xx-large: calc(1rem * pow(var(--scale),   3));
  --x-large: calc(1rem * pow(var(--scale),   2));
  --large: calc(1rem * pow(var(--scale),   1));
  --small: calc(1rem * pow(var(--scale),  -.5));
  --x-small: calc(1rem * pow(var(--scale),  -1));
  --xx-small: calc(1rem * pow(var(--scale),  -2));
}

:root {
  --space-m3: .25lh;
  --space-m2: .5lh;
  --space-m1: .75lh;
  --space-0: 1lh;
  --space-1: 1.25lh;
  --space-2: 1.5lh;
  --space-3: 1.75lh;
  --space-4: 2lh;
  --space-m3-m2: clamp(var(--space-m3), calc(var(--space-m2) - var(--space-m3) / 2),  var(--space-m2));
  --space-m2-m1: clamp(var(--space-m2), calc(var(--space-m1) - var(--space-m2) / 2),  var(--space-m1));
  --space-m1-0: clamp(var(--space-m1), calc(var(--space-0)  - var(--space-m1) / 2),  var(--space-0));
  --space-0-1: clamp(var(--space-0),  calc(var(--space-1)  - var(--space-0)  / 2),  var(--space-1));
  --space-1-2: clamp(var(--space-1),  calc(var(--space-2)  - var(--space-1)  / 2),  var(--space-2));
  --space-2-3: clamp(var(--space-2),  calc(var(--space-3)  - var(--space-2)  / 2),  var(--space-3));
  --space-3-4: clamp(var(--space-3),  calc(var(--space-4)  - var(--space-3)  / 2),  var(--space-4));
  --space-m3-1: clamp(var(--space-m3),  calc(var(--space-1) - var(--space-m3) / 2),  var(--space-1));
  --space-m1-2: clamp(var(--space-m1),  calc(var(--space-2) - var(--space-m1) / 2),  var(--space-2));
  --space-2-4: clamp(var(--space-2),   calc(var(--space-4) - var(--space-2)  / 2),  var(--space-4));
  --gutter: var(--space-m1-0);
  --border-radius: var(--space-m3);
  --tracking: -.05ch;
  --success-color: green;
  --info-color: darkblue;
  --warning-color: orange;
  --error-color: red;
  --transition-base: .25s ease;
  --transition-movement: .2s linear;
  --transition-fade: .2s ease;
  --transition-bounce: .5s cubic-bezier(.5, .05, .2, 1.5);
  --sans-font: sans-serif;
  --serif-font: serif;
  --mono-font: monospace;
  --border-width: 1px;
  --bg: #fff;
  --accent-bg: #f5f7ff;
  --text: #212121;
  --text-light: #585858;
  --border: #898ea4;
  --accent: #0d47a1;
  --accent-hover: #1266e2;
  --accent-text: var(--bg);
  --code: #d81b60;
  --preformatted: #444;
  --marked: #fd3;
  --disabled: #efefef;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #212121;
    --accent-bg: #2b2b2b;
    --text: #dcdcdc;
    --text-light: #ababab;
    --accent: #ffb300;
    --accent-hover: #ffe099;
    --accent-text: var(--bg);
    --code: #f06292;
    --preformatted: #bbb;
    --disabled: #111;
  }
}