@property --contrast-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #000000;
}

/*@property --contrast-ratio {
    syntax: "<number>";
    inherits: false;
    initial-value: 0.1791;
}*/

/* Standard WCAG threshold (midpoint) logic behind contrast-color(var(--bg-color)) uses 0.1791 */
/* Swap 0.1791 for 0.3000 to hit strict 3:1 large text targets against white backgrounds. */
/* Swap 0.1791 for 0.1833 to hit strict 4.5:1 body text targets against white backgrounds. */
/* Swap 0.1791 for 0.1000 to hit strict 7:1 enhanced text targets against white backgrounds. */

/*@function --contrast-standard(--color) {
    result: color(from var(--color) xyz 
        round(up, min(1, max(0, 0.1791 - y))) 
        round(up, min(1, max(0, 0.1791 - y))) 
        round(up, min(1, max(0, 0.1791 - y)))
    );
}*/

/*.contrast {
    background-color: var(--bg-color);
    color: color(from var(--bg-color) xyz 
        round(up, min(1, max(0, 0.1791 - y))) 
        round(up, min(1, max(0, 0.1791 - y))) 
        round(up, min(1, max(0, 0.1791 - y)))
    );
}*/

/*.aa-large-text {
    background-color: var(--bg-color);
    color: color(from var(--bg-color) xyz 
        round(up, min(1, max(0, 0.3 - y))) 
        round(up, min(1, max(0, 0.3 - y))) 
        round(up, min(1, max(0, 0.3 - y)))
    );
}*/

/*.aa-body-text {
    background-color: var(--bg-color);
    color: color(from var(--bg-color) xyz 
        round(up, min(1, max(0, 0.1833 - y))) 
        round(up, min(1, max(0, 0.1833 - y))) 
        round(up, min(1, max(0, 0.1833 - y)))
    );
}*/

/*.aaa-enhanced-text {
    background-color: var(--bg-color);
    color: color(from var(--bg-color) xyz 
        round(up, min(1, max(0, 0.1 - y))) 
        round(up, min(1, max(0, 0.1 - y))) 
        round(up, min(1, max(0, 0.1 - y)))
    );
}*/



/*
root- (e.g., .btn-root, .color-root)
master- (e.g., .btn-master)
base- (e.g., .btn-base) — Note: This usually implies a stripped-down skeleton rather than something "more important," but it sits at the top of the inheritance chain.

brand- (e.g., .btn-brand or .bg-brand) — Specifically ties it to the company's core identity, leaving "primary" for the main UI color.
hero- (e.g., .btn-hero) — Perfect for giant, one-time call-to-action buttons (like on a landing page).
accent- (e.g., .btn-accent) — Used for high-contrast, eye-catching elements.
featured- (e.g., .card-featured)
*/


:root {
    --root-primary: var(--color-primary, var(--bs-primary));
    --root-primary-rgb: var(--color-primary-rgb, var(--bs-primary-rgb));
    --root-primary-contrast: var(--color-primary-contrast, white);
    /**/
    --root-secondary: var(--color-secondary, var(--bs-secondary));
    --root-secondary-rgb: var(--color-secondary-rgb, var(--bs-secondary-rgb));
    --root-secondary-contrast: var(--color-secondary-contrast, white);
    /**/
    --root-light: var(--color-light, var(--bs-light));
    --root-light-rgb: var(--color-light-rgb, var(--bs-light-rgb));
    --root-light-contrast: var(--color-light-contrast, black);
    /**/
    --root-dark: var(--color-dark, var(--bs-dark));
    --root-dark-rgb: var(--color-dark-rgb, var(--bs-dark-rgb));
    --root-dark-contrast: var(--color-dark-contrast, white);
    /**/
    --bs-link-color: var(--root-primary);
    --bs-link-hover-color: color-mix(in srgb, var(--root-primary) 80%, black);
}

