@charset "UTF-8";
/* Copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>

 This file is part of a Moko Consulting project.

 SPDX-License-Identifier: GPL-3.0-or-later

 # FILE INFORMATION
 DEFGROUP: Joomla.Template.Site
 INGROUP:  ClarksvilleFurs.CustomTheme
 REPO:     https://git.mokoconsulting.tech/MokoConsulting/client-mokosuite-clarksvillefurs
 PATH:     /media/templates/site/mokoonyx/css/theme/dark.custom.css
 VERSION:  01.13.00
 BRIEF:    Clarksville Furs custom dark palette — MokoOnyx
*/

/* ============================================================
 * CLARKSVILLE FURS — DARK MODE
 * Brand palette mapped across the full MokoOnyx scaffold.
 *
 * Strategy:
 *   Sky-Primary (#9CCEDB) leads as `--color-primary` on dark —
 *     warmer than ink-on-dark, preserves community brand tone.
 *   Coral (#FF4B3E) is the action color: --primary, CTAs, focus.
 *   Ink (#1E1E1E) → replaced by near-black backgrounds.
 *   Mascot-White (#F4F4F4) → linework and high-contrast type.
 *   --sky (#a3cde2) is a raw brand token for direct reference.
 * ============================================================ */

:root[data-bs-theme='dark'] {
	color-scheme: dark;

	/* ===== CF BRAND TOKENS (raw colors — reference freely) ===== */
	--sky: #a3cde2;

	/* ===== BRAND & THEME COLORS ===== */
	--color-primary: #9CCEDB;
	--accent-color-primary: #FF4B3E;
	--accent-color-secondary: #7FB7C6;

	/* ===== TYPOGRAPHY & BODY ===== */
	--font-sans-serif: 'Fredoka', 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	--body-font-family: 'Fredoka', 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--body-font-size: 1rem;
	--body-font-weight: 400;
	--body-line-height: 1.5;
	--body-color: #E6EBF1;
	--body-color-rgb: 230, 235, 241;
	--body-bg: #0E1318;
	--body-bg-rgb: 14, 19, 24;
	--heading-color: #F4F4F4;
	--emphasis-color: #FFFFFF;
	--emphasis-color-rgb: 255, 255, 255;
	--secondary-color: #E6EBF1BF;
	--secondary-color-rgb: 230, 235, 241;
	--tertiary-color: #E6EBF180;
	--tertiary-color-rgb: 230, 235, 241;
	--muted-color: #8F8F8F;
	--code-color: #FF7A6F;
	--code-color-ink: var(--code-color, #FF7A6F);
	--code-bg-color: rgba(255, 122, 111, 0.1);
	--highlight-color: #F4F4F4;
	--highlight-bg: rgba(245, 197, 24, 0.15);

	/* ===== STANDARD COLORS ===== */
	--blue: #9CCEDB;
	--indigo: #b19cff;
	--purple: #c0a5ff;
	--pink: #ff8fc0;
	--red: #FF8E86;
	--orange: #ff9c4d;
	--yellow: #F5C518;
	--green: #78d694;
	--teal: #76e3ff;
	--cyan: #a3cde2;
	--black: #000;
	--white: #F4F4F4;

	/* ===== GRAY SCALE ===== */
	--gray-100: #161a20;
	--gray-200: #1b2027;
	--gray-300: #222831;
	--gray-400: #2b323b;
	--gray-500: #36404a;
	--gray-600: #48525d;
	--gray-700: #5b6672;
	--gray-800: #cfd6de;
	--gray-900: #e6ebf1;
	--white-rgb: 244, 244, 244;
	--black-rgb: 0, 0, 0;

	/* ===== OPACITY UTILITIES ===== */
	--opacity-0: 0;
	--opacity-5: 0.05;
	--opacity-10: 0.1;
	--opacity-15: 0.15;
	--opacity-20: 0.2;
	--opacity-25: 0.25;
	--opacity-30: 0.3;
	--opacity-50: 0.5;
	--opacity-75: 0.75;
	--opacity-100: 1;

	/* ===== LAYOUT & SPACING ===== */
	--padding-x: 0.15rem;
	--padding-y: 0.15rem;
	--bg-opacity: 1;
	--nav-toggle-size: 3rem;
	--gradient: linear-gradient(180deg, #ffffff26, #fff0);
	--secondary-bg: #151B22;
	--secondary-bg-rgb: 21, 27, 34;
	--tertiary-bg: #10151B;
	--tertiary-bg-rgb: 16, 21, 27;
	--hr-color: var(--border-color, #2b323b);
	--border-color-soft: var(--border-color, #2b323b);
	--kbd-bg: var(--secondary-bg, #151B22);
	--kbd-ink: var(--body-bg, #0E1318);
	--toc-bg: var(--secondary-bg, #151B22);
	--toc-ink: var(--color-primary, #9CCEDB);
	--selection-bg: rgba(255, 75, 62, 0.35);
	--selection-ink: var(--body-color, #E6EBF1);
	--border: 5px;

	/* ===== BREAKPOINTS ===== */
	--bp-xs: 0;
	--bp-sm: 576px;
	--bp-md: 768px;
	--bp-lg: 992px;
	--bp-xl: 1200px;

	/* ===== BORDERS ===== */
	--border-width: 1px;
	--border-style: solid;
	--border-color: #2B323B;
	--border-color-translucent: #F4F4F426;
	--border-radius: 0.875rem;
	--border-radius-sm: 0.5rem;
	--border-radius-lg: 1.25rem;
	--border-radius-xl: 1.5rem;
	--border-radius-xxl: 2.5rem;
	--border-radius-2xl: var(--border-radius-xxl);
	--border-radius-pill: 50rem;

	/* ===== SHADOWS ===== */
	--box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
	--box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.4);
	--box-shadow-lg: 0 1rem 2.5rem rgba(0, 0, 0, 0.6);
	--box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.4);

	/* ===== COMMON SHADOW COLORS ===== */
	--shadow-color-light: rgba(var(--black-rgb), var(--opacity-30));
	--shadow-color-medium: rgba(var(--black-rgb), var(--opacity-50));
	--shadow-color-dark: rgba(var(--black-rgb), var(--opacity-75));
	--highlight-translucent: rgba(var(--white-rgb), var(--opacity-5));

	/* ===== NAVIGATION ===== */
	--mainmenu-nav-link-color: #F4F4F4;
	--nav-text-color: #B8C3CB;
	--nav-bg-color: #151B22;

	/* ===== NAVBAR ===== */
	--navbar-padding-x: 1rem;
	--navbar-padding-y: 0.5rem;
	--navbar-color: var(--nav-text-color);
	--navbar-active-color: #9CCEDB;
	--navbar-disabled-color: rgba(244, 244, 244, 0.3);
	--navbar-brand-padding-y: 0.3125rem;
	--navbar-brand-margin-end: 1rem;
	--navbar-brand-font-size: 1.25rem;
	--navbar-brand-color: #F4F4F4;
	--navbar-brand-active-color: #9CCEDB;
	--navbar-nav-link-padding-x: 0.5rem;
	--navbar-toggler-padding-y: 0.25rem;
	--navbar-toggler-padding-x: 0.75rem;
	--navbar-toggler-font-size: 1.25rem;
	--navbar-toggler-border-color: rgba(244, 244, 244, 0.15);
	--navbar-toggler-border-radius: 0.5rem;
	--navbar-toggler-focus-width: 0.25rem;
	--navbar-toggler-transition: box-shadow 0.15s ease-in-out;
	--nav-link-padding-x: 1rem;
	--nav-link-padding-y: 0.5rem;
	--nav-link-font-weight: 500;
	--nav-link-color: var(--nav-text-color);
	--nav-link-active-color: var(--mainmenu-nav-link-color);
	--nav-link-disabled-color: rgba(244, 244, 244, 0.3);

	/* ===== LINKS ===== */
	--color-link: #9CCEDB;
	--color-hover: #FF4B3E;
	--color-active: var(--mainmenu-nav-link-color);
	--link-color: #9CCEDB;
	--link-color-rgb: 156, 206, 219;
	--link-decoration: underline;
	--link-hover-color: #FF4B3E;
	--link-hover-color-rgb: 255, 75, 62;
	--link-active-color: var(--link-color);

	/* ===== LINK UTILITY COLORS ===== */
	--link-primary-color: #FF4B3E;
	--link-primary-hover-color: #FF6B60;
	--link-secondary-color: #B8C3CB;
	--link-secondary-hover-color: #E6EBF1;
	--link-success-color: #78D694;
	--link-success-hover-color: #9CE3B2;
	--link-info-color: #9CCEDB;
	--link-info-hover-color: #BCDFE8;
	--link-warning-color: #F5C518;
	--link-warning-hover-color: #FFD84A;
	--link-danger-color: #FF8E86;
	--link-danger-hover-color: #FFB5AE;
	--link-light-color: #F4F4F4;
	--link-light-hover-color: #FFFFFF;
	--link-dark-color: #8F8F8F;
	--link-dark-hover-color: #B8C3CB;

	/* ===== HEADER BACKGROUND ===== */
	--header-background-image: none;
	--header-background-color: var(--sky);
	--header-background-attachment: scroll;
	--header-background-repeat: no-repeat;
	--header-background-size: cover;
	--header-background-position: center;
	--header-background-opacity: 1;
	--header-background-filter: none;

	/* ===== CONTAINER BACKGROUNDS ===== */
	/* Below Topbar Container */
	--container-below-topbar-bg-image: none;
	--container-below-topbar-bg-color: #151B22;
	--container-below-topbar-bg-position: center;
	--container-below-topbar-bg-attachment: scroll;
	--container-below-topbar-bg-repeat: no-repeat;
	--container-below-topbar-bg-size: cover;
	--container-below-topbar-border: none;
	--container-below-topbar-border-radius: 0;

	/* Top A Container */
	--container-top-a-bg-image: none;
	--container-top-a-bg-color: #12293A;
	--container-top-a-bg-position: center;
	--container-top-a-bg-attachment: scroll;
	--container-top-a-bg-repeat: no-repeat;
	--container-top-a-bg-size: cover;
	--container-top-a-border: none;
	--container-top-a-border-radius: 0;

	/* Top B Container */
	--container-top-b-bg-image: none;
	--container-top-b-bg-color: #0E1318;
	--container-top-b-bg-position: center;
	--container-top-b-bg-attachment: scroll;
	--container-top-b-bg-repeat: no-repeat;
	--container-top-b-bg-size: cover;
	--container-top-b-border: none;
	--container-top-b-border-radius: 0;

	/* TOC Container */
	--container-toc-bg: var(--secondary-bg);
	--container-toc-color: #E6EBF1;

	/* Sidebar Container */
	--container-sidebar-bg-image: none;
	--container-sidebar-bg-color: transparent;
	--container-sidebar-bg-position: center;
	--container-sidebar-bg-attachment: scroll;
	--container-sidebar-bg-repeat: no-repeat;
	--container-sidebar-bg-size: cover;
	--container-sidebar-border: none;
	--container-sidebar-border-radius: 0.75rem;

	/* Bottom A Container */
	--container-bottom-a-bg-image: none;
	--container-bottom-a-bg-color: #12293A;
	--container-bottom-a-bg-position: center;
	--container-bottom-a-bg-attachment: scroll;
	--container-bottom-a-bg-repeat: no-repeat;
	--container-bottom-a-bg-size: cover;
	--container-bottom-a-border: none;
	--container-bottom-a-border-radius: 5px;

	/* Bottom B Container */
	--container-bottom-b-bg-image: none;
	--container-bottom-b-bg-color: #080D12;
	--container-bottom-b-bg-position: center;
	--container-bottom-b-bg-attachment: scroll;
	--container-bottom-b-bg-repeat: no-repeat;
	--container-bottom-b-bg-size: cover;
	--container-bottom-b-border: none;
	--container-bottom-b-border-radius: 0;

	/* ===== FOCUS & FORMS ===== */
	--focus-ring-width: 0.25rem;
	--focus-ring-opacity: 0.5;
	--focus-ring-color: rgba(255, 75, 62, 0.5);
	--input-color: #E6EBF1;
	--input-bg: #252d38;
	--input-border-color: #3a4250;
	--input-focus-border-color: #FF4B3E;
	--input-focus-box-shadow: 0 0 0 0.25rem rgba(255, 75, 62, 0.25);
	--input-placeholder-color: #8894aa;
	--input-disabled-bg: #0f1318;
	--input-disabled-border-color: #2b323b;
	--input-file-button-active-bg: #2b3441;
	--form-range-thumb-active-bg: #4a5766;
	--form-valid-color: #78D694;
	--form-valid-border-color: #78D694;
	--form-invalid-color: #ff7a73;
	--form-invalid-border-color: #ff7a73;

	/* ===== BUTTONS ===== */
	--btn-border-radius: var(--border-radius);
	--btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 1px rgba(0, 0, 0, 0.3);

	/* ===== ACCORDION ===== */
	--accordion-color: var(--body-color);
	--accordion-bg: var(--body-bg);
	--accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
	--accordion-border-color: var(--border-color);
	--accordion-border-width: 1px;
	--accordion-border-radius: 0.875rem;
	--accordion-inner-border-radius: calc(0.875rem - 1px);
	--accordion-btn-padding-x: 1.25rem;
	--accordion-btn-padding-y: 1rem;
	--accordion-btn-color: var(--body-color);
	--accordion-btn-bg: var(--accordion-bg);
	--accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e6ebf1'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
	--accordion-btn-icon-width: 1.25rem;
	--accordion-btn-icon-transform: rotate(-180deg);
	--accordion-btn-icon-transition: transform 0.2s ease-in-out;
	--accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FF4B3E'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
	--accordion-btn-focus-border-color: var(--input-focus-border-color);
	--accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(255, 75, 62, 0.25);
	--accordion-body-padding-x: 1.25rem;
	--accordion-body-padding-y: 1rem;
	--accordion-active-color: var(--link-color);
	--accordion-active-bg: var(--secondary-bg);

	/* ===== ALERT ===== */
	--alert-bg: transparent;
	--alert-padding-x: 1rem;
	--alert-padding-y: 1rem;
	--alert-margin-bottom: 1rem;
	--alert-color: var(--body-color);
	--alert-border-color: transparent;
	--alert-border: 1px solid var(--alert-border-color);
	--alert-border-radius: 0.875rem;

	/* ===== ALERT LINK COLORS ===== */
	--alert-primary-link-color: #FFB5AE;
	--alert-secondary-link-color: #B8C3CB;
	--alert-success-link-color: #9CE3B2;
	--alert-info-link-color: #BCDFE8;
	--alert-warning-link-color: #FFD84A;
	--alert-danger-link-color: #FFB5AE;
	--alert-light-link-color: #F4F4F4;
	--alert-dark-link-color: #B8C3CB;

	/* ===== BACKDROP ===== */
	--backdrop-zindex: 1040;
	--backdrop-bg: hsl(0, 0%, 0%);
	--backdrop-opacity: 0.6;

	/* ===== BADGE ===== */
	--badge-padding-x: 0.65em;
	--badge-padding-y: 0.35em;
	--badge-font-size: 0.75em;
	--badge-font-weight: 700;
	--badge-color: var(--body-color);
	--badge-border-radius: 0.5rem;

	/* ===== BREADCRUMB ===== */
	--breadcrumb-padding-x: 0;
	--breadcrumb-padding-y: 0;
	--breadcrumb-margin-bottom: 1rem;
	--breadcrumb-bg: ;
	--breadcrumb-border-radius: ;
	--breadcrumb-divider-color: var(--gray-600);
	--breadcrumb-item-padding-x: 0.5rem;
	--breadcrumb-item-active-color: var(--link-color);

	/* ===== CARDS ===== */
	--card-spacer-y: 1.5rem;
	--card-spacer-x: 1.5rem;
	--card-title-spacer-y: 0.5rem;
	--card-border-width: 1px;
	--card-border-color: rgba(244, 244, 244, 0.12);
	--card-border-radius: 1rem;
	--card-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
	--card-inner-border-radius: calc(1rem - 1px);
	--card-cap-padding-y: 0.75rem;
	--card-cap-padding-x: 1.25rem;
	--card-cap-bg: #10151B;
	--card-cap-color: #F4F4F4;
	--card-height: auto;
	--card-color: var(--body-color);
	--card-bg: var(--secondary-bg);
	--card-img-overlay-padding: 1rem;
	--card-group-margin: 0.75rem;

	/* ===== DROPDOWN ===== */
	--dropdown-zindex: 1000;
	--dropdown-min-width: 10rem;
	--dropdown-padding-x: 0;
	--dropdown-padding-y: 0.5rem;
	--dropdown-spacer: 0.125rem;
	--dropdown-font-size: 1rem;
	--dropdown-color: var(--body-color);
	--dropdown-bg: var(--secondary-bg);
	--dropdown-border-color: var(--border-color-translucent);
	--dropdown-border-radius: 0.75rem;
	--dropdown-border-width: 1px;
	--dropdown-inner-border-radius: calc(0.75rem - 1px);
	--dropdown-divider-bg: var(--border-color-translucent);
	--dropdown-divider-margin-y: 0.5rem;
	--dropdown-box-shadow: 0 0.5rem 1rem var(--shadow-color-medium);
	--dropdown-link-color: var(--body-color);
	--dropdown-link-active-color: #F4F4F4;
	--dropdown-link-active-bg: #FF4B3E;
	--dropdown-link-disabled-color: var(--gray-600);
	--dropdown-item-padding-x: 1rem;
	--dropdown-item-padding-y: 0.25rem;
	--dropdown-header-color: var(--gray-600);
	--dropdown-header-padding-x: 1rem;
	--dropdown-header-padding-y: 0.5rem;

	/* ===== LIST GROUP ===== */
	--list-group-color: var(--body-color);
	--list-group-bg: var(--secondary-bg);
	--list-group-border-color: rgba(var(--white-rgb), 0.125);
	--list-group-border-width: 1px;
	--list-group-border-radius: 0.75rem;
	--list-group-item-padding-x: 1rem;
	--list-group-item-padding-y: 0.5rem;
	--list-group-action-color: var(--gray-800);
	--list-group-action-active-color: var(--body-color);
	--list-group-action-active-bg: var(--tertiary-bg);
	--list-group-disabled-color: var(--gray-600);
	--list-group-disabled-bg: var(--secondary-bg);
	--list-group-active-color: #F4F4F4;
	--list-group-active-bg: #FF4B3E;
	--list-group-active-border-color: #FF4B3E;

	/* ===== LIST GROUP ITEM COLORS ===== */
	--list-group-item-primary-color: #FFB5AE;
	--list-group-item-primary-bg: #3a1511;
	--list-group-item-primary-active-bg: #4a1c17;
	--list-group-item-secondary-color: #B8C3CB;
	--list-group-item-secondary-bg: #2b323b;
	--list-group-item-secondary-active-bg: #363d47;
	--list-group-item-success-color: #9CE3B2;
	--list-group-item-success-bg: #1e3d2d;
	--list-group-item-success-active-bg: #275538;
	--list-group-item-info-color: #BCDFE8;
	--list-group-item-info-bg: #1a3448;
	--list-group-item-info-active-bg: #234459;
	--list-group-item-warning-color: #FFD84A;
	--list-group-item-warning-bg: #4a3410;
	--list-group-item-warning-active-bg: #5c4216;
	--list-group-item-danger-color: #FFB5AE;
	--list-group-item-danger-bg: #4a1e1c;
	--list-group-item-danger-active-bg: #5c2823;
	--list-group-item-light-color: #F4F4F4;
	--list-group-item-light-bg: #1e2430;
	--list-group-item-light-active-bg: #282f3d;
	--list-group-item-dark-color: #48525d;
	--list-group-item-dark-bg: #0e1318;
	--list-group-item-dark-active-bg: #161b22;

	/* ===== MODAL ===== */
	--modal-zindex: 1050;
	--modal-width: 500px;
	--modal-padding: 1rem;
	--modal-margin: 0.5rem;
	--modal-color: ;
	--modal-bg: var(--secondary-bg);
	--modal-border-color: var(--border-color-translucent);
	--modal-border-width: 1px;
	--modal-border-radius: 1rem;
	--modal-box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.5);
	--modal-inner-border-radius: calc(1rem - 1px);
	--modal-header-padding-x: 1.25rem;
	--modal-header-padding-y: 1rem;
	--modal-header-padding: 1rem 1.25rem;
	--modal-header-border-color: var(--border-color);
	--modal-header-border-width: 1px;
	--modal-title-line-height: 1.5;
	--modal-footer-gap: 0.5rem;
	--modal-footer-bg: ;
	--modal-footer-border-color: var(--border-color);
	--modal-footer-border-width: 1px;

	/* ===== NAV TABS ===== */
	--nav-tabs-border-width: 1px;
	--nav-tabs-border-color: var(--border-color);
	--nav-tabs-border-radius: 0.5rem;
	--nav-tabs-link-active-color: #F4F4F4;
	--nav-tabs-link-active-bg: var(--secondary-bg);
	--nav-tabs-link-active-border-color: var(--border-color) var(--border-color) var(--secondary-bg);

	/* ===== NAV PILLS ===== */
	--nav-pills-border-radius: 50rem;
	--nav-pills-link-active-color: #F4F4F4;
	--nav-pills-link-active-bg: #FF4B3E;

	/* ===== OFFCANVAS ===== */
	--offcanvas-zindex: 1045;
	--offcanvas-width: 400px;
	--offcanvas-height: 30vh;
	--offcanvas-padding-x: 1.25rem;
	--offcanvas-padding-y: 1.25rem;
	--offcanvas-color: var(--body-color);
	--offcanvas-bg: var(--body-bg);
	--offcanvas-border-width: 1px;
	--offcanvas-border-color: var(--border-color-translucent);
	--offcanvas-box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.5);

	/* ===== PAGINATION ===== */
	--pagination-padding-x: 0.875rem;
	--pagination-padding-y: 0.5rem;
	--pagination-font-size: 1rem;
	--pagination-color: var(--link-color);
	--pagination-bg: var(--secondary-bg);
	--pagination-border-width: 1px;
	--pagination-border-color: var(--border-color);
	--pagination-border-radius: 0.5rem;
	--pagination-focus-color: var(--link-active-color);
	--pagination-focus-bg: var(--tertiary-bg);
	--pagination-focus-box-shadow: 0 0 0 0.25rem rgba(255, 75, 62, 0.25);
	--pagination-active-color: #F4F4F4;
	--pagination-active-bg: #FF4B3E;
	--pagination-active-border-color: #FF4B3E;
	--pagination-disabled-color: var(--gray-600);
	--pagination-disabled-bg: var(--secondary-bg);
	--pagination-disabled-border-color: var(--border-color);

	/* ===== POPOVER ===== */
	--popover-zindex: 1060;
	--popover-max-width: 276px;
	--popover-font-size: 0.875rem;
	--popover-bg: var(--secondary-bg);
	--popover-border-width: 1px;
	--popover-border-color: var(--border-color-translucent);
	--popover-border-radius: 0.875rem;
	--popover-inner-border-radius: calc(0.875rem - 1px);
	--popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
	--popover-header-padding-x: 1rem;
	--popover-header-padding-y: 0.5rem;
	--popover-header-font-size: 1rem;
	--popover-header-color: ;
	--popover-header-bg: var(--tertiary-bg);
	--popover-body-padding-x: 1rem;
	--popover-body-padding-y: 1rem;
	--popover-body-color: var(--body-color);
	--popover-arrow-width: 1rem;
	--popover-arrow-height: 0.5rem;
	--popover-arrow-border: var(--popover-border-color);

	/* ===== PROGRESS ===== */
	--progress-height: 1rem;
	--progress-font-size: 0.75rem;
	--progress-bg: var(--secondary-bg);
	--progress-border-radius: 50rem;
	--progress-box-shadow: inset 0 1px 2px rgba(var(--black-rgb), 0.3);
	--progress-bar-color: #F4F4F4;
	--progress-bar-bg: #FF4B3E;
	--progress-bar-transition: width 0.6s ease;

	/* ===== SPINNER ===== */
	--spinner-width: 2rem;
	--spinner-height: 2rem;
	--spinner-vertical-align: -0.125em;
	--spinner-border-width: 0.25em;
	--spinner-animation-speed: 0.75s;

	/* ===== TABLE ===== */
	--table-color: var(--body-color);
	--table-bg: transparent;
	--table-border-color: var(--border-color);
	--table-accent-bg: transparent;
	--table-striped-color: var(--body-color);
	--table-striped-bg: rgba(var(--white-rgb), var(--opacity-5));
	--table-active-color: var(--body-color);
	--table-active-bg: rgba(var(--white-rgb), 0.1);

	/* ===== TOAST ===== */
	--toast-zindex: 1090;
	--toast-padding-x: 1rem;
	--toast-padding-y: 0.75rem;
	--toast-spacing: 1em;
	--toast-max-width: 350px;
	--toast-font-size: 0.875rem;
	--toast-color: ;
	--toast-bg: rgba(21, 27, 34, 0.92);
	--toast-border-width: 1px;
	--toast-border-color: var(--border-color-translucent);
	--toast-border-radius: 0.875rem;
	--toast-box-shadow: 0 0.5rem 1rem var(--shadow-color-medium);
	--toast-header-color: var(--gray-600);
	--toast-header-bg: rgba(21, 27, 34, 0.85);
	--toast-header-border-color: rgba(var(--white-rgb), var(--opacity-10));

	/* ===== TOOLTIP ===== */
	--tooltip-zindex: 1070;
	--tooltip-max-width: 200px;
	--tooltip-padding-x: 0.5rem;
	--tooltip-padding-y: 0.25rem;
	--tooltip-margin: ;
	--tooltip-font-size: 0.875rem;
	--tooltip-color: #1E1E1E;
	--tooltip-bg: #F4F4F4;
	--tooltip-border-radius: 0.5rem;
	--tooltip-opacity: 0.95;
	--tooltip-arrow-width: 0.8rem;
	--tooltip-arrow-height: 0.4rem;

	/* ===== BOOTSTRAP PALETTE ===== */
	--primary: #FF4B3E;
	--secondary: #48525D;
	--success: #4AA664;
	--info: #7FB7C6;
	--warning: #F5C518;
	--danger: #ff7a73;
	--light: #1B2027;
	--dark: #0F1318;
	--primary-rgb: 255, 75, 62;
	--secondary-rgb: 72, 82, 93;
	--success-rgb: 74, 166, 100;
	--info-rgb: 127, 183, 198;
	--warning-rgb: 245, 197, 24;
	--danger-rgb: 255, 122, 115;
	--light-rgb: 27, 32, 39;
	--dark-rgb: 15, 19, 24;
	--primary-text-emphasis: #FFB5AE;
	--secondary-text-emphasis: #cfd6de;
	--success-text-emphasis: #bde8c9;
	--info-text-emphasis: #BCDFE8;
	--warning-text-emphasis: #FFD84A;
	--danger-text-emphasis: #FFB7B2;
	--light-text-emphasis: #d2d8df;
	--dark-text-emphasis: #d2d8df;
	--primary-bg-subtle: #3a1511;
	--secondary-bg-subtle: #1e2430;
	--success-bg-subtle: #0f2a1b;
	--info-bg-subtle: #0d2232;
	--warning-bg-subtle: #2a1e06;
	--danger-bg-subtle: #3a1511;
	--light-bg-subtle: #12161d;
	--dark-bg-subtle: #1e2430;
	--primary-border-subtle: #7a3028;
	--secondary-border-subtle: #2b323b;
	--success-border-subtle: #2b5b40;
	--info-border-subtle: #254861;
	--warning-border-subtle: #5a3c0e;
	--danger-border-subtle: #7a3028;
	--light-border-subtle: #222831;
	--dark-border-subtle: #2b323b;

	/* ===== HERO / BANNER OVERLAY ===== */
	--hero-height: 60vh;
	--hero-color: var(--body-color);
	--hero-bg-repeat: no-repeat;
	--hero-bg-attachment: scroll;
	--hero-bg-position: top center;
	--hero-bg-size: cover;
	--hero-border-bottom: solid var(--accent-color-secondary);
	--hero-overlay-bg: hsla(0, 0%, 0%, 0.4);
	--hero-overlay-bg-position: center;
	--hero-overlay-bg-size: cover;
	--hero-overlay-padding: 1.5em;
	--hero-overlay-text-align: center;
	--hero-overlay-text-color: var(--body-color);

	/* ===== HERO VARIANTS ===== */
	/* Primary — sky-tinted darker, subtle overlay */
	--hero-primary-bg-color: #12293A;
	--hero-primary-overlay: linear-gradient(135deg, rgba(14, 19, 24, 0.65), rgba(18, 41, 58, 0.55));
	--hero-primary-color: #F4F4F4;

	/* Secondary — near-black, heavier overlay */
	--hero-secondary-bg-color: #0E1318;
	--hero-secondary-overlay: linear-gradient(rgba(14, 19, 24, 0.82), rgba(14, 19, 24, 0.82));
	--hero-secondary-color: #F4F4F4;

	/* ===== HERO CARD (inner .hero element) ===== */
	/* Default card — uses primary variant values */
	--hero-card-bg: var(--hero-primary-bg-color);
	--hero-card-color: var(--hero-primary-color);
	--hero-card-overlay: var(--hero-primary-overlay);
	--hero-card-border-radius: 1.25rem;
	--hero-card-padding-x: 2rem;
	--hero-card-padding-y: 3rem;
	--hero-card-max-width: 800px;

	/* Alternative card — uses secondary variant values */
	--hero-alt-card-bg: var(--hero-secondary-bg-color);
	--hero-alt-card-color: var(--hero-secondary-color);
	--hero-alt-card-overlay: var(--hero-secondary-overlay);
	--hero-alt-card-border-radius: 1.25rem;
	--hero-alt-card-padding-x: 2rem;
	--hero-alt-card-padding-y: 3rem;
	--hero-alt-card-max-width: 600px;

	/* ===== BLOCK COLORS (top-a / top-b / bottom-a / bottom-b) ===== */
	--block-color-1: var(--secondary-bg);
	--block-text-1:  var(--body-color);

	--block-color-2: var(--accent-color-primary);
	--block-text-2:  #F4F4F4;

	--block-color-3: rgba(245, 197, 24, 0.15);
	--block-text-3:  #F5C518;

	--block-color-4: rgba(156, 206, 219, 0.12);
	--block-text-4:  #9CCEDB;

	/* ===== BLOCK COLOR OVERRIDES ===== */
	--block-highlight-bg:   rgba(245, 197, 24, 0.18);
	--block-highlight-text: #F5C518;

	--block-cta-bg:         #FF4B3E;
	--block-cta-text:       #F4F4F4;

	--block-alert-bg:       rgba(255, 75, 62, 0.18);
	--block-alert-text:     #FF4B3E;

	/* ===== FOOTER ===== */
	--footer-padding-top: 1.5rem;
	--footer-padding-bottom: 80px;
	--footer-grid-padding-y: 2.5rem;
	--footer-grid-padding-x: 0.5em;

	/* ===== THEME FAB ===== */
	--theme-fab-bg: #E6EBF1;
	--theme-fab-color: #0E1318;
	--theme-fab-btn-bg: transparent;
	--theme-fab-border: rgba(0, 0, 0, 0.15);

	/* ===== OFFLINE PAGE ===== */
	--offline-card-bg: rgba(0, 0, 0, 0.6);

	/* ===== COMPONENT-SPECIFIC COLORS ===== */
	--mod-finder-link-hover: #5a6470;
	--form-legend-color: #B8C3CB;
	--border-gray: #3a4250;
	--subhead-color: #B8C3CB;
	--box-shadow-gray: #1a2027;
	--btn-active-text-gray: #7a8490;
	--indicator-success-bg: var(--success);
	--item-list-color: #2a2f34;
	--notification-badge-bg: var(--danger);
	--content-bg-gray: #2b323b;
	--taba-btn-green: #5a9c2f;
	--taba-btn-blue: #3d75a8;
	--taba-btn-red: #c43620;
	--taba-btn-gray: #6a7080;
	--taba-msg-bg: #1e2430;
	--toc-link-color: #B8C3CB;
	--toc-link-active-color: #FF4B3E;
	--choices-disabled-bg: #2b323b;
	--choices-input-bg: var(--body-bg);
	--choices-border-light: #48525d;
	--choices-arrow-color: #B8C3CB;
	--choices-inner-bg: #1a2027;
	--choices-focused-border: #FF4B3E;
	--choices-dropdown-bg: var(--body-bg);
	--choices-item-bg: #3a1511;
	--choices-item-border: #4a1c17;
	--choices-item-hover-bg: #4a1c17;
	--choices-item-hover-border: #5a241e;
	--choices-item-disabled-bg: #48525d;
	--choices-item-disabled-border: #36404a;
	--choices-item-highlighted: #2b323b;
	--choices-input-inner-bg: #1a2027;

	/* ===== VIRTUEMART (VM) ===== */
	/* VM Surfaces */
	--vm-surface: var(--secondary-bg);
	--vm-surface-2: var(--tertiary-bg);
	--vm-text: var(--body-color);
	--vm-text-strong: #FFFFFF;
	--vm-text-muted: var(--gray-700);
	--vm-border: var(--border-color);
	--vm-price-color: var(--success);

	/* VM Layout and Density */
	--vm-container-max-width: 1200px;
	--vm-section-gap: 2rem;
	--vm-block-radius: var(--border-radius);
	--vm-block-shadow: var(--box-shadow-sm);

	/* VM Typography */
	--vm-category-title-size: 2rem;
	--vm-subcategory-title-size: 1.5rem;
	--vm-page-title-size: 1.75rem;
	--vm-products-type-title-size: 1.25rem;
	--vm-product-title-size: 1.125rem;
	--vm-product-title-weight: 500;
	--vm-products-type-title-weight: 600;
	--vm-price-size: 1.5rem;
	--vm-price-detail-size: 1.125rem;
	--vm-price-desc-size: 0.875rem;

	/* VM Controls */
	--vm-input-radius: var(--border-radius);
	--vm-input-shadow: var(--box-shadow-sm);
	--vm-qty-width: 80px;
	--vm-cart-dropdown-min-width: 300px;

	/* VM Alerts */
	--vm-alert-radius: var(--border-radius);
	--vm-alert-shadow: var(--box-shadow-sm);
	--vm-availability-bg: var(--success-bg-subtle);
	--vm-availability-text: var(--success);

	/* VM Buttons */
	--vm-btn-padding-x: 1rem;
	--vm-btn-padding-y: 0.5rem;
	--vm-btn-radius: var(--border-radius);
	--vm-btn-shadow: var(--box-shadow-sm);
	--vm-btn-primary-bg: var(--primary);
	--vm-btn-primary-text: #1E1E1E;
	--vm-btn-primary-border: var(--primary);
	--vm-btn-secondary-bg: var(--secondary);
	--vm-btn-secondary-text: #F4F4F4;
	--vm-btn-secondary-border: var(--secondary);

	/* VM Image Overlay Controls */
	--vm-image-overlay-gap-x: 0.5rem;
	--vm-image-overlay-gap-y: 0.5rem;
	--vm-image-overlay-raise: 0.25rem;
	--vm-image-overlay-btn-size: 2.5rem;
	--vm-image-overlay-btn-radius: 50%;
	--vm-image-overlay-btn-bg: rgba(0, 0, 0, 0.7);
	--vm-image-overlay-btn-bg-hover: rgba(0, 0, 0, 0.85);
	--vm-image-overlay-btn-border-color: rgba(255, 255, 255, 0.2);
	--vm-image-overlay-btn-border-width: 1px;
	--vm-image-overlay-btn-color: var(--body-color);
	--vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);

	/* VM Vendor Menu */
	--vm-vendor-menu-bg: var(--secondary-bg);
	--vm-vendor-menu-border: var(--border-color);
	--vm-vendor-menu-radius: var(--border-radius);
	--vm-vendor-menu-shadow: var(--box-shadow-sm);
	--vm-vendor-menu-item-gap: 0.25rem;
	--vm-vendor-menu-item-padding-x: 1rem;
	--vm-vendor-menu-item-padding-y: 0.5rem;
	--vm-vendor-menu-pill-radius: 50rem;
	--vm-vendor-menu-link: var(--link-color);
	--vm-vendor-menu-link-hover: var(--link-hover-color);
	--vm-vendor-menu-link-active: var(--primary);
	--vm-vendor-menu-hover-bg: var(--tertiary-bg);

	/* ===== GABLE ===== */
	--gab-blue: #9CCEDB;
	--gab-green: #78D694;
	--gab-red: #FF8E86;
	--gab-orange: #FFB074;
	--gab-gray1: #868e96;
	--gab-gray2: #adb5bd;
	--gab-gray3: #ced4da;
}

/* ============================================================
 * BUTTON BASE + VARIANTS
 * Kept at stylesheet root (not nested) because they don't depend
 * on the data-bs-theme selector — they style .btn regardless of
 * theme. Dark-mode-specific colors come from CSS variables above.
 * ============================================================ */

.btn {
	--btn-padding-x: 1.5rem;
	--btn-padding-y: 0.65rem;
	--btn-font-family: inherit;
	--btn-font-size: 1rem;
	--btn-font-weight: 600;
	--btn-line-height: 1.5;
	--btn-color: var(--black);
	--btn-bg: var(--body-bg);
	--btn-border-width: 1px;
	--btn-border-color: transparent;
	--btn-border-radius: var(--border-radius);
	--btn-active-border-color: transparent;
	--btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 1px rgba(0, 0, 0, 0.3);
	--btn-disabled-opacity: 0.65;
	--btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5);
	display: inline-block;
	padding: var(--btn-padding-y) var(--btn-padding-x);
	font-family: var(--btn-font-family);
	font-size: var(--btn-font-size);
	font-weight: var(--btn-font-weight);
	line-height: var(--btn-line-height);
	color: var(--btn-color);
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	cursor: pointer;
	user-select: none;
	border: var(--btn-border-width) solid var(--btn-border-color);
	border-radius: var(--btn-border-radius);
	background-color: var(--btn-bg);
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Buttons — CF brand colors with WCAG-AA contrast */
.btn-primary {
	--btn-color: #1E1E1E;
	--btn-bg: #FF4B3E;
	--btn-border-color: #F4F4F4;
	--btn-hover-color: #1E1E1E;
	--btn-hover-bg: #FF6B60;
	--btn-hover-border-color: #F4F4F4;
	--btn-focus-shadow-rgb: 255, 75, 62;
	--btn-active-color: #1E1E1E;
	--btn-active-bg: #E03828;
	--btn-active-border-color: #F4F4F4;
	--btn-disabled-color: #8F8F8F;
	--btn-disabled-bg: rgba(255, 75, 62, 0.35);
	--btn-disabled-border-color: #48525D;
}

.btn-secondary {
	--btn-color: #1E1E1E;
	--btn-bg: #9CCEDB;
	--btn-border-color: #F4F4F4;
	--btn-hover-color: #1E1E1E;
	--btn-hover-bg: #7FB7C6;
	--btn-hover-border-color: #F4F4F4;
	--btn-focus-shadow-rgb: 156, 206, 219;
	--btn-active-color: #1E1E1E;
	--btn-active-bg: #68A1B0;
	--btn-active-border-color: #F4F4F4;
}

.btn-success {
	--btn-color: #1E1E1E;
	--btn-bg: #78D694;
	--btn-border-color: #F4F4F4;
	--btn-hover-color: #1E1E1E;
	--btn-hover-bg: #9CE3B2;
	--btn-hover-border-color: #F4F4F4;
	--btn-focus-shadow-rgb: 120, 214, 148;
	--btn-active-color: #1E1E1E;
	--btn-active-bg: #5EBE7A;
	--btn-active-border-color: #F4F4F4;
	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--btn-disabled-color: #1E1E1E;
	--btn-disabled-bg: #78D694;
	--btn-disabled-border-color: #78D694;
}

.btn-info {
	--btn-color: #1E1E1E;
	--btn-bg: #9CCEDB;
	--btn-border-color: #F4F4F4;
	--btn-hover-color: #1E1E1E;
	--btn-hover-bg: #7FB7C6;
	--btn-hover-border-color: #F4F4F4;
	--btn-focus-shadow-rgb: 156, 206, 219;
	--btn-active-color: #1E1E1E;
	--btn-active-bg: #68A1B0;
	--btn-active-border-color: #F4F4F4;
	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--btn-disabled-color: #1E1E1E;
	--btn-disabled-bg: #9CCEDB;
	--btn-disabled-border-color: #9CCEDB;
}

.btn-warning {
	--btn-color: #1E1E1E;
	--btn-bg: #F5C518;
	--btn-border-color: #F4F4F4;
	--btn-hover-color: #1E1E1E;
	--btn-hover-bg: #FFD84A;
	--btn-hover-border-color: #F4F4F4;
	--btn-focus-shadow-rgb: 245, 197, 24;
	--btn-active-color: #1E1E1E;
	--btn-active-bg: #D9AE0F;
	--btn-active-border-color: #F4F4F4;
	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--btn-disabled-color: #1E1E1E;
	--btn-disabled-bg: #F5C518;
	--btn-disabled-border-color: #F5C518;
}

.btn-danger {
	--btn-color: #1E1E1E;
	--btn-bg: #ff7a73;
	--btn-border-color: #F4F4F4;
	--btn-hover-color: #1E1E1E;
	--btn-hover-bg: #e5615a;
	--btn-hover-border-color: #F4F4F4;
	--btn-focus-shadow-rgb: 255, 122, 115;
	--btn-active-color: #1E1E1E;
	--btn-active-bg: #c04a43;
	--btn-active-border-color: #F4F4F4;
	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--btn-disabled-color: #1E1E1E;
	--btn-disabled-bg: #ffb8b4;
	--btn-disabled-border-color: #ffb8b4;
}

.btn-light {
	--btn-color: #1E1E1E;
	--btn-bg: #F4F4F4;
	--btn-border-color: #F4F4F4;
	--btn-hover-color: #1E1E1E;
	--btn-hover-bg: #FFFFFF;
	--btn-hover-border-color: #FFFFFF;
	--btn-focus-shadow-rgb: 244, 244, 244;
	--btn-active-color: #1E1E1E;
	--btn-active-bg: #E0E0E0;
	--btn-active-border-color: #E0E0E0;
	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--btn-disabled-color: #1E1E1E;
	--btn-disabled-bg: #F4F4F4;
	--btn-disabled-border-color: #F4F4F4;
}

.btn-dark {
	--btn-color: #F4F4F4;
	--btn-bg: #1E1E1E;
	--btn-border-color: #F4F4F4;
	--btn-hover-color: #F4F4F4;
	--btn-hover-bg: #333333;
	--btn-hover-border-color: #F4F4F4;
	--btn-focus-shadow-rgb: 30, 30, 30;
	--btn-active-color: #F4F4F4;
	--btn-active-bg: #000000;
	--btn-active-border-color: #F4F4F4;
	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--btn-disabled-color: #F4F4F4;
	--btn-disabled-bg: #1E1E1E;
	--btn-disabled-border-color: #1E1E1E;
}

/* Outline variants — thin stroke over dark backgrounds */
.btn-outline-primary {
	--btn-color: #FF4B3E;
	--btn-border-color: #FF4B3E;
	--btn-hover-color: #1E1E1E;
	--btn-hover-bg: #FF4B3E;
	--btn-hover-border-color: #F4F4F4;
	--btn-focus-shadow-rgb: 255, 75, 62;
	--btn-active-color: #1E1E1E;
	--btn-active-bg: #E03828;
	--btn-active-border-color: #F4F4F4;
	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--btn-disabled-color: #FF4B3E;
	--btn-disabled-bg: transparent;
	--btn-disabled-border-color: #FF4B3E;
	--gradient: none;
}

.btn-outline-secondary {
	--btn-color: #9CCEDB;
	--btn-border-color: #9CCEDB;
	--btn-hover-color: #1E1E1E;
	--btn-hover-bg: #9CCEDB;
	--btn-hover-border-color: #F4F4F4;
	--btn-focus-shadow-rgb: 156, 206, 219;
	--btn-active-color: #1E1E1E;
	--btn-active-bg: #7FB7C6;
	--btn-active-border-color: #F4F4F4;
	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--btn-disabled-color: #9CCEDB;
	--btn-disabled-bg: transparent;
	--btn-disabled-border-color: #9CCEDB;
	--gradient: none;
}

.btn-outline-success {
	--btn-color: #78D694;
	--btn-border-color: #78D694;
	--btn-hover-color: #1E1E1E;
	--btn-hover-bg: #78D694;
	--btn-hover-border-color: #F4F4F4;
	--btn-focus-shadow-rgb: 120, 214, 148;
	--btn-active-color: #1E1E1E;
	--btn-active-bg: #5EBE7A;
	--btn-active-border-color: #F4F4F4;
	--btn-disabled-color: #78D694;
	--btn-disabled-bg: transparent;
	--btn-disabled-border-color: #78D694;
	--gradient: none;
}

.btn-outline-info {
	--btn-color: #9CCEDB;
	--btn-border-color: #9CCEDB;
	--btn-hover-color: #1E1E1E;
	--btn-hover-bg: #9CCEDB;
	--btn-hover-border-color: #F4F4F4;
	--btn-focus-shadow-rgb: 156, 206, 219;
	--btn-active-color: #1E1E1E;
	--btn-active-bg: #7FB7C6;
	--btn-active-border-color: #F4F4F4;
	--btn-disabled-color: #9CCEDB;
	--btn-disabled-bg: transparent;
	--btn-disabled-border-color: #9CCEDB;
	--gradient: none;
}

.btn-outline-warning {
	--btn-color: #F5C518;
	--btn-border-color: #F5C518;
	--btn-hover-color: #1E1E1E;
	--btn-hover-bg: #F5C518;
	--btn-hover-border-color: #F4F4F4;
	--btn-focus-shadow-rgb: 245, 197, 24;
	--btn-active-color: #1E1E1E;
	--btn-active-bg: #D9AE0F;
	--btn-active-border-color: #F4F4F4;
	--btn-disabled-color: #F5C518;
	--btn-disabled-bg: transparent;
	--btn-disabled-border-color: #F5C518;
	--gradient: none;
}

.btn-outline-danger {
	--btn-color: #ff7a73;
	--btn-border-color: #ff7a73;
	--btn-hover-color: #1E1E1E;
	--btn-hover-bg: #ff7a73;
	--btn-hover-border-color: #F4F4F4;
	--btn-focus-shadow-rgb: 255, 122, 115;
	--btn-active-color: #1E1E1E;
	--btn-active-bg: #e5615a;
	--btn-active-border-color: #F4F4F4;
	--btn-disabled-color: #ff7a73;
	--btn-disabled-bg: transparent;
	--btn-disabled-border-color: #ff7a73;
	--gradient: none;
}

.btn-outline-light {
	--btn-color: #F4F4F4;
	--btn-border-color: #F4F4F4;
	--btn-hover-color: #1E1E1E;
	--btn-hover-bg: #F4F4F4;
	--btn-hover-border-color: #F4F4F4;
	--btn-focus-shadow-rgb: 244, 244, 244;
	--btn-active-color: #1E1E1E;
	--btn-active-bg: #E0E0E0;
	--btn-active-border-color: #E0E0E0;
	--btn-disabled-color: #F4F4F4;
	--btn-disabled-bg: transparent;
	--btn-disabled-border-color: #F4F4F4;
	--gradient: none;
}

.btn-outline-dark {
	--btn-color: #B8C3CB;
	--btn-border-color: #B8C3CB;
	--btn-hover-color: #1E1E1E;
	--btn-hover-bg: #B8C3CB;
	--btn-hover-border-color: #F4F4F4;
	--btn-focus-shadow-rgb: 184, 195, 203;
	--btn-active-color: #1E1E1E;
	--btn-active-bg: #9CA8B0;
	--btn-active-border-color: #F4F4F4;
	--btn-disabled-color: #B8C3CB;
	--btn-disabled-bg: transparent;
	--btn-disabled-border-color: #B8C3CB;
	--gradient: none;
}

/* Links as buttons */
.btn-link {
	--btn-font-weight: 500;
	--btn-color: var(--color-link);
	--btn-bg: transparent;
	--btn-border-color: transparent;
	--btn-hover-color: var(--link-hover-color);
	--btn-hover-border-color: transparent;
	--btn-active-color: var(--link-hover-color);
	--btn-active-border-color: transparent;
	--btn-disabled-color: #6d7781;
	--btn-disabled-border-color: transparent;
	--btn-box-shadow: none;
	--btn-focus-shadow-rgb: 255, 75, 62;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}