/* ####################################
   Colors & Background Styles: Site Colors

   - Critical Rendering Path: Required (if used)

   Notes:
   - Site theme colors including UI, Colors 1-7, grey, and gradient backgrounds
   - Variables can be redefined using corresponding [class*=bg-...] sections in ColorsBase.css, or --site variables.
   - If you want a very simple site color palette, consider excluding this file and using only spot colors.
   - If re-defining link colors, you might need to include all 9 link settings. Be sure to check.
   - Useful settings include but aren't limited to the ones below. Maintain the order for easier code management.
    
    --color
    --color-tint
    --bg
    --border-color
    --border-color-dark
    --border-color-bright
    --icon-color (single tone)
    --icon-duotone-color-primary
    --icon-duotone-color-primary-opacity
    --icon-duotone-color-secondary
    --icon-duotone-color-secondary-opacity
    --link-color
    --link-color-visited
    --link-bg
    --link-border-color
    --link-text-decoration
    --link-hover-color
    --link-hover-bg
    --link-hover-border-color
    --link-hover-text-decoration
    -- and any --site variables, but ideally only color should be handled here. Perhaps you could consider:
    --site-lighten and --site-lighten-less, --site-lighten-more
    --site-darken and --site-darken-less, --site-darken-more

   ################################## */

/* 
    UI Colors
*/

.bg-color-uii,
.bg-lightest-color-ui,
.bg-lighter-color-ui,
.bg-light-color-ui,
.bg-mid-light-color-ui,
.bg-mid-color-ui,
.bg-mid-dark-color-ui,
.bg-dark-color-ui,
.bg-darker-color-ui,
.bg-darkest-color-ui {
    /* Tint the extended border color options. */
    --border-color-dark: var(--site-color-1-darker);
    --border-color-bright: var(--site-color-1-lighter);
}

.bg-color-ui {
    --color: var(--site-color-ui-contrast-bright);
    --color-tint: var(--site-color-ui-contrast-bright-tint);
    --bg: var(--site-color-ui);
    --border-color: var(--site-color-ui-dark);
    --icon-color: var(--site-color-ui-contrast-bright-tint);
}

.bg-lightest-color-ui {
    --color: var(--site-color-ui-contrast-dark);
    --color-tint: var(--site-color-ui-contrast-dark-tint);
    --bg: var(--site-color-ui-lightest);
    --border-color: var(--site-color-ui-light);
    --icon-color: var(--site-color-ui-contrast-dark-tint);
}

.bg-lighter-color-ui {
    --color: var(--site-color-ui-contrast-dark);
    --color-tint: var(--site-color-ui-contrast-dark-tint);
    --bg: var(--site-color-ui-lighter);
    --border-color: var(--site-color-ui-mid-light);
    --icon-color: var(--site-color-ui-contrast-dark-tint);
}

.bg-light-color-ui {
    --color: var(--site-color-ui-contrast-dark);
    --color-tint: var(--site-color-ui-contrast-dark-tint);
    --bg: var(--site-color-ui-light);
    --border-color: var(--site-color-ui-mid);
    --icon-color: var(--site-color-ui-contrast-dark-tint);
}

.bg-mid-light-color-ui {
    --color: var(--site-color-ui-contrast-dark);
    --color-tint: var(--site-color-ui-contrast-dark-tint);
    --bg: var(--site-color-ui-mid-light);
    --border-color: var(--site-color-ui-mid-dark);
    --icon-color: var(--site-color-ui-contrast-dark-tint);
}

.bg-mid-color-ui {
    --color: var(--site-color-ui-contrast-bright);
    --color-tint: var(--site-color-ui-contrast-bright-tint);
    --bg: var(--site-color-ui-mid);
    --border-color: var(--site-color-ui-dark);
    --icon-color: var(--site-color-ui-contrast-bright-tint);
    --link-color: var(--site-link-color-bright); /* This differs to other colors in the example code, only because Acora's example browns are special. */
}

.bg-mid-dark-color-ui {
    --color: var(--site-color-ui-contrast-bright);
    --color-tint: var(--site-color-ui-contrast-bright-tint);
    --bg: var(--site-color-ui-mid-dark);
    --icon-color: var(--site-color-ui-contrast-bright-tint);
}

.bg-dark-color-ui {
    --color: var(--site-color-ui-contrast-bright);
    --color-tint: var(--site-color-ui-contrast-bright-tint);
    --bg: var(--site-color-ui-dark);
    --icon-color: var(--site-color-ui-contrast-bright-tint);
}

.bg-darker-color-ui {
    --color: var(--site-color-ui-contrast-bright);
    --color-tint: var(--site-color-ui-contrast-bright-tint);
    --bg: var(--site-color-ui-darker);
    --icon-color: var(--site-color-ui-contrast-bright-tint);
}

.bg-darkest-color-ui {
    --color: var(--site-color-ui-contrast-bright);
    --color-tint: var(--site-color-ui-contrast-bright-tint);
    --bg: var(--site-color-ui-darkest);
    --icon-color: var(--site-color-ui-contrast-bright-tint);
}

/* 
    Color #1
*/