@supports (color: color(from white xyz y y y)) {
    /* This should not be any problem at all, just being overly cautious. */
    :root {
        /* Standard WCAG (midpoint) ratio behind contrast-color(var(--bg-color)) uses 0.1791. */
        --r: 0.1833; /* 4.5:1 AA body text ratio used by bootstrap, for consistency. */
        /* --root-primary-contrast: color(from var(--root-primary) xyz round(up, clamp(0, var(--r) - y, 1), 1) round(up, clamp(0, var(--r) - y, 1), 1) round(up, clamp(0, var(--r) - y, 1), 1));
        --root-light-contrast: color(from var(--root-light) xyz round(up, clamp(0, var(--r) - y, 1), 1) round(up, clamp(0, var(--r) - y, 1), 1) round(up, clamp(0, var(--r) - y, 1), 1));
        --root-dark-contrast: color(from var(--root-dark) xyz round(up, clamp(0, var(--r) - y, 1), 1) round(up, clamp(0, var(--r) - y, 1), 1) round(up, clamp(0, var(--r) - y, 1), 1));*/
    }
}




/* (https://ishadeed.com/article/css-relative-colors/) */
/* What if we could use a text color based on the background color? We can do that with relative colors by altering the lightness and chroma values. */
/*.tag {
    --background: oklch(from var(--brand-1) l c calc(h + 90));
    --foreground: oklch(from var(--brand-1) 1 0.1 calc(h + 90));
    background-color: var(--background);
    color: var(--foreground);
}*/






:is(.bg-dark) {
    /*--bs-body-color: #F4F2F4;*/
    --bs-link-color: var(--root-light);
    --bs-link-hover-color: color-mix(in srgb, var(--root-light) 80%, black);
    /*--bs-border-color-translucent: rgba(207,237,209,.175);*/
}

.page-section:is(.bg-dark) {
    --section-color: #F4F2F4;
    --heading-color: var(--color-light);
    --sub-heading-color: var(--color-sage);
}

:is(.bg-dark) .nav-pills {
    --bs-nav-pills-link-active-color: var(--root-light-contrast);
    --bs-nav-pills-link-active-bg: var(--root-light);
}

:is(.bg-dark) .card {
    --bs-card-color: #212529;
    --bs-card-border-width: 0;
    --bs-card-border-color: transparent;
    --bs-card-title-color: var(--color-primary);
}


:is(.bg-light) {
    --bs-link-color: var(--root-primary);
    --bs-link-hover-color: color-mix(in srgb, var(--root-primary) 80%, black);
    /*--bs-border-color-translucent: rgba(207,237,209,.175);*/
}

.page-section:is(.bg-light) {
    --section-color: var(--bs-body-color);
    --heading-color: var(--color-dark);
    --sub-heading-color: var(--color-primary);
}


.page-section {
    --section-color: var(--bs-body-color);
    --heading-color: var(--color-primary);
    --sub-heading-color: var(--color-dark);
    color: var(--section-color);
}




/* 80% => 3.1:1 */
/* 95% => 4.5:1 */


/*
 *	Resets
==================================================== */

.dropdown-menu {
    --bs-dropdown-link-active-color: var(--root-primary-contrast);
    --bs-dropdown-link-active-bg: var(--root-primary);
}

.list-group {
    --bs-list-group-active-color: var(--root-primary-contrast);
    --bs-list-group-active-bg: var(--root-primary);
    --bs-list-group-active-border-color: var(--root-primary);
}

.nav-pills {
    --bs-nav-pills-link-active-color: var(--root-primary-contrast);
    --bs-nav-pills-link-active-bg: var(--root-primary);
}



/*
 *	Accordion
==================================================== */

.accordion {
    --bs-accordion-btn-focus-border-color: color-mix(in srgb, var(--root-primary) 50%, white);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgb(from var(--root-primary) r g b / 0.25);
    --bs-accordion-active-color: color-mix(in srgb, var(--root-primary) 90%, black);
    --bs-accordion-active-bg: color-mix(in srgb, var(--root-primary) 10%, white);
}

.accordion-button::after {
    background-color: var(--bs-accordion-btn-color);
    /*background-image: none;*/
    mask-composite: intersect;
    mask-image: var(--bs-accordion-btn-icon);
    mask-position: 0 0;
    mask-repeat: no-repeat;
    mask-size: var(--bs-accordion-btn-icon-width);
}

.accordion-button:not(.collapsed)::after {
    background-color: var(--bs-accordion-active-color);
    background-image: none;
}



/*
 *	Card
==================================================== */

.card {
    --bs-card-title-color: var(--root-dark);
}



/*
 *	Datepicker
==================================================== */

