/* Global Site Variables */
html {
    --primary-site-color: #7525ea;
    --site-light-color: #f0e6ff;
    --site-dark-color: #1b0042;
    --site-alert-color: orange;
    --site-light-highlight-color: var(--primary-site-color);
    --site-dark-highlight-color: aqua;

    --base-padding: 16px;

    --site-fallback-font-family: "Ubuntu", sans-serif, Arial, 'Open Sans';
    --site-interface-font-family: system-ui, "Segoe UI", -apple-system, BlinkMacSystemFont, var(--site-fallback-font-family);
    --site-content-font-family: "Roboto", var(--site-fallback-font-family);
    --site-alt-font-family: "Capriola", var(--site-interface-font-family);
}

/* Main Body Theming */
body {
    color: var(--site-foreground-color);
    background-color: var(--site-background-color);
    font-family: var(--site-fallback-font-family);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);

    /* Body Background */
    &::before {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        content: "";
        opacity: 0.85;
        background: radial-gradient(
            circle at 0% -100%,
            var(--primary-site-color), 25%,
            var(--site-background-color), 90%,
            var(--primary-site-color)
        );
    }
}

/* Default Dark Color Mode Scheme */
body {
    --site-foreground-color: var(--site-light-color);
    --site-background-color: var(--site-dark-color);
    --site-highlight-color: var(--site-dark-highlight-color);
}

/* Light Color Mode Scheme */
@media (prefers-color-scheme: light) {
    body:not([class="dark-mode"]) {
        --site-foreground-color: var(--site-dark-color);
        --site-background-color: var(--site-light-color);
        --site-highlight-color: var(--site-light-highlight-color);
    }
}
body[class="light-mode"] {
    --site-foreground-color: var(--site-dark-color);
    --site-background-color: var(--site-light-color);
    --site-highlight-color: var(--site-light-highlight-color);
}

/* Shared Element Stylings */
#site_header, #site_footer {
    box-shadow: 0 0 10px 5px rgb(from var(--site-dark-color) r g b / 0.5);
}
#site_header, h1, #site_footer {
    font-family: var(--site-interface-font-family);
}
h2, h3, h4 {
    font-family: var(--site-alt-font-family);
}
main {
    /* box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); */
    font-family: var(--site-content-font-family);
}