_native-variables.scss

// --------------------------------------------------------------------------------------------------------------------
// Application-wide CSS variables
// ==============================
// You don't need to import this in any other Sass file except in the site.scss which renders these variables globally
// available. If you import them anywhere else it will render duplicates in the output site.css file and potentially
// overwrite newer values in the derived theme so avoid that.
// --------------------------------------------------------------------------------------------------------------------

:root {
    // Fonts
    --font-default: var(--bs-body-font-family);
    --font-header: var(--bs-font-sans-serif);
    --color-foreground-body: black;
    --color-background-body: white;

    // Gutters
    --gutter-x-small: 1rem;
    --gutter-small: 1.5rem;
    --gutter-medium: 2rem;
    --gutter-large: 5rem;
    --gutter-x-large: 10rem;
    --gutter-xx-large: 10rem;

    // Page Margins
    --page-margin-x-small: var(--gutter-x-small);
    --page-margin-small: var(--gutter-small);
    --page-margin-medium: var(--gutter-medium);
    --page-margin-large: var(--gutter-large);
    --page-margin-x-large: var(--gutter-x-large);
    --page-margin-xx-large: var(--gutter-xx-large);
}