@import url("./colors.css");
@import url("./buttons.css");
@import url("./fonts.css");

/**
* Grid variables
*/
:root {
    --site-gutter: 35px;
    --row-gutter: 90px;
    --column-gap: 24px;
    --row-spacing: 75px;
    --global-row-spacing: 50px;
    --container-width: 100svw;
}

/**
* Relative scaling
*/
:root {
    --pk-container-width: var(--container-width);
    --pk-site-gutter: var(--site-gutter);
    --pk-row-gutter: var(--row-gutter);
    --pk-column-gap: var(--column-gap);
    --pk-row-spacing: var(--row-spacing);
}

body.relative-scaling {
    --pk-column-gap: calc((var(--column-gap) / 16px) * var(--su));
    --pk-row-spacing: calc((var(--row-spacing) / 16px) * var(--su));
    --pk-site-gutter: calc((var(--site-gutter) / 16px) * var(--su));
    --pk-row-gutter: calc((var(--row-gutter) / 16px) * var(--su));
    --pk-text-font-size:max(0.938rem, calc(1.125 * var(--su)));
    background: var(--pk-purple);
}

@media only screen and (min-width: 993px) {
    :root {
        --pk-text-font-size: var(--text-desktop-font-size);
    }
}

@media only screen and (max-width: 992px) {
    :root {
        --pk-text-font-size: var(--text-tablet-font-size);
    }
}

@media only screen and (max-width: 767px) {
    :root {
        --pk-text-font-size: var(--text-mobile-font-size);
    }

    body.relative-scaling {
        --pk-text-font-size: max(var(--text-mobile-font-size));
    }
}