.litepicker {
    --litepicker-button-prev-month-color-hover: var(--root-primary);
    --litepicker-button-next-month-color-hover: var(--root-primary);
    --litepicker-is-start-color: #fff;
    --litepicker-is-start-color-bg: var(--root-primary);
    --litepicker-is-in-range-color: #eee;
    --litepicker-is-end-color: #fff;
    --litepicker-is-end-color-bg: var(--root-primary);
    --litepicker-day-color-hover: var(--root-primary);
    --litepicker-button-apply-color-bg: var(--root-primary);
    --litepicker-is-today-color: var(--root-primary);
}

.litepicker .container__days .day-item {
    transition: none;
}



/*
 *	Table
==================================================== */

.table-primary {
    --bs-table-color: #000;
    --bs-table-bg: color-mix(in srgb, var(--root-primary) 20%, white);
    --bs-table-border-color: color-mix(in srgb, var(--bs-table-bg) 90%, black);
    --bs-table-striped-bg: color-mix(in srgb, var(--bs-table-bg) 95%, black);
    --bs-table-striped-color: #000;
    --bs-table-active-bg: color-mix(in srgb, var(--bs-table-bg) 90%, black);
    --bs-table-active-color: #000;
    --bs-table-hover-bg: color-mix(in srgb, var(--bs-table-bg) 92.5%, black);
    --bs-table-hover-color: #000;
}



/*
 *	Dropdown Colors
==================================================== */

.dropdown-menu-primary {
    --base-color: var(--root-primary);
    --contrast-color: var(--root-primary-contrast);
}

.dropdown-menu-light {
    --base-color: var(--root-light);
    --contrast-color: var(--root-light-contrast);
}

.dropdown-menu-dark {
    --base-color: var(--root-dark);
    --contrast-color: var(--root-dark-contrast);
}

:is(.dropdown-menu-primary, .dropdown-menu-light, .dropdown-menu-dark) {
    --inverted-color: contrast-color(var(--contrast-color));
    /**/
    --bs-dropdown-bg: var(--base-color);
    --bs-dropdown-color: rgb(from var(--contrast-color) r g b / 0.75);
    --bs-dropdown-border-color: rgb(from var(--inverted-color) r g b / 0.15);
    --bs-dropdown-link-color: rgb(from var(--contrast-color) r g b / 0.75);
    --bs-dropdown-link-disabled-color: rgb(from var(--contrast-color) r g b / 0.5);
    --bs-dropdown-link-hover-bg: rgb(from var(--contrast-color) r g b / 0.15);
    --bs-dropdown-link-hover-color: var(--contrast-color);
    --bs-dropdown-link-active-bg: color-mix(in srgb, var(--base-color) 80%, black);
    --bs-dropdown-link-active-color: var(--contrast-color);
    --bs-dropdown-header-color: rgb(from var(--contrast-color) r g b / 0.5);
    --bs-dropdown-divider-bg: rgb(from var(--inverted-color) r g b / 0.15);
}



/*
 *	Alert
==================================================== */

.alert-primary {
    --base-color: var(--root-primary);
    --contrast-color: var(--root-primary-contrast);
}

.alert-light {
    --base-color: var(--root-light);
    --contrast-color: var(--root-light-contrast);
}

.alert-dark {
    --base-color: var(--root-dark);
    --contrast-color: var(--root-dark-contrast);
}

:is(.alert-primary, .alert-light, .alert-dark) {
    --bs-alert-color: color-mix(in srgb, var(--base-color) 60%, black);
    --bs-alert-bg: color-mix(in srgb, var(--base-color) 20%, white);
    --bs-alert-border-color: color-mix(in srgb, var(--base-color) 30%, white);
    --bs-alert-link-color: color-mix(in srgb, var(--base-color) 48%, black);
}

:is(.alert-primary, .alert-light, .alert-dark).alert-vivid {
    --bs-alert-color: rgb(from var(--contrast-color) r g b / .85);
    --bs-alert-bg: var(--base-color);
    --bs-alert-border-color: var(--base-color);
    --bs-alert-link-color: var(--contrast-color);
}



/*
 *	Button
==================================================== */

.btn-primary, .btn-outline-primary {
    --base-color: var(--root-primary);
    --contrast-color: var(--root-primary-contrast);
}

.btn-light, .btn-outline-light {
    --base-color: var(--root-light);
    --contrast-color: var(--root-light-contrast);
}

.btn-dark, .btn-outline-dark {
    --base-color: var(--root-dark);
    --contrast-color: var(--root-dark-contrast);
}

