/* ####################################
   Colors & Background Styles: Base Rules

   - Critical Rendering Path: Required

   Notes:
   - Base colors (black, white) and general color controls.
   - A baseline treatment for all elements with a background class is set up here. If your color shades stay close to the lightness/darkness of shades in the standard Acora examples, this baseline is likely to provide good accessibility support for all your colors without any additional work. However if individual colors need customisation or special treatment, they can be updated in ColorsSite.css.
   - IMPORTANT NOTES ABOUT ACCESSIBILITY: Creating a generic accessible color palette framework is complex. The standard palettes supplied with the Acora core site are excellent but not perfect in every combination. Not every link:text:background color contrast combination meets accessibility standards out of the box without additional link styles in the default styleshet. And your site won't use the same colors! Particularly but not only for mid range tints, you will need to tweak the color palette and/or add additional link styles to create an accessible palette that content authors don't need to think about (much). Do your own tests for your site design.
   - Even with a fantastic accessible color pallete, use of link colors on background colors is unlikely to produce color contrast that is accessible compared to body text in the same block, so be sure to use additional link indicators such as underlines, icons, or other visual cues. Here are some great helper resources:
     * https://webaim.org/resources/contrastchecker/
     * https://webaim.org/resources/linkcontrastchecker/
     * Read this to understand why using color alone to design links is almost always a bad idea: https://webaim.org/blog/wcag-2-0-and-link-colors/
   ################################## */

/*
    Background Colors
    - Backgrounds are intended for blocks/boxes/columns but could be used on anything.
    - We define text, link, and other colors based on the backgrounds. So defining background color treatments is the basis on which your site is designed. 
*/

/*
    Baseline for everything with a background class:
    - General rules are a good starting point for many solid colors so adding them reduces code, but they don't work for everything so do your own tests with your palette.
    - Add [href] to anchor tags for extra specificity without needing !important rules.
    - Include direct targeting of anchor tags so you can create colored links, e.g. in lists and menus - <a href="/link" class="bg-dark-color-1">Link</a>
    - Items prefaces with [class*=bg-] catch nested background color blocks.
    - Remember boxes can be nested, so be sure to update the heading and link styles where required or desired.
    - Note: (To do:) Borders need work, the approach might change.
    - Some small things (e.g. link text decoration) are not strictly color settings but closely related to or dependent on color so they're included here.
*/