.bg-color-1,
.bg-lightest-color-1,
.bg-lighter-color-1,
.bg-light-color-1,
.bg-mid-light-color-1,
.bg-mid-color-1,
.bg-mid-dark-color-1,
.bg-dark-color-1,
.bg-darker-color-1,
.bg-darkest-color-1 {
    /* Tint the extended border color options. */
    --border-color-dark: var(--site-color-1-darker);
    --border-color-bright: var(--site-color-1-lighter);
}

.bg-color-1 {
    --color: var(--site-color-1-contrast-bright);
    --color-tint: var(--site-color-1-contrast-bright-tint);
    --bg: var(--site-spot-color-1);
    --border-color: var(--site-color-1-darker);
}

.bg-lightest-color-1 {
    --color: var(--site-color-1-contrast-dark);
    --color-tint: var(--site-color-1-contrast-dark-tint);
    --bg: var(--site-color-1-lightest);
    --border-color: var(--site-color-1-mid-light);
}

.bg-lighter-color-1 {
    --color: var(--site-color-1-contrast-dark);
    --color-tint: var(--site-color-1-contrast-dark-tint);
    --bg: var(--site-color-1-lighter);
    --border-color: var(--site-color-1-mid-light);
}

.bg-light-color-1 {
    --color: var(--site-color-1-contrast-dark);
    --color-tint: var(--site-color-1-contrast-dark-tint);
    --bg: var(--site-color-1-light);
    --border-color: var(--site-color-1-mid-dark);
}

.bg-mid-light-color-1 {
    --color: var(--site-color-1-contrast-dark);
    --color-tint: var(--site-color-1-contrast-dark-tint);
    --bg: var(--site-color-1-mid-light);
    --border-color: var(--site-color-1-mid-dark);
}

.bg-mid-color-1 {
    --color: var(--site-color-1-contrast-bright);
    --color-tint: var(--site-color-1-contrast-bright-tint);
    --bg: var(--site-color-1-mid);
    --border-color: var(--site-color-1-darker);
    --link-color: var(--site-link-color-bright); /* This differs to other colors in the example code, only because Acora's example browns are special. */
}

.bg-mid-dark-color-1 {
    --color: var(--site-color-1-contrast-bright);
    --color-tint: var(--site-color-1-contrast-bright-tint);
    --bg: var(--site-color-1-mid-dark);
    --border-color: var(--site-color-1-darker);
}

.bg-dark-color-1 {
    --color: var(--site-color-1-contrast-bright);
    --color-tint: var(--site-color-1-contrast-bright-tint);
    --bg: var(--site-color-1-dark);
    --border-color: var(--border-color-darkest);
}

.bg-darker-color-1 {
    --color: var(--site-color-1-contrast-bright);
    --color-tint: var(--site-color-1-contrast-bright-tint);
    --bg: var(--site-color-1-darker);
    --border-color: var(--border-color-darkest);
}

.bg-darkest-color-1 {
    --color: var(--site-color-1-contrast-bright);
    --color-tint: var(--site-color-1-contrast-bright-tint);
    --bg: var(--site-color-1-darkest);
    --border-color: var(--border-color-darkest);
}

/* Color #2 */

.bg-color-2,
.bg-lightest-color-2,
.bg-lighter-color-2,
.bg-light-color-2,
.bg-mid-light-color-2,
.bg-mid-color-2,
.bg-mid-dark-color-2,
.bg-dark-color-2,
.bg-darker-color-2,
.bg-darkest-color-2 {
    /* Tint the extended border color options. */
    --border-color-dark: var(--site-color-2-darker);
    --border-color-bright: var(--site-color-2-lighter);
}

.bg-color-2 {
    --color: var(--site-color-2-contrast-bright);
    --color-tint: var(--site-color-2-contrast-bright-tint);
    --bg: var(--site-color-2);
    --border-color: var(--site-color-2-darker);
}

.bg-lightest-color-2 {
    --color: var(--site-color-2-contrast-dark);
    --color-tint: var(--site-color-2-contrast-dark-tint);
    --bg: var(--site-color-2-lightest);
    --border-color: var(--site-color-2-mid-light);
}

.bg-lighter-color-2 {
    --color: var(--site-color-2-contrast-dark);
    --color-tint: var(--site-color-2-contrast-dark-tint);
    --border-color: var(--site-color-2-mid-light);
    --bg: var(--site-color-2-lighter);
}

.bg-light-color-2 {
    --color: var(--site-color-2-contrast-dark);
    --color-tint: var(--site-color-2-contrast-dark-tint);
    --border-color: var(--site-color-2-mid-dark);
    --bg: var(--site-color-2-light);
}

.bg-mid-light-color-2 {
    --color: var(--site-color-2-contrast-dark);
    --color-tint: var(--site-color-2-contrast-dark-tint);
    --bg: var(--site-color-2-mid-light);
    --border-color: var(--site-color-2-mid-dark);
}

.bg-mid-color-2 {
    --color: var(--site-color-2-contrast-dark);
    --color-tint: var(--site-color-2-contrast-dark-tint);
    --color: var(--site-text-color-dark);
    --bg: var(--site-color-2-mid);
    --border-color: var(--site-color-2-darker);
}

