/* CSS Variables */
html {
    /* Typography Defaults */
    --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 Defaults */
    --responsive-mode: "default";
    --container-width: 1080px;
    --container-offset: calc(calc(100vw - var(--container-width)) / 2);
    --container-gutter: calc(calc(100% - var(--container-width)) / 2);
    --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 Breakpoints */
    --breakpoint-lg-min: 1280px;
    --breakpoint-lg-container: 1080px;
    --breakpoint-md-max: 1279px;
    --breakpoint-md-container: 720px;
    --breakpoint-md-min: 768px;
    --breakpoint-sm-max: 767px;
    --breakpoint-sm-container: 90vw;
    --breakpoint-sm-gutter: 5vw;

    /* Border Radius */
    --border-radius: calc(var(--gutter-width) / 2);
    --border-radius: calc(var(--gutter-width) / 2);

}