@charset "UTF-8";
/* Copyright (C) 2025 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: MokoCassiopeia
 PATH: ./media/templates/site/mokocassiopeia/css/global/dark/colors_standard.css
 VERSION: 03.05.00
 BRIEF: Standard dark mode color definitions for MokoCassiopeia template
 */

/* -----------------------------------------------
 * DARK THEME
 * --------------------------------------------- */

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

/* ===== BRAND & THEME COLORS ===== */
--color-primary: #112855;
--accent-color-primary: #3f8ff0;
--accent-color-secondary: #6fb3ff;

/* ===== NAVIGATION ===== */
--mainmenu-nav-link-color: #fff;
--nav-text-color: gray;
--nav-bg-color: var(--color-primary);

/* ===== LINKS ===== */
--color-link: white;
--color-hover: gray;
--color-active: var(--mainmenu-nav-link-color);
--link-color: #8ab4f8;
--link-color-rgb: 138, 180, 248;
--link-decoration: underline;
--link-hover-color: #c3d6ff;
--link-hover-color-rgb: 195, 214, 255;
--link-active-color: var(--link-color);

/* ===== OFFCANVAS ===== */
--offcanvas-color: var(--body-color);
--offcanvas-padding-x: 1rem;
--offcanvas-padding-y: 1rem;

/* ===== NAVBAR ===== */
--navbar-padding-x: 1rem;
--navbar-padding-y: 0.5rem;
--navbar-color: var(--nav-text-color);
--navbar-active-color: var(--mainmenu-nav-link-color);
--navbar-disabled-color: #6c757d;
--navbar-brand-padding-y: 0.3125rem;
--navbar-brand-margin-end: 1rem;
--navbar-brand-font-size: 1.25rem;
--navbar-brand-color: var(--nav-text-color);
--navbar-brand-active-color: var(--mainmenu-nav-link-color);
--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(255, 255, 255, 0.1);
--navbar-toggler-border-radius: 0.25rem;
--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: 400;
--nav-link-color: var(--nav-text-color);
--nav-link-active-color: var(--mainmenu-nav-link-color);
--nav-link-disabled-color: #6c757d;