:is(.btn-primary, .btn-light, .btn-dark) {
    --inverted-color: contrast-color(var(--contrast-color));
    --base-color-focus-shadow: color-mix(in srgb, var(--base-color) 85%, var(--contrast-color));
    /**/
    --bs-btn-color: var(--contrast-color);
    --bs-btn-bg: var(--base-color);
    --bs-btn-border-color: var(--base-color);
    --bs-btn-hover-color: var(--contrast-color);
    --bs-btn-hover-bg: color-mix(in srgb, var(--base-color) 85%, var(--inverted-color));
    --bs-btn-hover-border-color: color-mix(in srgb, var(--base-color) 80%, var(--inverted-color));
    --bs-btn-focus-shadow-rgb: rgb(from var(--base-color-focus-shadow) r g b / 1);
    --bs-btn-active-color: var(--contrast-color);
    --bs-btn-active-bg: color-mix(in srgb, var(--base-color) 80%, var(--inverted-color));
    --bs-btn-active-border-color: color-mix(in srgb, var(--base-color) 75%, var(--inverted-color));
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
    --bs-btn-disabled-color: var(--contrast-color);
    --bs-btn-disabled-bg: var(--base-color);
    --bs-btn-disabled-border-color: var(--base-color);
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgb(from var(--base-color-focus-shadow) r g b / .5);
}

:is(.btn-primary, .btn-light, .btn-dark).btn-elevate {
    box-shadow: 0 .25rem .5rem 0 rgb(from var(--base-color) r g b / .25);
}

:is(.btn-primary, .btn-light, .btn-dark).btn-elevate:is(:focus,:hover) {
    box-shadow: 0 .5rem 1rem -.125rem rgb(from var(--base-color) r g b / .5);
}

:is(.btn-outline-primary, .btn-outline-light, .btn-outline-dark) {
    --bs-btn-color: var(--base-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--base-color);
    --bs-btn-hover-color: var(--contrast-color);
    --bs-btn-hover-bg: var(--base-color);
    --bs-btn-hover-border-color: var(--base-color);
    --bs-btn-focus-shadow-rgb: rgb(from var(--base-color) r g b / 1);
    --bs-btn-active-color: var(--contrast-color);
    --bs-btn-active-bg: var(--base-color);
    --bs-btn-active-border-color: var(--base-color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
    --bs-btn-disabled-color: var(--base-color);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--base-color);
    --bs-gradient: none;
}

:is(.btn-outline-primary, .btn-outline-light, .btn-outline-dark).btn-elevate {
    box-shadow: 0 .25rem .5rem 0 rgb(from var(--base-color) r g b / .25);
}

:is(.btn-outline-primary, .btn-outline-light, .btn-outline-dark).btn-elevate:is(:focus,:hover) {
    box-shadow: 0 .5rem 1rem -.125rem rgb(from var(--base-color) r g b / .5);
}

.btn-outline-link {
    --inverted-color: contrast-color(var(--contrast-color));
    /**/
    --bs-btn-color: var(--bs-link-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--bs-link-hover-color);
    --bs-btn-hover-bg: rgb(from color-mix(in srgb, var(--bs-link-color) 85%, var(--inverted-color)) r g b / .1);
    --bs-btn-hover-border-color: var(--bs-btn-hover-color);
    --bs-btn-active-color: var(--bs-link-hover-color);
    --bs-btn-active-bg: rgb(from color-mix(in srgb, var(--bs-link-color) 80%, var(--inverted-color)) r g b / .1);
    --bs-btn-active-border-color: var(--bs-btn-active-color);
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-box-shadow: none;
    --bs-btn-focus-shadow-rgb: var(--color-primary-rgb, var(--bs-primary-rgb));
    text-decoration: underline;
}

.btn-outline-link:is(:focus,:hover) {
    text-decoration: none;
}



/*
 *	Pagination
==================================================== */

.pagination, .pagination-primary {
    --base-color: var(--root-primary);
    --contrast-color: var(--root-primary-contrast);
}

.pagination-light {
    --base-color: var(--root-light);
    --contrast-color: var(--root-light-contrast);
}

.pagination-dark {
    --base-color: var(--root-dark);
    --contrast-color: var(--root-dark-contrast);
}

