:root {
    /* =========================================
       1. BASE CONSTANTS
       These belong in :root because they are global
       hardware values injected by your browser.
       ========================================= */
    --device-corner-radius: 28px;
    --padding: 8px;
    --single-line-height: 100px;
    --max-list-height: 5;
    --animation-speed: 300;

    --highlight-color: blue;
    --on-highlight: white;
    --off-highlight: black;

    /* Default global layer */
    --layer: 0;
}

/* =========================================
   2. THE REACTIVE MATH ENGINE
   Using '*' forces the browser to recalculate
   these formulas individually for every element
   based on whatever its local --layer value is!
   ========================================= */
* {
    /* cornerRadiusForLayer: max(0, deviceCornerRadius - (padding * layer)) */
    --layer-corner-radius: max(
        0px,
        calc(var(--device-corner-radius) - (var(--padding) * var(--layer)))
    );

    /* minHeightForLayer: singleLineHeight - (padding * layer * 2) */
    --layer-min-height: calc(
        var(--single-line-height) - (var(--padding) * var(--layer) * 2)
    );

    /* heightForLayer: max((cornerRadius * 2), minHeight) */
    --layer-height: max(
        calc(var(--layer-corner-radius) * 2),
        var(--layer-min-height)
    );

    /* maxContainerSizeForLayer: (height * maxListHeight) + (padding * (maxListHeight + 1)) */
    --layer-max-container-size: calc(
        (var(--layer-height) * var(--max-list-height)) +
            (var(--padding) * (var(--max-list-height) + 1))
    );

    /* animationSpeedForLayer: max(0, animationSpeed - (50 * layer)) */
    --layer-animation-speed: max(
        0ms,
        calc((var(--animation-speed) - 50 * var(--layer)) * 1ms)
    );
}