/* default variables */
:root {

    /* typograph variables */
    --system-ui-fonts: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-size: 18px;
    --underline-offset: -0.2em;
    --underline-offset-hover: -0.5em;

    /* grid system variables */
    --responsive-mode: "lg";
    --container-width: 1200px;
    --container-offset: calc(calc(100vw - var(--container-width)) / 2);
    --container-gutter: calc(calc(100% - var(--container-width)) / 2);
    --indent: calc(var(--container-width) * 0.15);
    --outdent: calc(var(--indent) * -1);
    --whitespace: 50px;
    --gutter-width: 15px;
    --gutter-1x: var(--gutter-width);
    --gutter-2x: calc(var(--gutter-width) * 2);
    --gutter-3x: calc(var(--gutter-width) * 3);
    --gutter-4x: calc(var(--gutter-width) * 4);

}

/* responsive variables */
@media screen and (max-width: 1499px) and (min-width: 768px) {
    :root {
        --responsive-mode: "md";
        --container-width: 80vw;
        --container-gutter: 10vw;
        --indent: 12vw;
        --outdent: -12vw;
        --gutter-width: 12px;
    }
}
@media screen and (max-width: 767px) {
    :root {
        --responsive-mode: "xs";
        --container-width: 90vw;
        --container-gutter: 5vw;
        --indent: 0vw;
        --outdent: 0vw;
        --gutter-width: 10px;
    }
}