.bg-mid-dark-color-2 {
    --color: var(--site-color-2-contrast-bright);
    --color-tint: var(--site-color-2-contrast-bright-tint);
    --bg: var(--site-color-2-mid-dark);
    --border-color: var(--site-color-2-darker);
}

.bg-dark-color-2 {
    --color: var(--site-color-2-contrast-bright);
    --color-tint: var(--site-color-2-contrast-bright-tint);
    --bg: var(--site-color-2-dark);
    --border-color: var(--site-color-2-darkest);
}

.bg-darker-color-2 {
    --color: var(--site-color-2-contrast-bright);
    --color-tint: var(--site-color-2-contrast-bright-tint);
    --bg: var(--site-color-2-darker);
    --border-color: var(--site-color-2-darkest);
}

.bg-darkest-color-2 {
    --color: var(--site-color-2-contrast-bright);
    --color-tint: var(--site-color-2-contrast-bright-tint);
    --bg: var(--site-color-2-darkest);
    --border-color: var(--site-color-2-darkest);
}

/* Color #3 */

.bg-color-3,
.bg-lightest-color-3,
.bg-lighter-color-3,
.bg-light-color-3,
.bg-mid-light-color-3,
.bg-mid-color-3,
.bg-mid-dark-color-3,
.bg-dark-color-3,
.bg-darker-color-3,
.bg-darkest-color-3 {
    /* Tint the extended border color options. */
    --border-color-dark: var(--site-color-3-darker);
    --border-color-bright: var(--site-color-3-lighter);
}

.bg-color-3 {
    --color: var(--site-color-3-contrast-bright);
    --color-tint: var(--site-color-3-contrast-bright-tint);
    --bg: var(--site-color-3);
    --border-color: var(--site-color-3-darker);
}

.bg-lightest-color-3 {
    --color: var(--site-color-3-contrast-dark);
    --color-tint: var(--site-color-3-contrast-dark-tint);
    --bg: var(--site-color-3-lightest);
    --border-color: var(--site-color-3-mid-light);
}

.bg-lighter-color-3 {
    --color: var(--site-color-3-contrast-dark);
    --color-tint: var(--site-color-3-contrast-dark-tint);
    --bg: var(--site-color-3-lighter);
    --border-color: var(--site-color-3-mid-light);
}

.bg-light-color-3 {
    --color: var(--site-color-3-contrast-dark);
    --color-tint: var(--site-color-3-contrast-dark-tint);
    --bg: var(--site-color-3-light);
    --border-color: var(--site-color-3-mid-dark);
}

.bg-mid-light-color-3 {
    --color: var(--site-color-3-contrast-dark);
    --color-tint: var(--site-color-3-contrast-dark-tint);
    --bg: var(--site-color-3-mid-light);
    --border-color: var(--site-color-3-mid-dark);
}

.bg-mid-color-3 {
    --color: var(--site-color-3-contrast-dark);
    --color-tint: var(--site-color-3-contrast-dark-tint);
    --bg: var(--site-color-3-mid);
    --border-color: var(--site-color-3-darker);
}

.bg-mid-dark-color-3 {
    --color: var(--site-color-3-contrast-bright);
    --color-tint: var(--site-color-3-contrast-bright-tint);
    --bg: var(--site-color-3-mid-dark);
    --border-color: var(--site-color-3-darker);
}

.bg-dark-color-3 {
    --color: var(--site-color-3-contrast-bright);
    --color-tint: var(--site-color-3-contrast-bright-tint);
    --bg: var(--site-color-3-dark);
    --border-color: var(--site-color-3-darkest);
}

.bg-darker-color-3 {
    --color: var(--site-color-3-contrast-bright);
    --color-tint: var(--site-color-3-contrast-bright-tint);
    --bg: var(--site-color-3-darker);
    --border-color: var(--site-color-3-darkest);
}

.bg-darkest-color-3 {
    --color: var(--site-color-3-contrast-bright);
    --color-tint: var(--site-color-3-contrast-bright-tint);
    --bg: var(--site-color-3-darkest);
    --border-color: var(--site-color-3-darkest);
}

/* Color #4 */

.bg-color-4,
.bg-lightest-color-4,
.bg-lighter-color-4,
.bg-light-color-4,
.bg-mid-light-color-4,
.bg-mid-color-4,
.bg-mid-dark-color-4,
.bg-dark-color-4,
.bg-darker-color-4,
.bg-darkest-color-4 {
    /* Tint the extended border color options. */
    --border-color-dark: var(--site-color-4-darker);
    --border-color-bright: var(--site-color-4-lighter);
}

.bg-color-4 {
    --color: var(--site-color-4-contrast-bright);
    --color-tint: var(--site-color-4-contrast-bright-tint);
    --bg: var(--site-color-4);
    --border-color: var(--site-color-4-darker);
}

.bg-lightest-color-4 {
    --color: var(--site-color-4-contrast-dark);
    --color-tint: var(--site-color-4-contrast-dark-tint);
    --bg: var(--site-color-4-lightest);
    --border-color: var(--site-color-4-mid-light);
}

.bg-lighter-color-4 {
    --color: var(--site-color-4-contrast-dark);
    --color-tint: var(--site-color-4-contrast-dark-tint);
    --bg: var(--site-color-4-lighter);
    --border-color: var(--site-color-4-mid-light);
}

