:root {
    --stack-sans: 'Inter', system-ui, sans-serif;
    --stack-mono: 'DM Mono', monospace;
    --stack-pixel: 'DefaultLingo', pixel;
    
    --font-main: var(--stack-sans);
    --font-heading: var(--stack-sans);
    --font-code: var(--stack-mono);
    --font-pixel: var(--stack-pixel);
    
    --fontSize: clamp(12px, 1vw + 8px, 16px);
    
    --lineHeight: 1.5;
    --baseline: calc((var(--lineHeight) / 2) * 1rem);    
    --h1-size: clamp(2.5rem, 5vw, 4rem);
    --h2-size: clamp(1.8rem, 3.5vw, 2.8rem);
    --h3-size: clamp(1.4rem, 2.5vw, 1.8rem);
    --h4-size: clamp(1.1rem, 1.5vw, 1.3rem);

    --grid-base: 4;
    --multiplier: 3;
    --grid-columns: calc(var(--grid-base) * var(--multiplier));
    --columnGap: clamp(1rem, 4vw, 3rem);
    --rowGap: var(--lineHeight);

    --displayScale: 1;
    --pixel: 1px;
}

@media (max-width: 1024px) { :root { --multiplier: 2; } }
@media (max-width: 700px) { :root { --multiplier: 1; } }
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
    :root { --displayScale: 2; --pixel: 0.5px; }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2.5), only screen and (min-resolution: 2.5dppx) {
    :root { --displayScale: 3; --pixel: 0.34px; }
}

@media only screen and (-webkit-min-device-pixel-ratio: 3.5), only screen and (min-resolution: 3.5dppx) {
    :root { --displayScale: 4; --pixel: 0.25px; }
}