[class*=bg-] {
    --link-color: var(--site-link-color);
    --link-color-visited: var(--site-link-color-visited);
    --link-bg: var(--site-link-bg);
    --link-border-color: var(--site-link-border-color);
    --link-text-decoration: var(--site-link-text-decoration);
    --link-hover-color: var(--site-link-hover-color);
    --link-hover-bg: var(--site-link-hover-bg);
    --link-hover-border-color: var(--site-link-hover-border-color);
    --link-hover-text-decoration: var(--site-link-hover-text-decoration);
    --border-color: var(--site-border-color);
    --icon-color: var(--color-tint);
    --icon-duotone-color-primary: var(--color-tint);
    --icon-duotone-color-secondary: var(--color-tint);
    --icon-duotone-color-primary-opacity: var(--site-icon-duotone-color-primary-opacity);
    --icon-duotone-color-secondary-opacity: var(--site-icon-duotone-color-secondary-opacity);
    color: var(--color);
    background: var(--bg);
    border-color: var(--border-color);
}

    [class*=bg-] a:link,
    a[class*=bg-]:link {
        color: var(--site-link-color);
        background: var(--link-bg);
        border-color: var(--link-border-color);
        text-decoration: var(--link-text-decoration);
    }

    [class*=bg-] a:visited,
    a[class*=bg-]:visited {
        color: var(--site-link-color-visited);
    }

    [class*=bg-] a:hover,
    [class*=bg-] a:focus,
    a[class*=bg-]:hover,
    a[class*=bg-]:focus {
        color: var(--site-link-hover-color);
        background: var(--link-hover-bg);
        border-color: var(--link-hover-border-color);
        text-decoration: var(--link-hover-text-decoration);
    }

    [class*=bg-] .icon-duotone::before {
        color: var(--icon-duotone-color-primary);
    }

    [class*=bg-] .icon-duotone::after {
        color: var(--icon-duotone-color-secondary);
    }

    /* 
        Primary Color 
        - If the clor is referenced without a shade, it's this color.
        - This would usually be considered the "brand color" that all the shades are based on, e.g. it's like a spot color if there were no shades.
        - This should match one of your shades exactly. In many brands it's often the mid-dark or mid shade (so the baseline assumes mid-dark), but it varies. Make adjustments in ColorsSite.css if needed.
        - Without a CSS pre-processor there's no easy way to share code between this and the corresponding shade right now, so we treat it separately. Just copy the code.
    */

    [class*=bg-color-] {
        --color: var(--site-text-color-bright);
        --link-color: var(--site-link-color-bright);
        --link-color-visited: var(--site-link-color-visited-bright);
        --link-bg: var(--site-link-bg-bright);
        --link-border-color: var(--site-link-border-color-bright);
        --link-text-decoration: var(--site-link-text-decoration-bright);
        --link-hover-color: var(--site-link-hover-color-bright);
        --link-hover-bg: var(--site-link-hover-bg-bright);
        --link-hover-border-color: var(--site-link-hover-border-color-bright);
        --link-hover-text-decoration: var(--site-link-hover-text-decoration-bright);
    }

        [class*=bg-color-] a:link,
        a[class*=bg-color-]:link,
        [class*=bg-] [class*=bg-color-] a:link {
            color: var(--link-color);
            background: var(--link-bg);
            border-color: var(--link-border-color);
            text-decoration: var(--link-text-decoration);
        }

        [class*=bg-color-] a:visited,
        a[class*=bg-color-]:visited,
        [class*=bg-] [class*=bg-color-] a:visited{
            color: var(--link-color-visited);
        }

        [class*=bg-color-] a:hover,
        [class*=bg-color-] a:focus,
        a[class*=bg-color-]:hover,
        a[class*=bg-color-]:focus,
        [class*=bg-] [class*=bg-color-] a:hover,
        [class*=bg-] [class*=bg-color-] a:focus {
            color: var(--link-hover-color);
            background: var(--link-hover-bg);
            border-color: var(--link-hover-border-color);
            text-decoration: var(--link-hover-text-decoration);
        }

        [class*=bg-color-] h1,
        [class*=bg-color-] h2,
        [class*=bg-color-] h3,
        [class*=bg-color-] h4,
        [class*=bg-color-] h5,
        [class*=bg-color-] h6,
        [class*=bg-color-] table caption,
        [class*=bg-] [class*=bg-color-] h1,
        [class*=bg-] [class*=bg-color-] h2,
        [class*=bg-] [class*=bg-color-] h3,
        [class*=bg-] [class*=bg-color-] h4,
        [class*=bg-] [class*=bg-color-] h5,
        [class*=bg-] [class*=bg-color-] h6,
        [class*=bg-] [class*=bg-color-] table caption {
            color: inherit;
        }

        [class*=bg-color-] .color-tint,
        [class*=bg-] [class*=bg-color-] .color-tint {
            color: var(--color-tint);
        }

    /* 
        Light colors 
        - Contrast is usually adequate when using black text.
    */

    [class*=bg-lightest-] {
        --color: var(--site-text-color-dark);
    }

        [class*=bg-lightest-] a:link,
        a[class*=bg-lightest-]:link,
        [class*=bg-] [class*=bg-lightest-] a:link {
            color: var(--link-color);
            background: var(--link-bg);
            border-color: var(--link-border-color);
            text-decoration: var(--link-text-decoration);
        }

        [class*=bg-lightest-] a:visited,
        a[class*=bg-lightest-]:visited,
        [class*=bg-] [class*=bg-lightest-] a:visited {
            color: var(--link-color-visited);
        }

        [class*=bg-lightest-] a:hover,
        [class*=bg-lightest-] a:focus,
        a[class*=bg-lightest-]:hover,
        a[class*=bg-lightest-]:focus,
        [class*=bg-] [class*=bg-lightest-] a:hover,
        [class*=bg-] [class*=bg-lightest-] a:focus {
            color: var(--link-hover-color);
            background: var(--link-hover-bg);
            border-color: var(--link-hover-border-color);
            text-decoration: var(--link-hover-text-decoration);
        }

        [class*=bg-lightest-] h1,
        [class*=bg-lightest-] h2,
        [class*=bg-lightest-] h3,
        [class*=bg-lightest-] h4,
        [class*=bg-lightest-] h5,
        [class*=bg-lightest-] h6,
        [class*=bg-lightest-] table caption,
        [class*=bg-] [class*=bg-lightest-] h1,
        [class*=bg-] [class*=bg-lightest-] h2,
        [class*=bg-] [class*=bg-lightest-] h3,
        [class*=bg-] [class*=bg-lightest-] h4,
        [class*=bg-] [class*=bg-lightest-] h5,
        [class*=bg-] [class*=bg-lightest-] h6,
        [class*=bg-] [class*=bg-lightest-] table caption {
        }

        [class*=bg-lightest-] .color-tint,
        [class*=bg-] [class*=bg-lightest-] .color-tint {
            color: var(--color-tint);
        }

    [class*=bg-lighter-] {
        --color: var(--site-text-color-dark);
    }

        [class*=bg-lighter-] a:link,
        a[class*=bg-lighter-]:link,
        [class*=bg-] [class*=bg-lighter-] a:link {
            color: var(--link-color);
            background: var(--link-bg);
            border-color: var(--link-border-color);
            text-decoration: var(--link-text-decoration);
        }

        [class*=bg-lighter-] a:visited,
        a[class*=bg-lighter-]:visited,
        [class*=bg-] [class*=bg-lighter-] a:visited {
            color: var(--link-color-visited);
        }

        [class*=bg-lighter-] a:hover,
        [class*=bg-lighter-] a:focus,
        a[class*=bg-lighter-]:hover,
        a[class*=bg-lighter-]:focus,
        [class*=bg-] [class*=bg-lighter-] a:hover,
        [class*=bg-] [class*=bg-lighter-] a:focus {
            color: var(--link-hover-color);
            background: var(--link-hover-bg);
            border-color: var(--link-hover-border-color);
            text-decoration: var(--link-hover-text-decoration);
        }

        [class*=bg-lighter-] h1,
        [class*=bg-lighter-] h2,
        [class*=bg-lighter-] h3,
        [class*=bg-lighter-] h4,
        [class*=bg-lighter-] h5,
        [class*=bg-lighter-] h6,
        [class*=bg-lighter-] table caption,
        [class*=bg-] [class*=bg-lighter-] h1,
        [class*=bg-] [class*=bg-lighter-] h2,
        [class*=bg-] [class*=bg-lighter-] h3,
        [class*=bg-] [class*=bg-lighter-] h4,
        [class*=bg-] [class*=bg-lighter-] h5,
        [class*=bg-] [class*=bg-lighter-] h6,
        [class*=bg-] [class*=bg-lighter-] table caption {
        }

        [class*=bg-lighter-] .color-tint,
        [class*=bg-] [class*=bg-lighter-] .color-tint {
            color: var(--color-tint);
        }

    [class*=bg-light-] {
        --color: var(--site-text-color-dark);
        --link-color: var(--site-link-color);
        --link-color-visited: var(--site-link-color-visited);
        --link-bg: var(--site-link-bg);
        --link-border-color: var(--site-link-border-color);
        --link-text-decoration: var(--site-link-text-decoration);
        --link-hover-color: var(--site-link-hover-color);
        --link-hover-bg: var(--site-link-hover-bg);
        --link-hover-border-color: var(--site-link-hover-border-color);
        --link-hover-text-decoration: var(--site-link-hover-text-decoration);
    }

        [class*=bg-light-] a:link,
        a[class*=bg-light-]:link,
        [class*=bg-] [class*=bg-light-] a:link {
            color: var(--link-color);
            background: var(--link-bg);
            border-color: var(--link-border-color);
            text-decoration: var(--link-text-decoration);
        }

        [class*=bg-light-] a:visited,
        a[class*=bg-light-]:visited,
        [class*=bg-] [class*=bg-light-] a:visited {
            color: var(--link-color-visited);
        }

        [class*=bg-light-] a:hover,
        [class*=bg-light-] a:focus,
        a[class*=bg-light-]:hover,
        a[class*=bg-light-]:focus,
        [class*=bg-] [class*=bg-light-] a:hover,
        [class*=bg-] [class*=bg-light-] a:focus {
            color: var(--link-hover-color);
            background: var(--link-hover-bg);
            border-color: var(--link-hover-border-color);
            text-decoration: var(--link-hover-text-decoration);
        }

        [class*=bg-light-] h1,
        [class*=bg-light-] h2,
        [class*=bg-light-] h3,
        [class*=bg-light-] h4,
        [class*=bg-light-] h5,
        [class*=bg-light-] h6,
        [class*=bg-light-] table caption,
        [class*=bg-] [class*=bg-light-] h1,
        [class*=bg-] [class*=bg-light-] h2,
        [class*=bg-] [class*=bg-light-] h3,
        [class*=bg-] [class*=bg-light-] h4,
        [class*=bg-] [class*=bg-light-] h5,
        [class*=bg-] [class*=bg-light-] h6,
        [class*=bg-] [class*=bg-light-] table caption {
        }

        [class*=bg-light-] .color-tint,
        [class*=bg-] [class*=bg-light-] .color-tint {
            color: var(--color-tint);
        }

    /* 
        Penumbra (mid tone) colors 
        - Contrast varies... Check your design.
    */

    [class*=bg-mid-] {
        --color: var(--site-text-color-dark);
        --link-color: var(--site-link-color-dark);
        --link-color-visited: var(--site-link-color-visited-dark);
        --link-bg: var(--site-link-bg-dark);
        --link-border-color: var(--site-link-border-color-dark);
        --link-text-decoration: var(--site-link-text-decoration-dark);
        --link-hover-color: var(--site-link-hover-color-dark);
        --link-hover-bg: var(--site-link-hover-bg-dark);
        --link-hover-border-color: var(--site-link-hover-border-color-dark);
        --link-hover-text-decoration: var(--site-link-hover-text-decoration-dark);
    }

        [class*=bg-mid-] a:link,
        a[class*=mid-]:link,
        [class*=bg-] [class*=bg-mid-] a:link {
            color: var(--link-color);
            background: var(--link-bg);
            border-color: var(--link-border-color);
            text-decoration: var(--link-text-decoration);
        }

        [class*=bg-mid-] a:visited,
        a[class*=mid-]:visited,
        [class*=bg-] [class*=bg-mid-] a:visited {
            color: var(--link-color-visited);
        }

        [class*=bg-mid-] a:hover,
        [class*=bg-mid-] a:focus,
        a[class*=mid-]:hover,
        a[class*=mid-]:focus,
        [class*=bg-] [class*=bg-mid-] a:hover,
        [class*=bg-] [class*=bg-mid-] a:focus {
            color: var(--link-hover-color);
            background: var(--link-hover-bg);
            border-color: var(--link-hover-border-color);
            text-decoration: var(--link-hover-text-decoration);
        }

        [class*=bg-mid-] h1,
        [class*=bg-mid-] h2,
        [class*=bg-mid-] h3,
        [class*=bg-mid-] h4,
        [class*=bg-mid-] h5,
        [class*=bg-mid-] h6,
        [class*=bg-mid-] table caption,
        [class*=bg-] [class*=bg-mid-] h1,
        [class*=bg-] [class*=bg-mid-] h2,
        [class*=bg-] [class*=bg-mid-] h3,
        [class*=bg-] [class*=bg-mid-] h4,
        [class*=bg-] [class*=bg-mid-] h5,
        [class*=bg-] [class*=bg-mid-] h6,
        [class*=bg-] [class*=bg-mid-] table caption {
            color: inherit;
        }

        [class*=bg-mid-] .color-tint,
        [class*=bg-] [class*=bg-mid-] .color-tint {
            color: var(--color-tint);
        }

    [class*=bg-mid-light-] {
        /* Make sure bg-mid-light- and bg-mid-dark- are after bg-mid- to avoid overrides. */
        --color: var(--site-text-color-dark);
        --link-color: var(--site-link-color-dark);
        --link-color-visited: var(--site-link-color-visited-dark);
        --link-bg: var(--site-link-bg-dark);
        --link-border-color: var(--site-link-border-color-dark);
        --link-text-decoration: var(--site-link-text-decoration-dark);
        --link-hover-color: var(--site-link-hover-color-dark);
        --link-hover-bg: var(--site-link-hover-bg-dark);
        --link-hover-border-color: var(--site-link-hover-border-color-dark);
        --link-hover-text-decoration: var(--site-link-hover-text-decoration-dark);
    }

        [class*=bg-mid-light-] a:link,
        a[class*=mid-light-]:link,
        [class*=bg-] [class*=bg-mid-light-] a:link {
            color: var(--link-color);
            background: var(--link-bg);
            border-color: var(--link-border-color);
            text-decoration: var(--link-text-decoration);
        }

        [class*=bg-mid-light-] a:visited,
        a[class*=mid-light-]:visited,
        [class*=bg-] [class*=bg-mid-light-] a:visited {
            color: var(--link-color-visited);
        }

        [class*=bg-mid-light-] a:hover,
        [class*=bg-mid-light-] a:focus,
        a[class*=mid-light-]:hover,
        a[class*=mid-light-]:focus,
        [class*=bg-] [class*=bg-mid-light-] a:hover,
        [class*=bg-] [class*=bg-mid-light-] a:focus {
            color: var(--link-hover-color);
            background: var(--link-hover-bg);
            border-color: var(--link-hover-border-color);
            text-decoration: var(--link-hover-text-decoration);
        }

        [class*=bg-mid-light-] h1,
        [class*=bg-mid-light-] h2,
        [class*=bg-mid-light-] h3,
        [class*=bg-mid-light-] h4,
        [class*=bg-mid-light-] h5,
        [class*=bg-mid-light-] h6,
        [class*=bg-mid-light-] table caption,
        [class*=bg-] [class*=bg-mid-light-] h1,
        [class*=bg-] [class*=bg-mid-light-] h2,
        [class*=bg-] [class*=bg-mid-light-] h3,
        [class*=bg-] [class*=bg-mid-light-] h4,
        [class*=bg-] [class*=bg-mid-light-] h5,
        [class*=bg-] [class*=bg-mid-light-] h6,
        [class*=bg-] [class*=bg-mid-light-] table caption {
            color: inherit;
        }

        [class*=bg-mid-light-] .color-tint,
        [class*=bg-] [class*=bg-mid-light-] .color-tint {
            color: var(--color-tint);
        }

    [class*=bg-mid-dark-] {
        /* Make sure bg-mid-light- and bg-mid-dark- are after bg-mid- to avoid overrides. */
        --color: var(--site-text-color-bright);
        --link-color: var(--site-link-color-bright);
        --link-color-visited: var(--site-link-color-visited-bright);
        --link-bg: var(--site-link-bg-bright);
        --link-border-color: var(--site-link-border-color-bright);
        --link-text-decoration: var(--site-link-text-decoration-bright);
        --link-hover-color: var(--site-link-hover-color-bright);
        --link-hover-bg: var(--site-link-hover-bg-bright);
        --link-hover-border-color: var(--site-link-hover-border-color-bright);
        --link-hover-text-decoration: var(--site-link-hover-text-decoration-bright);
    }

        [class*=bg-mid-dark-] a:link,
        a[class*=mid-dark-]:link,
        [class*=bg-] [class*=bg-mid-dark-] a:link {
            color: var(--link-color);
            background: var(--link-bg);
            border-color: var(--link-border-color);
            text-decoration: var(--link-text-decoration);
        }

        [class*=bg-mid-dark-] a:visited,
        a[class*=mid-dark-]:visited,
        [class*=bg-] [class*=bg-mid-dark-] a:visited {
            color: var(--link-color-visited);
        }

        [class*=bg-mid-dark-] a:hover,
        [class*=bg-mid-dark-] a:focus,
        a[class*=mid-dark-]:hover,
        a[class*=mid-dark-]:focus,
        [class*=bg-] [class*=bg-mid-dark-] a:hover,
        [class*=bg-] [class*=bg-mid-dark-] a:focus {
            color: var(--link-hover-color);
            background: var(--link-hover-bg);
            border-color: var(--link-hover-border-color);
            text-decoration: var(--link-hover-text-decoration);
        }

        [class*=bg-mid-dark-] h1,
        [class*=bg-mid-dark-] h2,
        [class*=bg-mid-dark-] h3,
        [class*=bg-mid-dark-] h4,
        [class*=bg-mid-dark-] h5,
        [class*=bg-mid-dark-] h6,
        [class*=bg-mid-dark-] table caption,
        [class*=bg-] [class*=bg-mid-dark-] h1,
        [class*=bg-] [class*=bg-mid-dark-] h2,
        [class*=bg-] [class*=bg-mid-dark-] h3,
        [class*=bg-] [class*=bg-mid-dark-] h4,
        [class*=bg-] [class*=bg-mid-dark-] h5,
        [class*=bg-] [class*=bg-mid-dark-] h6,
        [class*=bg-] [class*=bg-mid-dark-] table caption {
            color: inherit;
        }

        [class*=bg-mid-dark-] .color-tint,
        [class*=bg-] [class*=bg-mid-dark-] .color-tint {
            color: var(--color-tint);
        }

        [class*=bg-mid-dark-] .cards .item,
        [class*=bg-] [class*=bg-mid-dark-] .cards .item {
            background: var(--site-color-white);
        }

    /* 
        Dark  colors
        - Contrast is usually adequate when using white text.
    */

    [class*=bg-dark-] {
        --color: var(--site-text-color-bright);
        --link-color: var(--site-link-color-bright);
        --link-color-visited: var(--site-link-color-visited-bright);
        --link-bg: var(--site-link-bg-bright);
        --link-border-color: var(--site-link-border-color-bright);
        --link-text-decoration: var(--site-link-text-decoration-bright);
        --link-hover-color: var(--site-link-hover-color-bright);
        --link-hover-bg: var(--site-link-hover-bg-bright);
        --link-hover-border-color: var(--site-link-hover-border-color-bright);
        --link-hover-text-decoration: var(--site-link-hover-text-decoration-bright);
    }

        [class*=bg-dark-] a:link,
        a[class*=bg-dark-]:link,
        [class*=bg-] [class*=bg-dark-] a:link {
            color: var(--link-color);
            background: var(--link-bg);
            border-color: var(--link-border-color);
            text-decoration: var(--link-text-decoration);
        }

        [class*=bg-dark-] a:visited,
        a[class*=bg-dark-]:visited,
        [class*=bg-] [class*=bg-dark-] a:visited {
            color: var(--link-color-visited);
        }

        [class*=bg-dark-] a:hover,
        [class*=bg-dark-] a:focus,
        a[class*=bg-dark-]:hover,
        a[class*=bg-dark-]:focus,
        [class*=bg-] [class*=bg-dark-] a:hover,
        [class*=bg-] [class*=bg-dark-] a:focus {
            color: var(--link-hover-color);
            background: var(--link-hover-bg);
            border-color: var(--link-hover-border-color);
            text-decoration: var(--link-hover-text-decoration);
        }

        [class*=bg-dark-] h1,
        [class*=bg-dark-] h2,
        [class*=bg-dark-] h3,
        [class*=bg-dark-] h4,
        [class*=bg-dark-] h5,
        [class*=bg-dark-] h6,
        [class*=bg-dark-] table caption,
        [class*=bg-] [class*=bg-dark-] h1,
        [class*=bg-] [class*=bg-dark-] h2,
        [class*=bg-] [class*=bg-dark-] h3,
        [class*=bg-] [class*=bg-dark-] h4,
        [class*=bg-] [class*=bg-dark-] h5,
        [class*=bg-] [class*=bg-dark-] h6,
        [class*=bg-] [class*=bg-dark-] table caption {
            color: inherit;
        }

        [class*=bg-dark-] .color-tint,
        [class*=bg-] [class*=bg-dark-] .color-tint {
            color: var(--color-tint);
        }

        [class*=bg-dark-] .cards .item,
        [class*=bg-] [class*=bg-dark-] .cards .item {
            background: var(--site-color-white);
        }

    [class*=bg-darker-] {
        --color: var(--site-text-color-bright);
        --link-color: var(--site-link-color-bright);
        --link-color-visited: var(--site-link-color-visited-bright);
        --link-bg: var(--site-link-bg-bright);
        --link-border-color: var(--site-link-border-color-bright);
        --link-text-decoration: var(--site-link-text-decoration-bright);
        --link-hover-color: var(--site-link-hover-color-bright);
        --link-hover-bg: var(--site-link-hover-bg-bright);
        --link-hover-border-color: var(--site-link-hover-border-color-bright);
        --link-hover-text-decoration: var(--site-link-hover-text-decoration-bright);
    }

        [class*=bg-darker-] a:link,
        a[class*=bg-darker-]:link,
        [class*=bg-] [class*=bg-darker-] a:link {
            color: var(--link-color);
            background: var(--link-bg);
            border-color: var(--link-border-color);
            text-decoration: var(--link-text-decoration);
        }

        [class*=bg-darker-] a:visited,
        a[class*=bg-darker-]:visited,
        [class*=bg-] [class*=bg-darker-] a:visited {
            color: var(--link-color-visited);
        }

        [class*=bg-darker-] a:hover,
        [class*=bg-darker-] a:focus,
        a[class*=bg-darker-]:hover,
        a[class*=bg-darker-]:focus,
        [class*=bg-] [class*=bg-darker-] a:hover,
        [class*=bg-] [class*=bg-lightest-] a:focus {
            color: var(--link-hover-color);
            background: var(--link-hover-bg);
            border-color: var(--link-hover-border-color);
            text-decoration: var(--link-hover-text-decoration);
        }

        [class*=bg-darker-] h1,
        [class*=bg-darker-] h2,
        [class*=bg-darker-] h3,
        [class*=bg-darker-] h4,
        [class*=bg-darker-] h5,
        [class*=bg-darker-] h6,
        [class*=bg-darker-] table caption,
        [class*=bg-] [class*=bg-darker-] h1,
        [class*=bg-] [class*=bg-darker-] h2,
        [class*=bg-] [class*=bg-darker-] h3,
        [class*=bg-] [class*=bg-darker-] h4,
        [class*=bg-] [class*=bg-darker-] h5,
        [class*=bg-] [class*=bg-darker-] h6,
        [class*=bg-] [class*=bg-darker-] table caption {
            color: inherit;
        }

        [class*=bg-darker-] .color-tint,
        [class*=bg-] [class*=bg-darker-] .color-tint {
            color: var(--color-tint);
        }

        [class*=bg-darker-] .cards .item,
        [class*=bg-] [class*=bg-darker-] .cards .item {
            background: var(--site-color-white);
        }

    [class*=bg-darkest-] {
        --color: var(--site-text-color-bright);
        --link-color: var(--site-link-color-bright);
        --link-color-visited: var(--site-link-color-visited-bright);
        --link-bg: var(--site-link-bg-bright);
        --link-border-color: var(--site-link-border-color-bright);
        --link-text-decoration: var(--site-link-text-decoration-bright);
        --link-hover-color: var(--site-link-hover-color-bright);
        --link-hover-bg: var(--site-link-hover-bg-bright);
        --link-hover-border-color: var(--site-link-hover-border-color-bright);
        --link-hover-text-decoration: var(--site-link-hover-text-decoration-bright);
    }

        [class*=bg-darkest-] a:link,
        a[class*=bg-darkest-]:link,
        [class*=bg-] [class*=bg-darkest-] a:link {
            color: var(--link-color);
            background: var(--link-bg);
            border-color: var(--link-border-color);
            text-decoration: var(--link-text-decoration);
        }

        [class*=bg-darkest-] a:visited,
        a[class*=bg-darkest-]:visited,
        [class*=bg-] [class*=bg-darkest-] a:visited {
            color: var(--link-color-visited);
        }

        [class*=bg-darkest-] a:hover,
        [class*=bg-darkest-] a:focus,
        a[class*=bg-darkest-]:focus,
        a[class*=bg-darkest-]:hover,
        [class*=bg-] [class*=bg-darkest-] a:hover,
        [class*=bg-] [class*=bg-darkest-] a:focus {
            color: var(--link-hover-color);
            background: var(--link-hover-bg);
            border-color: var(--link-hover-border-color);
            text-decoration: var(--link-hover-text-decoration);
        }

        [class*=bg-darkest-] h1,
        [class*=bg-darkest-] h2,
        [class*=bg-darkest-] h3,
        [class*=bg-darkest-] h4,
        [class*=bg-darkest-] h5,
        [class*=bg-darkest-] h6,
        [class*=bg-darkest-] table caption,
        [class*=bg-] [class*=bg-darkest-] h1,
        [class*=bg-] [class*=bg-darkest-] h2,
        [class*=bg-] [class*=bg-darkest-] h3,
        [class*=bg-] [class*=bg-darkest-] h4,
        [class*=bg-] [class*=bg-darkest-] h5,
        [class*=bg-] [class*=bg-darkest-] h6,
        [class*=bg-] [class*=bg-darkest-] table caption {
            color: inherit;
        }

        [class*=bg-darkest-] .color-tint,
        [class*=bg-] [class*=bg-darkest-] .color-tint {
            color: var(--color-tint);
        }

        [class*=bg-darkest-] .cards .item,
        [class*=bg-] [class*=bg-darkest-] .cards .item {
            background: var(--site-color-white);
        }