.bg-light-color-4 {
    --color: var(--site-color-4-contrast-dark);
    --color-tint: var(--site-color-4-contrast-dark-tint);
    --bg: var(--site-color-4-light);
    --border-color: var(--site-color-4-mid-dark);
}

.bg-mid-light-color-4 {
    --color: var(--site-color-4-contrast-dark);
    --color-tint: var(--site-color-4-contrast-dark-tint);
    --bg: var(--site-color-4-mid-light);
    --border-color: var(--site-color-4-mid-dark);
}

.bg-mid-color-4 {
    --color: var(--site-color-4-contrast-dark);
    --color-tint: var(--site-color-4-contrast-dark-tint);
    --bg: var(--site-color-4-mid);
    --border-color: var(--site-color-4-darker);
}

.bg-mid-dark-color-4 {
    --color: var(--site-color-4-contrast-bright);
    --color-tint: var(--site-color-4-contrast-bright-tint);
    --bg: var(--site-color-4-mid-dark);
    --border-color: var(--site-color-4-darker);
}

.bg-dark-color-4 {
    --color: var(--site-color-4-contrast-bright);
    --color-tint: var(--site-color-4-contrast-bright-tint);
    --bg: var(--site-color-4-dark);
    --border-color: var(--site-color-4-darkest);
}

.bg-darker-color-4 {
    --color: var(--site-color-4-contrast-bright);
    --color-tint: var(--site-color-4-contrast-bright-tint);
    --bg: var(--site-color-4-darker);
    --border-color: var(--site-color-4-darkest);
}

.bg-darkest-color-4 {
    --color: var(--site-color-4-contrast-bright);
    --color-tint: var(--site-color-4-contrast-bright-tint);
    --bg: var(--site-color-4-darkest);
    --border-color: var(--site-color-4-darkest);
}

/* Color #5 */

.bg-color-5,
.bg-lightest-color-5,
.bg-lighter-color-5,
.bg-light-color-5,
.bg-mid-light-color-5,
.bg-mid-color-5,
.bg-mid-dark-color-5,
.bg-dark-color-5,
.bg-darker-color-5,
.bg-darkest-color-5 {
    /* Tint the extended border color options. */
    --border-color-dark: var(--site-color-5-darker);
    --border-color-bright: var(--site-color-5-lighter);
}

.bg-color-5 {
    --color: var(--site-color-5-contrast-bright);
    --color-tint: var(--site-color-5-contrast-bright-tint);
    --bg: var(--site-color-5);
    --border-color: var(--site-color-5-darker);
}

.bg-lightest-color-5 {
    --color: var(--site-color-5-contrast-dark);
    --color-tint: var(--site-color-5-contrast-dark-tint);
    --bg: var(--site-color-5-lightest);
    --border-color: var(--site-color-5-mid-light);
}

.bg-lighter-color-5 {
    --color: var(--site-color-5-contrast-dark);
    --color-tint: var(--site-color-5-contrast-dark-tint);
    --bg: var(--site-color-5-lighter);
    --border-color: var(--site-color-5-mid-light);
}

.bg-light-color-5 {
    --color: var(--site-color-5-contrast-dark);
    --color-tint: var(--site-color-5-contrast-dark-tint);
    --bg: var(--site-color-5-light);
    --border-color: var(--site-color-5-mid-dark);
}

.bg-mid-light-color-5 {
    --color: var(--site-color-5-contrast-dark);
    --color-tint: var(--site-color-5-contrast-dark-tint);
    --bg: var(--site-color-5-mid-light);
    --border-color: var(--site-color-5-mid-dark);
}

.bg-mid-color-5 {
    --color: var(--site-color-5-contrast-dark);
    --color-tint: var(--site-color-5-contrast-dark-tint);
    --bg: var(--site-color-5-mid);
    --border-color: var(--site-color-5-darker);
}

.bg-mid-dark-color-5 {
    --color: var(--site-color-5-contrast-bright);
    --color-tint: var(--site-color-5-contrast-bright-tint);
    --bg: var(--site-color-5-mid-dark);
    --border-color: var(--site-color-5-darker);
}

.bg-dark-color-5 {
    --color: var(--site-color-5-contrast-bright);
    --color-tint: var(--site-color-5-contrast-bright-tint);
    --bg: var(--site-color-5-dark);
    --border-color: var(--site-color-5-darkest);
}

.bg-darker-color-5 {
    --color-tint: var(--site-color-5-contrast-bright-tint);
    --bg: var(--site-color-5-darker);
    --border-color: var(--site-color-5-darkest);
}

.bg-darkest-color-5 {
    --color: var(--site-color-5-contrast-bright);
    --color-tint: var(--site-color-5-contrast-bright-tint);
    --bg: var(--site-color-5-darkest);
    --border-color: var(--site-color-5-darkest);
}

/* Color #6 */

.bg-color-6,
.bg-lightest-color-6,
.bg-lighter-color-6,
.bg-light-color-6,
.bg-mid-light-color-6,
.bg-mid-color-6,
.bg-mid-dark-color-6,
.bg-dark-color-6,
.bg-darker-color-6,
.bg-darkest-color-6 {
    /* Tint the extended border color options. */
    --border-color-dark: var(--site-color-6-darker);
    --border-color-bright: var(--site-color-6-lighter);
}

