:where(html) {
  /* space based on pixels: Margin, Padding */

  --space-base: 16px;
  --_space-increment-down: 4px;
  --_space-increment-up: 4px;

  --space-none: 0px; /* 0px */
  --space-xxs: calc(var(--space-xs) - var(--_space-increment-down)); /* 4px */
  --space-xs: calc(var(--space-s) - var(--_space-increment-down)); /* 8px */
  --space-s: calc(var(--space-m) - var(--_space-increment-down)); /* 12px */
  --space-m: var(--space-base); /* 16px */
  --space-l: calc(var(--space-m) + var(--_space-increment-up)); /* 20px */
  --space-xl: calc(var(--space-l) + var(--_space-increment-up)); /* 24px */
  --space-xxl: calc(var(--space-xl) + var(--_space-increment-up)); /* 28px */

  /* spaces based on rem: Margin, Padding */

  --rem-base: 1rem;
  --_rem-increment-down: .2rem;
  --_rem-increment-up: .2rem;

  --rem-xxs: calc(var(--rem-xs) - var(--_rem-increment-down)); /* .4rem */
  --rem-xs: calc(var(--rem-s) - var(--_rem-increment-down)); /* .6rem */
  --rem-s: calc(var(--rem-m) - var(--_rem-increment-down)); /* .8rem */
  --rem-m: var(--rem-base); /* 1rem */
  --rem-l: calc(var(--rem-m) + calc(var(--_rem-increment-up) * 2)); /* 1.4rem */
  --rem-xl: calc(var(--rem-l) + calc(var(--_rem-increment-up) * 3)); /* 2rem */
  --rem-xxl: calc(var(--rem-xl) + calc(var(--_rem-increment-up) * 3)); /* 2.6rem */

  --rem-000: -.4rem;
  --rem-00: -.2rem;
  --rem-1: .4rem;
  --rem-2: .8rem;
  --rem-3: 1rem;
  --rem-4: 1.2rem;
  --rem-5: 1.4rem;
  --rem-6: 1.8rem;
  --rem-7: 2rem;
  --rem-8: 3rem;
  --rem-9: 4rem;
  --rem-10: 5rem;
  --rem-11: 7.5rem;
  --rem-12: 10rem;
  --rem-13: 15rem;
  --rem-14: 20rem;
  --rem-15: 30rem;

  /*** size based on pixels ***/
  --_size-increment: 4px;

  --size-0: 0px;
  --size-none: 0px;
  --size-px: 1px;
  --size-1: calc(var(--_size-increment)  * 1); /* 4px */
  --size-2: calc(var(--_size-increment)  * 2); /* 8px */
  --size-3: calc(var(--_size-increment)  * 3); /* 12px */
  --size-4: calc(var(--_size-increment)  * 4); /* 16px */
  --size-5: calc(var(--_size-increment)  * 5); /* 20px */
  --size-6: calc(var(--_size-increment)  * 6); /* 24px */
  --size-7: calc(var(--_size-increment)  * 7); /* 28px */
  --size-8: calc(var(--_size-increment)  * 8); /* 32px */
  --size-9: calc(var(--_size-increment)  * 9); /* 36px */
  --size-10: calc(var(--_size-increment)  * 10); /* 40px */
  --size-11: calc(var(--_size-increment)  * 11); /* 44px */
  --size-12: calc(var(--_size-increment)  * 12); /* 48px */
  --size-14: calc(var(--_size-increment)  * 14); /* 56px */
  --size-16: calc(var(--_size-increment)  * 16); /* 64px */
  --size-20: calc(var(--_size-increment)  * 20); /* 80px */
  --size-24: calc(var(--_size-increment)  * 24); /* 96px */
  --size-28: calc(var(--_size-increment)  * 28); /* 112px */
  --size-32: calc(var(--_size-increment)  * 32); /* 128px */
  --size-36: calc(var(--_size-increment)  * 36); /* 144px */
  --size-40: calc(var(--_size-increment)  * 40); /* 160px */
  --size-44: calc(var(--_size-increment)  * 44); /* 176px */
  --size-48: calc(var(--_size-increment)  * 48); /* 192px */
  --size-52: calc(var(--_size-increment)  * 52); /* 208px */
  --size-56: calc(var(--_size-increment)  * 56); /* 224px */
  --size-60: calc(var(--_size-increment)  * 60); /* 240px */
  --size-64: calc(var(--_size-increment)  * 64); /* 256px */
  --size-72: calc(var(--_size-increment)  * 72); /* 288px */
  --size-80: calc(var(--_size-increment)  * 80); /* 320px */
  --size-96: calc(var(--_size-increment)  * 96); /* 384px */
  --size-full: 100%;
  --size-screen-width: 100vw;
  --size-min: min-content;
  --size-max: max-content;

  
  --size-base: var(--size-4); /* 16px */

  --size-xxs: calc(var(--size-xs) - var(--_size-increment)); /* 4px */
  --size-xs: calc(var(--size-s) - var(--_size-increment)); /* 8px */
  --size-s: calc(var(--size-m) - var(--_size-increment)); /* 12px */
  --size-m: var(--size-base); /* 16px */
  --size-l: calc(var(--size-m) + var(--_size-increment)); /* 20px */
  --size-xl: calc(var(--size-l) + var(--_size-increment)); /* 24px */
  --size-xxl: calc(var(--size-xl) + var(--_size-increment)); /* 28px */

  /* Gap */
  --gap-base: 16px;
  --_gap-increment-down: 4px;
  --_gap-increment-up: 4px;
  
  --gap-none: 0px;
  --gap-xxs: calc(var(--gap-xs) - var(--_gap-increment-down)); /* 4px */
  --gap-xs: calc(var(--gap-s) - var(--_gap-increment-down)); /* 8px */
  --gap-s: calc(var(--gap-m) - var(--_gap-increment-down)); /* 12px */
  --gap-m: var(--gap-base); /* 16px */
  --gap-l: calc(var(--gap-m) + var(--_gap-increment-up)); /* 20px */
  --gap-xl: calc(var(--gap-l) + var(--_gap-increment-up)); /* 24px */
  --gap-xxl: calc(var(--gap-xl) + var(--_gap-increment-up)); /* 28px */

  /* Characters - Prose */
  --ch-xs: 45ch;
  --ch-s: 55ch;
  --ch-m: 65ch;
  --ch-l: 75ch;
  --ch-xl: 85ch;
}

/* Gap */
.gap-xxl {
  gap: var(--gap-xxl);
}
.gap-xl {
  gap: var(--gap-xl);
}
.gap-l {
  gap: var(--gap-l);
}
.gap-m {
  gap: var(--gap-m);
}
.gap {
  gap: var(--gap);
}
.gap-s {
  gap: var(--gap-s);
}
.gap-xs {
  gap: var(--gap-xs);
}
.gap-xxs {
  gap: var(--gap-xxs);
}
.gap-none {
  gap: 0;
}

.height-full {
  height: 100%;
}

.width-full {
  width: 100%;
}