:is(.pagination, .pagination-primary, .pagination-light, .pagination-dark) {
    --inverted-color: contrast-color(var(--contrast-color));
    /**/
    --bs-pagination-color: var(--base-color);
    --bs-pagination-hover-color: color-mix(in srgb, var(--base-color) 80%, var(--inverted-color));
    --bs-pagination-focus-color: color-mix(in srgb, var(--base-color) 80%, var(--inverted-color));
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgb(from var(--base-color) r g b / .25);
    --bs-pagination-active-color: var(--contrast-color);
    --bs-pagination-active-bg: var(--base-color);
    --bs-pagination-active-border-color: var(--base-color);
}



/*
 *	Toast
==================================================== */

.toast-primary {
    --base-color: var(--root-primary);
    --contrast-color: var(--root-primary-contrast);
}

.toast-light {
    --base-color: var(--root-light);
    --contrast-color: var(--root-light-contrast);
}

.toast-dark {
    --base-color: var(--root-dark);
    --contrast-color: var(--root-dark-contrast);
}

:is(.toast-primary, .toast-light, .toast-dark) {
    --bs-toast-color: var(--contrast-color);
    --bs-toast-bg: rgb(from var(--base-color) r g b / .85);
    --bs-toast-header-color: var(--bs-toast-color);
    --bs-toast-header-bg: rgb(from contrast-color(var(--contrast-color)) r g b / .15);
    --bs-toast-header-border-color: rgb(from var(--contrast-color) r g b / .05);
}

@container style(--contrast-color: white) {

    .toast .btn-close:not(.btn-close-white) {
        filter: invert(1) grayscale(100%) brightness(200%);
    }
}

:is(.toast-primary, .toast-light, .toast-dark).soft {
    --base-bg: color-mix(in srgb, var(--base-color) 30%, white);
    /**/
    --bs-toast-color: var(--bs-dark);
    --bs-toast-bg: rgb(from var(--base-bg) r g b / .85);
    --bs-toast-header-color: var(--bs-toast-color);
    --bs-toast-header-bg: rgba(255, 255, 255, 0.85);
}



/*
 *	Popover
==================================================== */

.popover-primary {
    --base-color: var(--root-primary);
    --contrast-color: var(--root-primary-contrast);
}

.popover-light {
    --base-color: var(--root-light);
    --contrast-color: var(--root-light-contrast);
}

.popover-dark {
    --base-color: var(--root-dark);
    --contrast-color: var(--root-dark-contrast);
}

:is(.popover-primary, .popover-light, .popover-dark) {
    --bs-popover-bg: color-mix(in srgb, var(--base-color) 20%, white);
    --bs-popover-border-color: color-mix(in srgb, var(--base-color) 30%, white);
    --bs-popover-header-bg: color-mix(in srgb, var(--base-color) 60%, black);
    --bs-popover-header-color: var(--contrast-color);
    --bs-popover-body-color: color-mix(in srgb, var(--base-color) 60%, black);
}



/*
 *	Utility
==================================================== */

:is(.bg-primary, .border-primary, .text-primary, .text-bg-primary, .link-primary) {
    --base-color: var(--root-primary);
    --contrast-color: var(--root-primary-contrast);
}

:is(.bg-light, .border-light, .text-light, .text-bg-light, .link-light) {
    --base-color: var(--root-light);
    --contrast-color: var(--root-light-contrast);
}

:is(.bg-dark, .border-dark, .text-dark, .text-bg-dark, .link-dark) {
    --base-color: var(--root-dark);
    --contrast-color: var(--root-dark-contrast);
}

:is(.bg-primary, .bg-light, .bg-dark) {
    background-color: rgb(from var(--base-color) r g b / var(--bs-bg-opacity, 1)) !important;
}

:is(.border-primary, .border-light, .border-dark) {
    border-color: rgb(from var(--base-color) r g b / var(--bs-border-opacity, 1)) !important;
}

:is(.text-primary, .text-light, .text-dark) {
    color: rgb(from var(--base-color) r g b / var(--bs-text-opacity, 1)) !important;
}

:is(.text-bg-primary, .text-bg-light, .text-bg-dark) {
    background-color: rgb(from var(--base-color) r g b / var(--bs-bg-opacity, 1)) !important;
    color: var(--contrast-color) !important;
}

:is(.link-primary, .link-light, .link-dark) {
    color: var(--base-color) !important;
}

:is(.link-primary, .link-light, .link-dark):is(:focus, :hover) {
    --link-hover-color: color-mix(in srgb, var(--base-color) 80%, black);
    color: var(--link-hover-color) !important;
}




