@mixin roolith-base {
    html {
        box-sizing: border-box;
    }

    *,
    *:before,
    *:after {
        box-sizing: inherit;
    }

    html {
        font-size: var(--r-global-base-font-size);
    }

    body {
        font-family: var(--r-global-base-font);
        font-weight: var(--r-global-font-weight);
        background-color: var(--r-global-background-color);
        color: var(--r-global-font-color);

        &.theme-dark {
            color-scheme: dark;
        }
    }

    a,
    button {
        outline: none;
    }

    a {
        text-decoration: none;
    }
}