/* 
    Black & White
*/

.bg-color-black {
    --color: var(--site-text-color-bright);
    --bg: var(--site-color-black);
    --link-color: var(--site-link-color-bright);
    --link-color-visited: var(--site-link-color-visited-bright);
    --link-bg: var(--site-link-bg-bright);
    --link-border-color: var(--site-link-border-color-bright);
    --link-text-decoration: var(--site-link-text-decoration-bright);
    --link-hover-color: var(--site-link-hover-color-bright);
    --link-hover-bg: var(--site-link-hover-bg-bright);
    --link-hover-border-color: var(--site-link-hover-border-color-bright);
    --link-hover-text-decoration: var(--site-link-hover-text-decoration-bright);
}

    .bg-color-black a:link,
    a.bg-color-black:link,
    [class*=bg-] .bg-color-black a:link {
        color: var(--link-color);
        background: var(--link-bg);
        border-color: var(--link-border-color);
        text-decoration: var(--link-text-decoration);
    }

    .bg-color-black a:visited,
    a.bg-color-black:visited,
    [class*=bg-] .bg-color-black a:visited {
        color: var(--link-color-visited);
    }

    .bg-color-black a:hover,
    .bg-color-black a:focus,
    a.bg-color-black:focus,
    a.bg-color-black:hover,
    [class*=bg-] .bg-color-black a:hover,
    [class*=bg-] .bg-color-black a:focus {
        color: var(--link-hover-color);
        background: var(--link-hover-bg);
        border-color: var(--link-hover-border-color);
        text-decoration: var(--link-hover-text-decoration);
    }

    .bg-color-black h1,
    .bg-color-black h2,
    .bg-color-black h3,
    .bg-color-black h4,
    .bg-color-black h5,
    .bg-color-black h6,
    .bg-color-black table caption,
    [class*=bg-] .bg-color-black h1,
    [class*=bg-] .bg-color-black h2,
    [class*=bg-] .bg-color-black h3,
    [class*=bg-] .bg-color-black h4,
    [class*=bg-] .bg-color-black h5,
    [class*=bg-] .bg-color-black h6,
    [class*=bg-] .bg-color-black table caption {
        color: inherit;
    }

    .bg-color-black .cards .item,
    [class*=bg-] .bg-color-black .cards .item {
        background: var(--site-color-white);
    }