/*
 *	Text/Title Colors
==================================================== */

.eyebrow-text {
    color: var(--root-primary);
}

.form-title {
    color: var(--root-dark);
}

/* .hero.css */
/*.content-dark {
    color: #212529;
}

.content-dark .heading {
    color: var(--color-indigo);
}

.content-dark .sub-heading {
    color: var(--color-purple);
}


.content-light {
    color: #fff;
}

.content-light .heading {
    color: var(--color-mint);
}

.content-light .sub-heading {
    color: var(--color-sage);
}*/



/*
 *	Block Heading
==================================================== */

.block-heading {
    --heading-border-color: var(--root-primary);
}



/*
 *	Tab Panel
==================================================== */

.tab-panel {
    --tab-panel-nav-tabs-link-hover-bg: var(--root-primary);
}

.tab-panel-dark {
    --tab-panel-nav-bg: var(--root-dark);
}

.tab-panel-dark > .nav-tabs {
    --bs-nav-tabs-link-active-color: var(--root-primary);
}



/*
 *	Hero
==================================================== */

/* .content ...*/

.hero {
    --hero-bg: var(--root-dark);
}

/*.hero-page .hero {
    --hero-bg-image: linear-gradient(rgb(from var(--root-dark) r g b / 0.65), transparent 95%);
}*/

.hero-page .hero::before {
    background-image: linear-gradient(rgb(from var(--root-dark) r g b / 0.65), transparent 95%);
}


/*.hero.go-dark .content {
    color: #fff;
}

.hero.go-dark .content .heading {
    color: var(--color-mint);
}

.hero.go-dark .content .sub-heading {
    color: var(--color-sage);
}*/

.hero-form {
    --hero-form-bg-rgb: var(--root-dark-rgb);
    --hero-form-title-color: var(--root-light);
    --hero-form-check-bg-rgb: var(--root-primary-rgb);
}



/*
 *	Blog
==================================================== */

.blog-archive {
    --blog-list-count-hover-color: color-mix(in srgb, var(--root-primary) 60%, black);
    --blog-list-count-hover-bg: rgba(var(--root-primary-rgb), .25);
    --blog-list-count-hover-border-color: rgba(var(--root-primary-rgb), .25);
    --blog-list-count-active-color: var(--root-primary-contrast);
    --blog-list-count-active-bg: var(--root-primary);
    --blog-list-count-active-border-color: var(--root-primary);
}

.list-tags {
    --tag-link-active-bg: var(--root-primary);
}



/*
 *	Features
==================================================== */

/* (https://ishadeed.com/article/css-relative-colors/) */

/*@property --lightness {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}*/
/* 
    Extract the lightness channel using OKLCH:

    --lightness: from var(--root-primary) l;

    0 represents pure, absolute black. 
    1 represents pure, absolute white. 
    0.5 represents the middle point of perceived brightness. 

    While you can write standard color declarations using percentages (e.g., oklch(50% 0.15 240)), 
    the browser automatically normalizes the relative channel token "l" into a raw decimal number. 
    Because it evaluates as a raw number rather than a percentage, you must format your 
    container style query using decimal ranges.
*/


/*.feature {
    container-type: normal;
    container-name: feature;
}*/

.card.feature .card-img:has(.fa) {
    background-color: var(--root-dark);
}

:is(.features-1,.features-2) .feature {
    /*--contrast-color: var(--root-dark-contrast);*/
    --feature-title-color: var(--root-dark);
    --feature-link-color: var(--root-primary);
}

:is(.features-1,.features-2) .feature:is(a):hover {
    /*--contrast-color: var(--root-dark-contrast);*/
    --bs-card-bg: var(--root-dark);
    --bs-card-color: #fff;
    --bs-card-border-color: var(--root-dark);
    --feature-title-color: var(--root-light);
    --feature-link-color: color-mix(in oklch, var(--root-primary) 60%, white);
    box-shadow: 0 10px 20px rgba(var(--root-dark-rgb),.25);
}

/*@container style(--contrast-color: white) {

    :is(.features-1,.features-2) .feature {
        --feature-title-color: var(--root-secondary);
    }

    :is(.features-1,.features-2) .feature:is(a):hover {
        --feature-title-color: var(--root-secondary);
    }
}*/



:is(.features-3,.features-4) .feature {
    /*--feature-bar-color: var(--ti-sage);*/
    --feature-title-color: var(--root-dark);
}

