:root {
    --density: 1em;
    --space-tiny: calc(1em / 12);
    --space-small: calc(1em / 4);
    --button-height: 2em;


    --scale-2: clamp(1.53rem, 0.7975000000000001vw + 1.5175rem, 2.3275rem);
    --scale--1: clamp(0.885625rem, -0.03749999999999998vw + 0.88625rem, 0.848125rem);
    --scale-0: clamp(1.0625rem, 0.125vw + 1.06125rem, 1.1875rem);
    --scale-1: clamp(1.275rem, 0.3875000000000002vw + 1.27rem, 1.6625rem);
    --scale-2: clamp(1.53rem, 0.7975000000000001vw + 1.5175rem, 2.3275rem);
    --scale-3: clamp(1.83625rem, 1.4225vw + 1.81rem, 3.25875rem);
    --scale-4: clamp(2.203125rem, 2.3587499999999997vw + 2.15125rem, 4.561875rem);
    --scale-5: clamp(2.64375rem, 3.743125vw + 2.545rem, 6.386875rem);

    --font-size-xs: var(--scale--2);
    --font-size-sm: var(--scale--1);
    --font-size-md: var(--scale-0);
    --font-size-lg: var(--scale-1);
    --font-size-xl: var(--scale-2);
    --font-size-2xl: var(--scale-3);
    --font-size-3xl: var(--scale-4);
}

body {
    --space-near: calc(var(--density) * 1.2);
    --space-away: calc(var(--density) * 2.0);
    font-size: var(--font-size-lg);
}


body [data-density-shift] {
    --space-near: calc(var(--density) * 0.8);
    --space-away: calc(var(--density) * 1.6);
    font-size: var(--font-size-md);
}

body [data-density-shift] [data-density-shift] {
    --space-near: calc(var(--density) * 0.4);
    --space-away: calc(var(--density) * 0.8);
    font-size: var(--font-size-sm);
}

body [data-density-shift] [data-density-shift] [data-density-shift] {
    --space-near: calc(var(--density) * 0.2);
    --space-away: calc(var(--density) * 0.4);
    font-size: var(--font-size-xs);
}