.bg-color-white {
    --color: var(--site-text-color);
    --bg: var(--site-color-white);
    --link-color: var(--site-link-color);
    --link-color-visited: var(--site-link-color-visited);
    --link-bg: var(--site-link-bg);
    --link-border-color: var(--site-link-border-color);
    --link-text-decoration: var(--site-link-text-decoration);
    --link-hover-color: var(--site-link-hover-color);
    --link-hover-bg: var(--site-link-hover-bg);
    --link-hover-border-color: var(--site-link-hover-border-color);
    --link-hover-text-decoration: var(--site-link-hover-text-decoration);
}

    .bg-color-white a:link,
    a.bg-color-white:link,
    [class*=bg-] .bg-color-white a:link {
        color: var(--link-color);
        background: var(--link-bg);
        border-color: var(--link-border-color);
        text-decoration: var(--link-text-decoration);
    }

    .bg-color-white a:visited,
    a.bg-color-white:visited,
    [class*=bg-] .bg-color-white a:visited {
        color: var(--link-color-visited);
    }

    .bg-color-white a:hover,
    a.bg-color-white:hover,
    .bg-color-white a:focus,
    a.bg-color-white:focus,
    [class*=bg-] .bg-color-white a:hover,
    [class*=bg-] .bg-color-white a:focus {
        color: var(--link-hover-color);
        background: var(--link-hover-bg);
        border-color: var(--link-hover-border-color);
    }

    .bg-color-white h1,
    .bg-color-white h2,
    .bg-color-white h3,
    .bg-color-white h4,
    .bg-color-white h5,
    .bg-color-white h6,
    [class*=bg-] .bg-color-white table caption,
    [class*=bg-] .bg-color-white h1,
    [class*=bg-] .bg-color-white h2,
    [class*=bg-] .bg-color-white h3,
    [class*=bg-] .bg-color-white h4,
    [class*=bg-] .bg-color-white h5,
    [class*=bg-] .bg-color-white h6,
    [class*=bg-] .bg-color-white table caption {
    }