/* ===== TYPOGRAPHY & BODY ===== */
--font-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--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: #f1f5f9;
--emphasis-color: #fff;
--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: #6d757e;
--code-color: #ff7abd;
--code-color-ink: var(--code-color, #e93f8e);
--highlight-color: #111;
--highlight-bg: #ffe28a1a;

/* ===== 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, #dfe3e7);
--border-color-soft: var(--border-color, #dfe3e7);
--kbd-bg: var(--secondary-bg, #eaedf0);
--kbd-ink: var(--body-bg, #fff);
--toc-bg: var(--secondary-bg, #eaedf0);
--toc-ink: var(--color-primary, #112855);
--selection-bg: var(--highlight-bg, #fbeea8);
--selection-ink: var(--body-color, #22262a);
--border: 5px;

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

/* ===== BOOTSTRAP PALETTE ===== */
--primary: #010156;
--secondary: #48525d;
--success: #4aa664;
--info: #4f7aa0;
--warning: #c77a00;
--danger: #c23a31;
--light: #1b2027;
--dark: #0f1318;
--primary-rgb: 1,1,86;
--secondary-rgb: 72,82,93;
--success-rgb: 74,166,100;
--info-rgb: 79,122,160;
--warning-rgb: 199,122,0;
--danger-rgb: 194,58,49;
--light-rgb: 27,32,39;
--dark-rgb: 15,19,24;
--primary-text-emphasis: #c7ccff;
--secondary-text-emphasis: #cfd6de;
--success-text-emphasis: #bde8c9;
--info-text-emphasis: #bcd6ee;
--warning-text-emphasis: #ffd9a6;
--danger-text-emphasis: #ffb7b2;
--light-text-emphasis: #d2d8df;
--dark-text-emphasis: #d2d8df;
--primary-bg-subtle: #0b1030;
--secondary-bg-subtle: #1e2430;
--success-bg-subtle: #0f2a1b;
--info-bg-subtle: #0d2232;
--warning-bg-subtle: #2a1e06;
--danger-bg-subtle: #2d1110;
--light-bg-subtle: #12161d;
--dark-bg-subtle: #1e2430;
--primary-border-subtle: #2b3a7a;
--secondary-border-subtle: #2b323b;
--success-border-subtle: #2b5b40;
--info-border-subtle: #254861;
--warning-border-subtle: #5a3c0e;
--danger-border-subtle: #5c2723;
--light-border-subtle: #222831;
--dark-border-subtle: #2b323b;

/* ===== ALERT LINK COLORS ===== */
--alert-primary-link-color: #b3c1ff;
--alert-secondary-link-color: #9fa6ad;
--alert-success-link-color: #a0e5b3;
--alert-info-link-color: #8eccf2;
--alert-warning-link-color: #ffe4a0;
--alert-danger-link-color: #ffa8a3;
--alert-light-link-color: #f0f4f8;
--alert-dark-link-color: #9fa6ad;

/* ===== LIST GROUP ITEM COLORS ===== */
--list-group-item-primary-color: #8ca3ff;
--list-group-item-primary-bg: #1a2550;
--list-group-item-primary-active-bg: #223066;
--list-group-item-secondary-color: #9fa6ad;
--list-group-item-secondary-bg: #2b323b;
--list-group-item-secondary-active-bg: #363d47;
--list-group-item-success-color: #a0e5b3;
--list-group-item-success-bg: #1e3d2d;
--list-group-item-success-active-bg: #275538;
--list-group-item-info-color: #8eccf2;
--list-group-item-info-bg: #1a3448;
--list-group-item-info-active-bg: #234459;
--list-group-item-warning-color: #ffe4a0;
--list-group-item-warning-bg: #4a3410;
--list-group-item-warning-active-bg: #5c4216;
--list-group-item-danger-color: #ffa8a3;
--list-group-item-danger-bg: #4a1e1c;
--list-group-item-danger-active-bg: #5c2823;
--list-group-item-light-color: #e9ecef;
--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;

/* ===== LINK UTILITY COLORS ===== */
--link-primary-color: hsl(240, 98%, 50%);
--link-primary-hover-color: hsl(240, 98%, 45%);
--link-secondary-color: hsl(210, 15%, 70%);
--link-secondary-hover-color: hsl(210, 15%, 65%);
--link-success-color: hsl(120, 40%, 60%);
--link-success-hover-color: hsl(120, 40%, 55%);
--link-info-color: hsl(207, 60%, 65%);
--link-info-hover-color: hsl(207, 60%, 60%);
--link-warning-color: hsl(38, 100%, 65%);
--link-warning-hover-color: hsl(38, 100%, 60%);
--link-danger-color: hsl(3, 85%, 65%);
--link-danger-hover-color: hsl(3, 85%, 60%);
--link-light-color: hsl(210, 20%, 90%);
--link-light-hover-color: hsl(210, 20%, 85%);
--link-dark-color: hsl(210, 10%, 35%);
--link-dark-hover-color: hsl(210, 10%, 30%);

/* ===== COMPONENT-SPECIFIC COLORS ===== */
--mod-finder-link-hover: #5a6470;
--form-legend-color: #9fa6ad;
--border-gray: #3a4250;
--subhead-color: #9fa6ad;
--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: #9fa6ad;
--toc-link-active-color: #91a4ff;
--choices-disabled-bg: #2b323b;
--choices-input-bg: var(--body-bg);
--choices-border-light: #48525d;
--choices-arrow-color: #9fa6ad;
--choices-inner-bg: #1a2027;
--choices-focused-border: #5472ff;
--choices-dropdown-bg: var(--body-bg);
--choices-item-bg: #1a5f75;
--choices-item-border: #1a748f;
--choices-item-hover-bg: #1a748f;
--choices-item-hover-border: #1a8aa8;
--choices-item-disabled-bg: #48525d;
--choices-item-disabled-border: #36404a;
--choices-item-highlighted: #2b323b;
--choices-input-inner-bg: #1a2027;

/* ===== STANDARD COLORS ===== */
--blue: #91a4ff;
--indigo: #b19cff;
--purple: #c0a5ff;
--pink: #ff8fc0;
--red: #ff7a73;
--orange: #ff9c4d;
--yellow: #ffd166;
--green: #78d694;
--teal: #76e3ff;
--cyan: #6fb7ff;
--black: #000;
--white: #fff;

/* ===== 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: 255, 255, 255;
--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;

/* ===== 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));
--border-color-translucent: rgba(var(--white-rgb), var(--opacity-10));
--highlight-translucent: rgba(var(--white-rgb), var(--opacity-5));

/* ===== HEADER BACKGROUND ===== */
--header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg');
--header-background-attachment: fixed;
--header-background-repeat: repeat;
--header-background-size: auto;

/* ===== CONTAINER BACKGROUNDS ===== */
/* Below Topbar Container */
--container-below-topbar-bg-image: none;
--container-below-topbar-bg-color: transparent;
--container-below-topbar-bg-position: center;
--container-below-topbar-bg-attachment: fixed;
--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: transparent;
--container-top-a-bg-position: center;
--container-top-a-bg-attachment: fixed;
--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: transparent;
--container-top-b-bg-position: center;
--container-top-b-bg-attachment: fixed;
--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: #dbe3ff;

/* 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: repeat;
--container-sidebar-bg-size: auto;
--container-sidebar-border: none;
--container-sidebar-border-radius: 0;

/* Bottom A Container */
--container-bottom-a-bg-image: none;
--container-bottom-a-bg-color: transparent;
--container-bottom-a-bg-position: center;
--container-bottom-a-bg-attachment: fixed;
--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: transparent;
--container-bottom-b-bg-position: center;
--container-bottom-b-bg-attachment: fixed;
--container-bottom-b-bg-repeat: no-repeat;
--container-bottom-b-bg-size: cover;
--container-bottom-b-border: none;
--container-bottom-b-border-radius: 0;

/* ===== BORDERS ===== */
--border-width: 1px;
--border-style: solid;
--border-color: #2b323b;
--border-color-translucent: #ffffff26;
--border-radius: .25rem;
--border-radius-sm: .2rem;
--border-radius-lg: .3rem;
--border-radius-xl: .3rem;
--border-radius-xxl: 2rem;
--border-radius-2xl: var(--border-radius-xxl);
--border-radius-pill: 50rem;

/* ===== SHADOWS ===== */
--box-shadow: 0 .5rem 1rem #00000066;
--box-shadow-sm: 0 .125rem .25rem #00000040;
--box-shadow-lg: 0 1rem 3rem #00000080;
--box-shadow-inset: inset 0 1px 2px #00000040;

/* ===== FOCUS & FORMS ===== */
--focus-ring-width: .25rem;
--focus-ring-opacity: .6;
--focus-ring-color: #5472ff66;
--input-color: #e6ebf1;
--input-bg: #1a2332;
--input-border-color: #3a4250;
--input-focus-border-color: #5472ff;
--input-focus-box-shadow: 0 0 0 0.25rem rgba(84, 114, 255, 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: #ff8e86;
--form-invalid-border-color: #ff8e86;

/* ===== 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);

/* ===== CARDS ===== */
--card-spacer-y: 1rem;
--card-spacer-x: 1rem;
--card-title-spacer-y: 0.5rem;
--card-border-width: 1px;
--card-border-color: var(--border-color);
--card-border-radius: var(--border-radius);
--card-box-shadow: none;
--card-inner-border-radius: calc(var(--border-radius) - 1px);
--card-cap-padding-y: 0.5rem;
--card-cap-padding-x: 1rem;
--card-cap-bg: rgba(255, 255, 255, 0.03);
--card-cap-color: var(--body-color);
--card-height: auto;
--card-color: var(--body-color);
--card-bg: var(--secondary-bg);
--card-img-overlay-padding: 1rem;
--card-group-margin: 0.75rem;

/* ===== 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: #ffffff;
--vm-btn-primary-border: var(--primary);
--vm-btn-secondary-bg: var(--secondary);
--vm-btn-secondary-text: #ffffff;
--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: #4d9fff;
--gab-green: #5cb85c;
--gab-red: #ff6b6b;
--gab-orange: #ff9f5a;
--gab-gray1: #868e96;
--gab-gray2: #adb5bd;
--gab-gray3: #ced4da;
}

.btn {
	--btn-padding-x: 1rem;
	--btn-padding-y: 0.6rem;
	--btn-font-family: inherit;
	--btn-font-size: 1rem;
	--btn-font-weight: 400;
	--btn-line-height: 1.5;
	--btn-color: var(--white);
	--btn-bg: transparent;
	--btn-border-width: 1px;
	--btn-border-color: transparent;
	--btn-border-radius: 0.25rem;
	--btn-active-border-color: transparent;
	--btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
	--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;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	border: var(--btn-border-width) solid var(--btn-border-color);
	border-radius: var(--btn-border-radius);
	background-color: var(--btn-bg);
	-webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
	-o-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;
	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;
	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, -webkit-box-shadow 0.15s ease-in-out;
}

/* Buttons — inherit brand hues; ensure strong contrast on dark bg */
.btn-primary {
	--btn-color: hsl(0, 0%, 100%);
	--btn-bg: hsl(240, 98%, 17%);
	--btn-border-color: hsl(240, 98%, 17%);
	--btn-hover-color: hsl(0, 0%, 100%);
	--btn-hover-bg: #010149;
	--btn-hover-border-color: #010145;
	--btn-focus-shadow-rgb: 84, 114, 255;
	--btn-active-color: hsl(0, 0%, 100%);
	--btn-active-bg: #010145;
	--btn-active-border-color: #010141;
}

.btn-secondary {
	--btn-color: var(--nav-text-color);
	--btn-bg: var(--nav-bg-color);
	--btn-border-color: #3a4250;
	--btn-hover-color: #fff;
	--btn-hover-bg: #1b2a55;
	--btn-hover-border-color: #162448;
	--btn-focus-shadow-rgb: 84, 114, 255;
	--btn-active-color: #fff;
	--btn-active-bg: #162448;
	--btn-active-border-color: #12203f;
}

.btn-success {
	--btn-color: hsl(0, 0%, 100%);
	--btn-bg: hsl(120, 35%, 45%);
	--btn-border-color: hsl(120, 35%, 45%);
	--btn-hover-color: hsl(0, 0%, 100%);
	--btn-hover-bg: hsl(120, 35%, 40%);
	--btn-hover-border-color: hsl(120, 35%, 38%);
	--btn-focus-shadow-rgb: 96, 180, 96;
	--btn-active-color: hsl(0, 0%, 100%);
	--btn-active-bg: hsl(120, 35%, 38%);
	--btn-active-border-color: hsl(120, 35%, 36%);
	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--btn-disabled-color: hsl(0, 0%, 100%);
	--btn-disabled-bg: hsl(120, 35%, 45%);
	--btn-disabled-border-color: hsl(120, 35%, 45%);
}

.btn-info {
	--btn-color: hsl(0, 0%, 100%);
	--btn-bg: hsl(207, 55%, 55%);
	--btn-border-color: hsl(207, 55%, 55%);
	--btn-hover-color: hsl(0, 0%, 100%);
	--btn-hover-bg: hsl(207, 55%, 50%);
	--btn-hover-border-color: hsl(207, 55%, 48%);
	--btn-focus-shadow-rgb: 100, 160, 210);
	--btn-active-color: hsl(0, 0%, 100%);
	--btn-active-bg: hsl(207, 55%, 48%);
	--btn-active-border-color: hsl(207, 55%, 46%);
	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--btn-disabled-color: hsl(0, 0%, 100%);
	--btn-disabled-bg: hsl(207, 55%, 55%);
	--btn-disabled-border-color: hsl(207, 55%, 55%);
}

.btn-warning {
	--btn-color: hsl(0, 0%, 0%);
	--btn-bg: hsl(38, 100%, 50%);
	--btn-border-color: hsl(38, 100%, 50%);
	--btn-hover-color: hsl(0, 0%, 0%);
	--btn-hover-bg: hsl(38, 100%, 45%);
	--btn-hover-border-color: hsl(38, 100%, 43%);
	--btn-focus-shadow-rgb: 220, 170, 40;
	--btn-active-color: hsl(0, 0%, 0%);
	--btn-active-bg: hsl(38, 100%, 43%);
	--btn-active-border-color: hsl(38, 100%, 41%);
	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--btn-disabled-color: hsl(0, 0%, 0%);
	--btn-disabled-bg: hsl(38, 100%, 50%);
	--btn-disabled-border-color: hsl(38, 100%, 50%);
}

.btn-danger {
	--btn-color: hsl(0, 0%, 100%);
	--btn-bg: hsl(3, 82%, 50%);
	--btn-border-color: hsl(3, 82%, 50%);
	--btn-hover-color: hsl(0, 0%, 100%);
	--btn-hover-bg: hsl(3, 82%, 45%);
	--btn-hover-border-color: hsl(3, 82%, 43%);
	--btn-focus-shadow-rgb: 220, 80, 80;
	--btn-active-color: hsl(0, 0%, 100%);
	--btn-active-bg: hsl(3, 82%, 43%);
	--btn-active-border-color: hsl(3, 82%, 41%);
	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--btn-disabled-color: hsl(0, 0%, 100%);
	--btn-disabled-bg: hsl(3, 82%, 50%);
	--btn-disabled-border-color: hsl(3, 82%, 50%);
}

.btn-light {
	--btn-color: hsl(0, 0%, 0%);
	--btn-bg: hsl(210, 17%, 85%);
	--btn-border-color: hsl(210, 17%, 85%);
	--btn-hover-color: hsl(0, 0%, 0%);
	--btn-hover-bg: hsl(210, 17%, 80%);
	--btn-hover-border-color: hsl(210, 17%, 78%);
	--btn-focus-shadow-rgb: 200, 205, 210;
	--btn-active-color: hsl(0, 0%, 0%);
	--btn-active-bg: hsl(210, 17%, 78%);
	--btn-active-border-color: hsl(210, 17%, 76%);
	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--btn-disabled-color: hsl(0, 0%, 0%);
	--btn-disabled-bg: hsl(210, 17%, 85%);
	--btn-disabled-border-color: hsl(210, 17%, 85%);
}

.btn-dark {
	--btn-color: hsl(0, 0%, 100%);
	--btn-bg: hsl(210, 10%, 20%);
	--btn-border-color: hsl(210, 10%, 20%);
	--btn-hover-color: hsl(0, 0%, 100%);
	--btn-hover-bg: hsl(210, 10%, 18%);
	--btn-hover-border-color: hsl(210, 10%, 16%);
	--btn-focus-shadow-rgb: 60, 65, 70;
	--btn-active-color: hsl(0, 0%, 100%);
	--btn-active-bg: hsl(210, 10%, 16%);
	--btn-active-border-color: hsl(210, 10%, 14%);
	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--btn-disabled-color: hsl(0, 0%, 100%);
	--btn-disabled-bg: hsl(210, 10%, 20%);
	--btn-disabled-border-color: hsl(210, 10%, 20%);
}

.btn-outline-primary {
	--btn-color: hsl(240, 98%, 40%);
	--btn-border-color: hsl(240, 98%, 40%);
	--btn-hover-color: hsl(0, 0%, 100%);
	--btn-hover-bg: hsl(240, 98%, 40%);
	--btn-hover-border-color: hsl(240, 98%, 40%);
	--btn-focus-shadow-rgb: 80, 80, 180;
	--btn-active-color: hsl(0, 0%, 100%);
	--btn-active-bg: hsl(240, 98%, 40%);
	--btn-active-border-color: hsl(240, 98%, 40%);
	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--btn-disabled-color: hsl(240, 98%, 40%);
	--btn-disabled-bg: transparent;
	--btn-disabled-border-color: hsl(240, 98%, 40%);
	--gradient: none;
}

.btn-outline-secondary {
	--btn-color: hsl(210, 20%, 60%);
	--btn-border-color: hsl(210, 20%, 60%);
	--btn-hover-color: hsl(0, 0%, 0%);
	--btn-hover-bg: hsl(210, 20%, 60%);
	--btn-hover-border-color: hsl(210, 20%, 60%);
	--btn-focus-shadow-rgb: 120, 140, 160;
	--btn-active-color: hsl(0, 0%, 0%);
	--btn-active-bg: hsl(210, 20%, 60%);
	--btn-active-border-color: hsl(210, 20%, 60%);
	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--btn-disabled-color: hsl(210, 20%, 60%);
	--btn-disabled-bg: transparent;
	--btn-disabled-border-color: hsl(210, 20%, 60%);
	--gradient: none;
}

.btn-outline-success {
	--btn-color: hsl(120, 35%, 55%);
	--btn-border-color: hsl(120, 35%, 55%);
	--btn-hover-color: hsl(0, 0%, 0%);
	--btn-hover-bg: hsl(120, 35%, 55%);
	--btn-hover-border-color: hsl(120, 35%, 55%);
	--btn-focus-shadow-rgb: 100, 190, 100;
	--btn-active-color: hsl(0, 0%, 0%);
	--btn-active-bg: hsl(120, 35%, 55%);
	--btn-active-border-color: hsl(120, 35%, 55%);
	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--btn-disabled-color: hsl(120, 35%, 55%);
	--btn-disabled-bg: transparent;
	--btn-disabled-border-color: hsl(120, 35%, 55%);
	--gradient: none;
}

.btn-outline-info {
	--btn-color: hsl(207, 55%, 65%);
	--btn-border-color: hsl(207, 55%, 65%);
	--btn-hover-color: hsl(0, 0%, 0%);
	--btn-hover-bg: hsl(207, 55%, 65%);
	--btn-hover-border-color: hsl(207, 55%, 65%);
	--btn-focus-shadow-rgb: 110, 170, 220;
	--btn-active-color: hsl(0, 0%, 0%);
	--btn-active-bg: hsl(207, 55%, 65%);
	--btn-active-border-color: hsl(207, 55%, 65%);
	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--btn-disabled-color: hsl(207, 55%, 65%);
	--btn-disabled-bg: transparent;
	--btn-disabled-border-color: hsl(207, 55%, 65%);
	--gradient: none;
}

.btn-outline-warning {
	--btn-color: hsl(38, 100%, 60%);
	--btn-border-color: hsl(38, 100%, 60%);
	--btn-hover-color: hsl(0, 0%, 0%);
	--btn-hover-bg: hsl(38, 100%, 60%);
	--btn-hover-border-color: hsl(38, 100%, 60%);
	--btn-focus-shadow-rgb: 240, 190, 70;
	--btn-active-color: hsl(0, 0%, 0%);
	--btn-active-bg: hsl(38, 100%, 60%);
	--btn-active-border-color: hsl(38, 100%, 60%);
	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--btn-disabled-color: hsl(38, 100%, 60%);
	--btn-disabled-bg: transparent;
	--btn-disabled-border-color: hsl(38, 100%, 60%);
	--gradient: none;
}

.btn-outline-danger {
	--btn-color: hsl(3, 82%, 60%);
	--btn-border-color: hsl(3, 82%, 60%);
	--btn-hover-color: hsl(0, 0%, 0%);
	--btn-hover-bg: hsl(3, 82%, 60%);
	--btn-hover-border-color: hsl(3, 82%, 60%);
	--btn-focus-shadow-rgb: 240, 100, 100;
	--btn-active-color: hsl(0, 0%, 0%);
	--btn-active-bg: hsl(3, 82%, 60%);
	--btn-active-border-color: hsl(3, 82%, 60%);
	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--btn-disabled-color: hsl(3, 82%, 60%);
	--btn-disabled-bg: transparent;
	--btn-disabled-border-color: hsl(3, 82%, 60%);
	--gradient: none;
}

/* Outline buttons on dark: keep readable borders */
.btn-outline-light {
	--btn-color: #e6ebf1;
	--btn-border-color: #e6ebf1;
	--btn-hover-color: #111;
	--btn-hover-bg: #e6ebf1;
	--btn-hover-border-color: #e6ebf1;
	--btn-active-color: #111;
	--btn-active-bg: #d7dce2;
	--btn-active-border-color: #d7dce2;
	--gradient: none;
}

.btn-outline-dark {
	--btn-color: hsl(210, 10%, 30%);
	--btn-border-color: hsl(210, 10%, 30%);
	--btn-hover-color: hsl(0, 0%, 100%);
	--btn-hover-bg: hsl(210, 10%, 30%);
	--btn-hover-border-color: hsl(210, 10%, 30%);
	--btn-focus-shadow-rgb: 70, 75, 80;
	--btn-active-color: hsl(0, 0%, 100%);
	--btn-active-bg: hsl(210, 10%, 30%);
	--btn-active-border-color: hsl(210, 10%, 30%);
	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--btn-disabled-color: hsl(210, 10%, 30%);
	--btn-disabled-bg: transparent;
	--btn-disabled-border-color: hsl(210, 10%, 30%);
	--gradient: none;
}

/* Links as buttons */
.btn-link {
	--btn-font-weight: 400;
	--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: 84, 114, 255;
	text-decoration: underline;
}