:is(.features-3,.features-4) .feature:is(a):hover {
    /*--bs-card-border-color: var(--ti-sage);*/
    --feature-title-color: var(--root-primary);
}

.features-3 .feature:is(a):hover .card-img {
    box-shadow: 0 10px 20px rgba(var(--root-dark-rgb),.25);
}

.features-6 .feature {
    --feature-title-bg: var(--root-dark);
}

.features-6 .feature:is(a):hover {
    --feature-title-color: var(--root-light);
}

.features-5 .feature:is(a):hover {
    --feature-title-color: var(--root-primary);
}

:is(.features-5,.features-6) .feature .card-img,
.features-6 .feature .card-title {
    box-shadow: 0 .5rem 1.25rem -.25rem rgba(var(--root-dark-rgb),.25), 0 .25rem .5rem -.25rem rgba(var(--root-dark-rgb),.5);
}

:is(.features-5,.features-6) .feature:is(a):hover .card-img,
.features-6 .feature:is(a):hover .card-title {
    box-shadow: 0 .625rem 1.5rem rgba(var(--root-dark-rgb),.25), 0 .25rem .5rem -.25rem rgba(var(--root-dark-rgb),.5);
}

/*.bg-indigo .features-5 .feature {
    --feature-title-color: var(--ti-sage);
}*/

.bg-indigo .features-6 .feature {
    --feature-title-bg: var(--root-primary);
}

:is(.features-7,.features-8) .feature {
    /*--feature-bar-color: var(--ti-sage);*/
    box-shadow: 0 .5rem 1.25rem -.25rem rgba(var(--root-dark-rgb),.15), 0 .25rem .5rem -.25rem rgba(var(--root-dark-rgb),.15);
}

.features-7 .feature {
    --bs-card-bg: var(--root-dark);
    --bs-card-color: #fff;
    --feature-title-color: var(--root-light);
}

.features-8 .feature {
    /*--bs-card-border-color: var(--ti-sage);*/
    --feature-title-color: var(--root-primary);
}

:is(.features-7,.features-8) .feature:is(a):hover {
    box-shadow: 0 .5rem 1.25rem -.25rem rgba(var(--root-dark-rgb),.25), 0 .25rem .5rem -.25rem rgba(var(--root-dark-rgb),.25);
}



/*
 *	Page - Tabbed Content
==================================================== */

[data-block="tabs"] .nav-tabs .nav-link {
    border-bottom: 3px solid rgba(var(--root-dark-rgb),.05);
}

[data-block="tabs"] .nav-tabs .nav-link:hover {
    border-color: rgba(var(--root-dark-rgb),.15);
}

[data-block="tabs"] .nav-tabs .nav-item.show .nav-link,
[data-block="tabs"] .nav-tabs .nav-link.active {
    border-color: var(--root-primary);
}



/*
 *	Site Header
==================================================== */

.site-header {
    --site-header-bg: var(--bs-white);
    /*background-color: var(--bs-white);
    box-shadow: 0 -1.5rem 1.5rem 2rem rgba(0,0,0,.25);
    position: relative;*/
}