.bg-color-6 {
    --color: var(--site-color-6-contrast-bright);
    --color-tint: var(--site-color-6-contrast-bright-tint);
    --bg: var(--site-color-6);
    --border-color: var(--site-color-6-darker);
}

.bg-lightest-color-6 {
    --color: var(--site-color-6-contrast-dark);
    --color-tint: var(--site-color-6-contrast-dark-tint);
    --bg: var(--site-color-6-lightest);
    --border-color: var(--site-color-6-mid-light);
}

.bg-lighter-color-6 {
    --color: var(--site-color-6-contrast-dark);
    --color-tint: var(--site-color-6-contrast-dark-tint);
    --bg: var(--site-color-6-lighter);
    --border-color: var(--site-color-6-mid-light);
}

.bg-light-color-6 {
    --color: var(--site-color-6-contrast-dark);
    --color-tint: var(--site-color-6-contrast-dark-tint);
    --bg: var(--site-color-6-light);
    --border-color: var(--site-color-6-mid-dark);
}

.bg-mid-light-color-6 {
    --color: var(--site-color-6-contrast-dark);
    --color-tint: var(--site-color-6-contrast-dark-tint);
    --bg: var(--site-color-6-mid-light);
    --border-color: var(--site-color-6-mid-dark);
}

.bg-mid-color-6 {
    --color: var(--site-color-6-contrast-dark);
    --color-tint: var(--site-color-6-contrast-dark-tint);
    --bg: var(--site-color-6-mid);
    --border-color: var(--site-color-6-darker);
}

.bg-mid-dark-color-6 {
    --color: var(--site-color-6-contrast-bright);
    --color-tint: var(--site-color-6-contrast-bright-tint);
    --bg: var(--site-color-6-mid-dark);
    --border-color: var(--site-color-6-darker);
}

.bg-dark-color-6 {
    --color: var(--site-color-6-contrast-bright);
    --color-tint: var(--site-color-6-contrast-bright-tint);
    --bg: var(--site-color-6-dark);
    --border-color: var(--site-color-6-darkest);
}

.bg-darker-color-6 {
    --color: var(--site-color-6-contrast-bright);
    --color-tint: var(--site-color-6-contrast-bright-tint);
    --bg: var(--site-color-6-darker);
    --border-color: var(--site-color-6-darkest);
}

.bg-darkest-color-6 {
    --color: var(--site-color-6-contrast-bright);
    --color-tint: var(--site-color-6-contrast-bright-tint);
    --bg: var(--site-color-6-darkest);
    --border-color: var(--site-color-6-darkest);
}

/* Color #7 */

.bg-color-7,
.bg-lightest-color-7,
.bg-lighter-color-7,
.bg-light-color-7,
.bg-mid-light-color-7,
.bg-mid-color-7,
.bg-mid-dark-color-7,
.bg-dark-color-7,
.bg-darker-color-7,
.bg-darkest-color-7 {
    /* Tint the extended border color options. */
    --border-color-dark: var(--site-color-7-darker);
    --border-color-bright: var(--site-color-7-lighter);
}

.bg-color-7 {
    --color: var(--site-color-7-contrast-bright);
    --color-tint: var(--site-color-7-contrast-bright-tint);
    --bg: var(--site-color-7);
    --border-color: var(--site-color-7-darker);
}

.bg-lightest-color-7 {
    --color: var(--site-color-7-contrast-dark);
    --color-tint: var(--site-color-7-contrast-dark-tint);
    --bg: var(--site-color-7-lightest);
    --border-color: var(--site-color-7-mid-light);
}

.bg-lighter-color-7 {
    --color: var(--site-color-7-contrast-dark);
    --color-tint: var(--site-color-7-contrast-dark-tint);
    --bg: var(--site-color-7-lighter);
    --border-color: var(--site-color-7-mid-light);
}

.bg-light-color-7 {
    --color: var(--site-color-7-contrast-dark);
    --color-tint: var(--site-color-7-contrast-dark-tint);
    --bg: var(--site-color-7-light);
    --border-color: var(--site-color-7-mid-dark);
}

.bg-mid-light-color-7 {
    --color: var(--site-color-7-contrast-dark);
    --color-tint: var(--site-color-7-contrast-dark-tint);
    --bg: var(--site-color-7-mid-light);
    --border-color: var(--site-color-7-mid-dark);
}

.bg-mid-color-7 {
    --color: var(--site-color-7-contrast-dark);
    --color-tint: var(--site-color-7-contrast-dark-tint);
    --bg: var(--site-color-7-mid);
    --border-color: var(--site-color-7-darker);
}

.bg-mid-dark-color-7 {
    --color: var(--site-color-7-contrast-bright);
    --color-tint: var(--site-color-7-contrast-bright-tint);
    --bg: var(--site-color-7-mid-dark);
    --border-color: var(--site-color-7-darker);
}

.bg-dark-color-7 {
    --color: var(--site-color-7-contrast-bright);
    --color-tint: var(--site-color-7-contrast-bright-tint);
    --bg: var(--site-color-7-dark);
    --border-color: var(--site-color-7-darkest);
}