/* 
    Lighten and Darken Backgrounds
    - E.g. when a box is inside another box, or when you want hover or other special effects.
    - By default we use black and white tones, but the shading colours might need tweaking for use in different scenarios.
*/

.bg-lighten-less {--bg: var(--site-lighten-less);}
.bg-lighten {--bg: var(--site-lighten);}
.bg-lighten-more {--bg: var(--site-lighten-more);}

.bg-darken-less {--bg: var(--site-darken-less);}
.bg-darken {--bg:var(--site-darken);}
.bg-darken-more {--bg: var(--site-darken-more);}

/*
    Border Colors
*/

.border-light {--border-color: var(--site-border-color-bright); border-color: var(--border-color);}
.border, .border-mid {--border-color: var(--site-border-color-mid); border-color: var(--border-color);}
.border-dark {--border-color: var(--site-border-color-dark); border-color: var(--border-color);}

.border-white {border-color: #fff !important;}
.border-black::after {border-color: #000 !important;}

/*
    Text & Icon Colors
    - Shouldn't be used often but when they are, they should override everything except local !important styles.
*/

.color-white {--color: var(--site-color-white) !important; color: var(--site-color-white) !important;}
.color-black {--color: var(--site-color-black) !important; color: var(--site-color-clack) !important;}
.color-body-text {--color: var(--site-text-color) !important; color: var(--site-text-color) !important;}