.site-header .offcanvas {
    --bs-offcanvas-color: var(--root-dark);
    --bs-offcanvas-bg: var(--root-light);
    --bs-offcanvas-border-width: 0px;
    --bs-offcanvas-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.site-header .navbar {
    border-bottom: 1px solid transparent;
}

.site-header .navbar-nav {
    --bs-nav-link-font-weight: 600;
}

.site-header .navbar-nav:not(:only-child) {
    --bs-navbar-nav-link-padding-y: .75rem;
}

.site-header .navbar .nav-link {
    font-family: var(--font-sans-serif-condensed);
    font-weight: 700;
    /*text-transform: uppercase;*/
}

.site-header .navbar .nav-link small {
    opacity: .75;
}

@media screen and (min-width: 576px) {

    .site-header .navbar-expand-sm .nav-link[aria-expanded="true"],
    .site-header .navbar-expand-sm .nav-link:hover {
        border-color: var(--root-light);
    }
}

@media screen and (min-width: 768px) {

    .site-header .navbar-expand-md .nav-link[aria-expanded="true"],
    .site-header .navbar-expand-md .nav-link:hover {
        border-color: var(--root-light);
    }
}

@media screen and (min-width: 992px) {

    .site-header .navbar-expand-lg .nav-link[aria-expanded="true"],
    .site-header .navbar-expand-lg .nav-link:hover {
        border-color: var(--root-light);
    }
}

@media screen and (min-width: 1200px) {

    .site-header .navbar-expand-xl .nav-link[aria-expanded="true"],
    .site-header .navbar-expand-xl .nav-link:hover {
        border-color: var(--root-light);
    }
}

@media screen and (min-width: 1400px) {

    .site-header .navbar-expand-xxl .nav-link[aria-expanded="true"],
    .site-header .navbar-expand-xxl .nav-link:hover {
        border-color: var(--root-light);
    }
}



/*
 *	Site Footer
==================================================== */

.site-footer {
    --site-footer-bg: var(--root-light);
    --site-footer-title-accent-color: var(--root-primary);
    --disclaimer-bg: rgba(var(--root-primary-rgb),.2);
    border-top-color: var(--root-primary);
}



/*
 *	Latest Posts
==================================================== */

.post-card .post-title {
    color: var(--root-dark);
}

.post-card .post-date {
    color: var(--root-primary);
}

.post-slider .post-link:hover .post-card,
.post-slider .post-link:focus .post-card {
    box-shadow: 0 0 0 .25rem rgba(var(--root-primary-rgb), .25);
}



/*
 *	Quote Section
==================================================== */

.quote-dialog .quote-icon {
    background-color: var(--root-primary);
}

@media(min-width: 768px) {

    .quote-dialog .blockquote::before,
    .quote-dialog .blockquote::after {
        color: var(--root-primary);
    }
}



/*
 *	Product Group Page
==================================================== */

.nav-plans .nav-link.active {
    background-color: var(--root-primary);
    border-color: var(--root-primary);
    color: #fff;
}

.plan-card .card-header {
    color: var(--root-dark);
}

.plan-card.active {
    box-shadow: 0 4px 16px rgba(var(--root-dark-rgb),.15);
}

.plan-card.active .card-header {
    color: var(--root-primary);
}

.plan-grid-title {
    color: var(--root-dark);
}

.plan-grid abbr {
    border-bottom: 0.5px dashed rgba(var(--root-primary-rgb),.5);
}

@media(min-width: 992px) {

    .plan-grid .nav-tabs .nav-link:focus,
    .plan-grid .nav-tabs .nav-link:hover {
        border-color: var(--root-primary);
    }

    .plan-grid .nav-tabs .nav-link:hover {
        background-color: var(--root-primary);
        color: #fff;
    }

    .plan-grid.bg-indigo .nav-tabs .nav-item.show .nav-link,
    .plan-grid.bg-indigo .nav-tabs .nav-link.active {
        color: var(--root-primary);
    }
}



/*
 *	Locale Links
==================================================== */

.locale-link {
    --locale-link-bg-rgb: var(--root-dark-rgb);
}



/*
 *	Masonry
==================================================== */

.masonry {
    --masonry-caption-bg: var(--root-dark);
}



/*
 *	CTA
==================================================== */

/*.cta {
    background-color: var(--color-dark);
    color: #04aaff;
    box-shadow: 0 15px 35px rgba(3,28,48,.25), 0 5px 15px rgba(0,0,0,.1);
    text-shadow: 0 1px rgba(0,0,0,.3);
}

.cta .btn-link {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: #6C37D3;
    --bs-btn-border-color: #6C37D3;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #5C2FB3;
    --bs-btn-hover-border-color: #562CA9;
    --bs-btn-focus-shadow-rgb: 130,85,218;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #562CA9;
    --bs-btn-active-border-color: #51299E;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: #6C37D3;
    --bs-btn-disabled-border-color: #6C37D3;
}*/




.slick-dotted.slick-slider {
    margin-bottom: 30px !important;
}

.slick-prev::before,
.slick-next::before {
    color: var(--section-color, black) !important;
}

.slick-dots li button::before,
.slick-dots li.slick-active button::before {
    color: var(--section-color, black) !important;
}







/* (https://www.youtube.com/watch?v=pMo2CzcSiko) */

.btn[data-btn-type="whimsical"] .deco {
    position: absolute;
    offset-path: border-box;
    /*offset-rotate: auto 45deg;*/
    width: 30px;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: white;
    transition: offset-distance 1s;
}

.btn[data-btn-type="whimsical"]:is(:hover, :focus-visible) .deco {
    offset-distance: 80%;
}