.bg-darker-color-7 {
    --color: var(--site-color-7-contrast-bright);
    --color-tint: var(--site-color-7-contrast-bright-tint);
    --bg: var(--site-color-7-darker);
    --border-color: var(--site-color-7-darkest);
}

.bg-darkest-color-7 {
    --color: var(--site-color-7-contrast-bright);
    --color-tint: var(--site-color-7-contrast-bright-tint);
    --bg: var(--site-color-7-darkest);
    --border-color: var(--site-color-7-darkest);
}

/* 
    Grey
    - Use plain greys if you prefer (even mix of all colours), but many designs work a little better with a very subtle tinge on the grey boxes toward the primary site color.
*/

.bg-color-grey,
.bg-lightest-color-grey,
.bg-lighter-color-grey,
.bg-light-color-grey,
.bg-mid-light-color-grey,
.bg-mid-color-grey,
.bg-mid-dark-color-grey,
.bg-dark-color-grey,
.bg-darker-color-grey,
.bg-darkest-color-grey {
    /* Tint the extended border color options. */
    --border-color-dark: var(--site-color-grey-darker);
    --border-color-bright: var(--site-color-grey-lighter);
}

.bg-color-grey {
    --color: var(--site-color-grey-contrast);
    --color-tint: var(--site-color-grey-contrast-dark);
    --link-color: var(--site-link-color);
    --link-color-visited: var(--site-link-color-visited);
    --link-bg: var(--site-link-bg);
    --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-border-color);
    --bg: var(--site-color-grey);
    --border-color: var(--site-color-grey-darker);
}

.bg-lightest-color-grey {
    --color: var(--site-color-grey-contrast-dark);
    --color-tint: var(--site-color-grey-contrast-dark-tint);
    --bg: var(--site-color-grey-lightest);
    --border-color: var(--site-color-grey-mid-light);
}

.bg-lighter-color-grey {
    --color: var(--site-color-grey-contrast-dark);
    --color-tint: var(--site-color-grey-contrast-dark-tint);
    --bg: var(--site-color-grey-lighter);
    --border-color: var(--site-color-grey-mid-light);
}

.bg-light-color-grey {
    --color: var(--site-color-grey-contrast-dark);
    --color-tint: var(--site-color-grey-contrast-dark-tint);
    --bg: var(--site-color-grey-light);
    --border-color: var(--site-color-grey-mid-dark);
}

.bg-mid-light-color-grey {
    --color: var(--site-color-grey-contrast-dark);
    --color-tint: var(--site-color-grey-contrast-dark-tint);
    --bg: var(--site-color-grey-mid-light);
    --border-color: var(--site-color-grey-mid-dark);
}

.bg-mid-color-grey {
    --color: var(--site-color-grey-contrast-dark);
    --color-tint: var(--site-color-grey-contrast-dark-tint);
    --bg: var(--site-color-grey-mid);
    --border-color: var(--site-color-grey-darker);
}

.bg-mid-dark-color-grey {
    --color: var(--site-color-grey-contrast-bright);
    --color-tint: var(--site-color-grey-contrast-bright-tint);
    --bg: var(--site-color-grey-mid-dark);
    --border-color: var(--site-color-grey-darker);
}

.bg-dark-color-grey {
    --color: var(--site-color-grey-contrast-bright);
    --color-tint: var(--site-color-grey-contrast-bright-tint);
    --bg: var(--site-color-grey-dark);
    --border-color: var(--site-color-grey-darkest);
}

.bg-darker-color-grey {
    --color: var(--site-color-grey-contrast-bright);
    --color-tint: var(--site-color-grey-contrast-bright-tint);
    --bg: var(--site-color-grey-darker);
    --border-color: var(--site-color-grey-darkest);
}

.bg-darkest-color-grey {
    --color: var(--site-color-grey-contrast-bright);
    --color-tint: var(--site-color-grey-contrast-bright-tint);
    --bg: var(--site-color-grey-darkest);
    --border-color: var(--site-color-grey-darkest);
}

/* 
    Gradients
*/

.bg-gradient-light {
    --color: var(--site-text-color);
    --bg: linear-gradient(0deg, var(--site-color-ui-light) 0%, #fff 75%);
    background: var(--site-color-ui-light);
    background: linear-gradient(0deg, var(--site-color-ui-light) 0%, #fff 75%);
}

    .bg-gradient-light h1,
    .bg-gradient-light h2,
    .bg-gradient-light h3,
    .bg-gradient-light h4,
    .bg-gradient-light h5,
    .bg-gradient-light h6 {
        color: var(--site-text-color);
    }

    .bg-gradient-light a[href] {
        color: var(--site-link-color-dark);
    }

/*
    Border Colors
*/

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

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

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

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

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

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

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

.border-color-grey { border-color: var(--site-color-grey) !important; }
.border-light-color-grey { border-color: var(--site-color-grey-mid-light) !important; }
.border-dark-color-grey { border-color: var(--site-color-grey-mid-dark) !important; }

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

.color-ui {--color: var(--site-color-ui) !important; color: var(--site-color-ui) !important;}
.color-ui-lightest {--color: var(--site-color-ui-lightest) !important; color: var(--site-color-ui-lightest) !important;}
.color-ui-lighter {--color: var(--site-color-ui-lighter) !important; color: var(--site-color-ui-lighter) !important;}
.color-ui-light {--color: var(--site-color-ui-light) !important; color: var(--site-color-ui-light) !important;}
.color-ui-mid-light {--color: var(--site-color-ui-mid-light) !important; color: var(--site-color-ui-mid-light) !important;}
.color-ui-mid {--color: var(--site-color-ui-mid) !important; color: var(--site-color-ui-mid) !important;}
.color-ui-mid-dark {--color: var(--site-color-ui-mid-dark) !important; color: var(--site-color-ui-mid-dark) !important;}
.color-ui-dark {--color: var(--site-color-ui-dark) !important; color: var(--site-color-ui-dark) !important;}
.color-ui-darker {--color: var(--site-color-ui-darker) !important; color: var(--site-color-ui-darker) !important;}
.color-ui-darkest {--color: var(--site-color-ui-darkest) !important; color: var(--site-color-ui-darkest) !important;}

.color-1 {--color: var(--site-color-1) !important; color: var(--site-color-1) !important;}
.color-1-lightest {--color: var(--site-color-1-lightest) !important; color: var(--site-color-1-lightest) !important;}
.color-1-lighter {--color: var(--site-color-1-lighter) !important; color: var(--site-color-1-lighter) !important;}
.color-1-light {--color: var(--site-color-1-light) !important; color: var(--site-color-1-light) !important;}
.color-1-mid-light {--color: var(--site-color-1-mid-light) !important; color: var(--site-color-1-mid-light) !important;}
.color-1-mid {--color: var(--site-color-1-mid) !important; color: var(--site-color-1-mid) !important;}
.color-1-mid-dark {--color: var(--site-color-1-mid-dark) !important; color: var(--site-color-1-mid-dark) !important;}
.color-1-dark {--color: var(--site-color-1-dark) !important; color: var(--site-color-1-dark) !important;}
.color-1-darker {--color: var(--site-color-1-darker) !important; color: var(--site-color-1-darker) !important;}
.color-1-darkest {--color: var(--site-color-1-darkest) !important; color: var(--site-color-1-darkest) !important;}

.color-2 {--color: var(--site-color-2) !important; color: var(--site-color-2) !important;}
.color-2-lightest {--color: var(--site-color-2-lightest) !important; color: var(--site-color-2-lightest) !important;}
.color-2-lighter {--color: var(--site-color-2-lighter) !important; color: var(--site-color-2-lighter) !important;}
.color-2-light {--color: var(--site-color-2-light) !important; color: var(--site-color-2-light) !important;}
.color-2-mid-light {--color: var(--site-color-2-mid-light) !important; color: var(--site-color-2-mid-light) !important;}
.color-2-mid {--color: var(--site-color-2-mid) !important; color: var(--site-color-2-mid) !important;}
.color-2-mid-dark {--color: var(--site-color-2-mid-dark) !important; color: var(--site-color-2-mid-dark) !important;}
.color-2-dark {--color: var(--site-color-2-dark) !important; color: var(--site-color-2-dark) !important;}
.color-2-darker {--color: var(--site-color-2-darker) !important; color: var(--site-color-2-darker) !important;}
.color-2-darkest {--color: var(--site-color-2-darkest) !important; color: var(--site-color-2-darkest) !important;}

.color-3 {--color: var(--site-color-3) !important; color: var(--site-color-3) !important;}
.color-3-lightest {--color: var(--site-color-3-lightest) !important; color: var(--site-color-3-lightest) !important;}
.color-3-lighter {--color: var(--site-color-3-lighter) !important; color: var(--site-color-3-lighter) !important;}
.color-3-light {--color: var(--site-color-3-light) !important; color: var(--site-color-3-light) !important;}
.color-3-mid-light {--color: var(--site-color-3-mid-light) !important; color: var(--site-color-3-mid-light) !important;}
.color-3-mid {--color: var(--site-color-3-mid) !important; color: var(--site-color-3-mid) !important;}
.color-3-mid-dark {--color: var(--site-color-3-mid-dark) !important; color: var(--site-color-3-mid-dark) !important;}
.color-3-dark {--color: var(--site-color-3-dark) !important; color: var(--site-color-3-dark) !important;}
.color-3-darker {--color: var(--site-color-3-darker) !important; color: var(--site-color-3-darker) !important;}
.color-3-darkest {--color: var(--site-color-3-darkest) !important; color: var(--site-color-3-darkest) !important;}

.color-4 {--color: var(--site-color-4) !important; color: var(--site-color-4) !important;}
.color-4-lightest {--color: var(--site-color-4-lightest) !important; color: var(--site-color-4-lightest) !important;}
.color-4-lighter {--color: var(--site-color-4-lighter) !important; color: var(--site-color-4-lighter) !important;}
.color-4-light {--color: var(--site-color-4-light) !important; color: var(--site-color-4-light) !important;}
.color-4-mid-light {--color: var(--site-color-4-mid-light) !important; color: var(--site-color-4-mid-light) !important;}
.color-4-mid {--color: var(--site-color-4-mid) !important; color: var(--site-color-4-mid) !important;}
.color-4-mid-dark {--color: var(--site-color-4-mid-dark) !important; color: var(--site-color-4-mid-dark) !important;}
.color-4-dark {--color: var(--site-color-4-dark) !important; color: var(--site-color-4-dark) !important;}
.color-4-darker {--color: var(--site-color-4-darker) !important; color: var(--site-color-4-darker) !important;}
.color-4-darkest {--color: var(--site-color-4-darkest) !important; color: var(--site-color-4-darkest) !important;}

.color-5 {--color: var(--site-color-5) !important; color: var(--site-color-5) !important;}
.color-5-lightest {--color: var(--site-color-5-lightest) !important; color: var(--site-color-5-lightest) !important;}
.color-5-lighter {--color: var(--site-color-5-lighter) !important; color: var(--site-color-5-lighter) !important;}
.color-5-light {--color: var(--site-color-5-light) !important; color: var(--site-color-5-light) !important;}
.color-5-mid-light {--color: var(--site-color-5-mid-light) !important; color: var(--site-color-5-mid-light) !important;}
.color-5-mid {--color: var(--site-color-5-mid) !important; color: var(--site-color-5-mid) !important;}
.color-5-mid-dark {--color: var(--site-color-5-mid-dark) !important; color: var(--site-color-5-mid-dark) !important;}
.color-5-dark {--color: var(--site-color-5-dark) !important; color: var(--site-color-5-dark) !important;}
.color-5-darker {--color: var(--site-color-5-darker) !important; color: var(--site-color-5-darker) !important;}
.color-5-darkest {--color: var(--site-color-5-darkest) !important; color: var(--site-color-5-darkest) !important;}

.color-6 {--color: var(--site-color-6) !important; color: var(--site-color-6) !important;}
.color-6-lightest {--color: var(--site-color-6-lightest) !important; color: var(--site-color-6-lightest) !important;}
.color-6-lighter {--color: var(--site-color-6-lighter) !important; color: var(--site-color-6-lighter) !important;}
.color-6-light {--color: var(--site-color-6-light) !important; color: var(--site-color-6-light) !important;}
.color-6-mid-light {--color: var(--site-color-6-mid-light) !important; color: var(--site-color-6-mid-light) !important;}
.color-6-mid {--color: var(--site-color-6-mid) !important; color: var(--site-color-6-mid) !important;}
.color-6-mid-dark {--color: var(--site-color-6-mid-dark) !important; color: var(--site-color-6-mid-dark) !important;}
.color-6-dark {--color: var(--site-color-6-dark) !important; color: var(--site-color-6-dark) !important;}
.color-6-darker {--color: var(--site-color-6-darker) !important; color: var(--site-color-6-darker) !important;}
.color-6-darkest {--color: var(--site-color-6-darkest) !important; color: var(--site-color-6-darkest) !important;}

.color-7 {--color: var(--site-color-7) !important; color: var(--site-color-7) !important;}
.color-7-lightest {--color: var(--site-color-7-lightest) !important; color: var(--site-color-7-lightest) !important;}
.color-7-lighter {--color: var(--site-color-7-lighter) !important; color: var(--site-color-7-lighter) !important;}
.color-7-light {--color: var(--site-color-7-light) !important; color: var(--site-color-7-light) !important;}
.color-7-mid-light {--color: var(--site-color-7-mid-light) !important; color: var(--site-color-7-mid-light) !important;}
.color-7-mid {--color: var(--site-color-7-mid) !important; color: var(--site-color-7-mid) !important;}
.color-7-mid-dark {--color: var(--site-color-7-mid-dark) !important; color: var(--site-color-7-mid-dark) !important;}
.color-7-dark {--color: var(--site-color-7-dark) !important; color: var(--site-color-7-dark) !important;}
.color-7-darker {--color: var(--site-color-7-darker) !important; color: var(--site-color-7-darker) !important;}
.color-7-darkest {--color: var(--site-color-7-darkest) !important; color: var(--site-color-7-darkest) !important;}

.color-color-grey {--color: var(--site-color-grey) !important; color: var(--site-color-grey) !important;}
.color-lightest-color-grey {--color: var(--site-color-grey-lightest) !important; color: var(--site-color-grey-lightest) !important;}
.color-lighter-color-grey {--color: var(--site-color-grey-lighter) !important; color: var(--site-color-grey-lighter) !important;}
.color-light-color-grey {--color: var(--site-color-grey-light) !important; color: var(--site-color-grey-light) !important;}
.color-mid-light-color-grey {--color: var(--site-color-grey-mid-light) !important; color: var(--site-color-grey-mid-light) !important;}
.color-mid-color-grey {--color: var(--site-color-grey-mid) !important; color: var(--site-color-grey-mid) !important;}
.color-mid-dark-color-grey {--color: var(--site-color-grey-mid-dark) !important; color: var(--site-color-grey-mid-dark) !important;}
.color-dark-color-grey {--color: var(--site-color-grey-dark) !important; color: var(--site-color-grey-dark) !important;}
.color-darker-color-grey {--color: var(--site-color-grey-darker) !important; color: var(--site-color-grey-darker) !important;}
.color-darkest-color-grey {--color: var(--site-color-grey-darkest) !important; color: var(--site-color-grey-darkest) !important;}