Complete CSS variable system: Add missing values, regenerate alternative colors, add Bootstrap/Joomla styles

Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com>

src/media/css/colors/dark/colors_alternative.css

@@ -12,34 +12,35 @@
  INGROUP: MokoCassiopeia
  PATH: ./media/templates/site/mokocassiopeia/css/global/dark/colors_alternative.css
  VERSION: 03.05.00
- BRIEF: Alternative dark mode color definitions for MokoCassiopeia template
+ BRIEF: Alternative dark mode color definitions (Teal & Purple) for MokoCassiopeia template
  */
 
 /* -----------------------------------------------
- * DARK THEME
+ * ALTERNATIVE DARK THEME - TEAL & PURPLE
  * --------------------------------------------- */
 
 :root[data-bs-theme='dark']{
 color-scheme: dark;
 
 /* ===== BRAND & THEME COLORS ===== */
---color-primary: #112855;
+--color-primary: #14b8a6;
---accent-color-primary: #3f8ff0;
+--accent-color-primary: #c084fc;
---accent-color-secondary: #6fb3ff;
+--accent-color-secondary: #d8b4fe;
 
 /* ===== NAVIGATION ===== */
 --mainmenu-nav-link-color: #fff;
---nav-text-color: var(--mainmenu-nav-link-color);
+--nav-text-color: #e2e8f0;
---nav-bg-color: var(--color-link);
+--nav-bg-color: #0f766e;
 
 /* ===== LINKS ===== */
---color-link: #224FAA;
+--color-link: #e9d5ff;
---color-hover: #224FAA;
+--color-hover: #c084fc;
---link-color: #8ab4f8;
+--color-active: var(--mainmenu-nav-link-color);
---link-color-rgb: 138, 180, 248;
+--link-color: #c084fc;
+--link-color-rgb: 192, 132, 252;
 --link-decoration: underline;
---link-hover-color: #c3d6ff;
+--link-hover-color: #d8b4fe;
---link-hover-color-rgb: 195, 214, 255;
+--link-hover-color-rgb: 216, 180, 254;
 --link-active-color: var(--link-color);
 
 /* ===== OFFCANVAS ===== */
@@ -52,7 +53,7 @@ color-scheme: dark;
 --navbar-padding-y: 0.5rem;
 --navbar-color: var(--nav-text-color);
 --navbar-active-color: var(--mainmenu-nav-link-color);
---navbar-disabled-color: #6c757d;
+--navbar-disabled-color: #475569;
 --navbar-brand-padding-y: 0.3125rem;
 --navbar-brand-margin-end: 1rem;
 --navbar-brand-font-size: 1.25rem;
@@ -71,7 +72,7 @@ color-scheme: dark;
 --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;
+--nav-link-disabled-color: #475569;
 
 /* ===== 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';
@@ -80,22 +81,22 @@ color-scheme: dark;
 --body-font-size: 1rem;
 --body-font-weight: 400;
 --body-line-height: 1.5;
---body-color: #e6ebf1;
+--body-color: #e2e8f0;
---body-color-rgb: 230, 235, 241;
+--body-color-rgb: 226, 232, 240;
---body-bg: #0e1318;
+--body-bg: #0f172a;
---body-bg-rgb: 14, 19, 24;
+--body-bg-rgb: 15, 23, 42;
 --heading-color: #f1f5f9;
 --emphasis-color: #fff;
 --emphasis-color-rgb: 255, 255, 255;
---secondary-color: #e6ebf1bf;
+--secondary-color: #cbd5e1;
---secondary-color-rgb: 230, 235, 241;
+--secondary-color-rgb: 203, 213, 225;
---tertiary-color: #e6ebf180;
+--tertiary-color: #94a3b8;
---tertiary-color-rgb: 230, 235, 241;
+--tertiary-color-rgb: 148, 163, 184;
---muted-color: #6d757e;
+--muted-color: #64748b;
---code-color: #ff7abd;
+--code-color: #e879f9;
---code-color-ink: var(--code-color, #e93f8e);
+--code-color-ink: var(--code-color, #e879f9);
---highlight-color: #111;
+--highlight-color: #0f172a;
---highlight-bg: #ffe28a1a;
+--highlight-bg: #fef08a1a;
 
 /* ===== LAYOUT & SPACING ===== */
 --padding-x: 1rem;
@@ -103,18 +104,18 @@ color-scheme: dark;
 --bg-opacity: 1;
 --nav-toggle-size: 3rem;
 --gradient: linear-gradient(180deg, #ffffff26, #fff0);
---secondary-bg: #151b22;
+--secondary-bg: #1e293b;
---secondary-bg-rgb: 21, 27, 34;
+--secondary-bg-rgb: 30, 41, 59;
---tertiary-bg: #10151b;
+--tertiary-bg: #334155;
---tertiary-bg-rgb: 16, 21, 27;
+--tertiary-bg-rgb: 51, 65, 85;
---hr-color: var(--border-color, #dfe3e7);
+--hr-color: var(--border-color, #334155);
---border-color-soft: var(--border-color, #dfe3e7);
+--border-color-soft: var(--border-color, #334155);
---kbd-bg: var(--secondary-bg, #eaedf0);
+--kbd-bg: var(--secondary-bg, #1e293b);
---kbd-ink: var(--body-bg, #fff);
+--kbd-ink: var(--body-bg, #0f172a);
---toc-bg: var(--secondary-bg, #eaedf0);
+--toc-bg: var(--secondary-bg, #1e293b);
---toc-ink: var(--color-primary, #112855);
+--toc-ink: var(--color-primary, #14b8a6);
---selection-bg: var(--highlight-bg, #fbeea8);
+--selection-bg: var(--highlight-bg, #fef08a1a);
---selection-ink: var(--body-color, #22262a);
+--selection-ink: var(--body-color, #e2e8f0);
 --border: 5px;
 
 /* ===== BREAKPOINTS ===== */
@@ -125,71 +126,71 @@ color-scheme: dark;
 --bp-xl: 1200px;
 
 /* ===== BOOTSTRAP PALETTE ===== */
---primary: #010156;
+--primary: #14b8a6;
---secondary: #48525d;
+--secondary: #64748b;
---success: #4aa664;
+--success: #34d399;
---info: #4f7aa0;
+--info: #38bdf8;
---warning: #c77a00;
+--warning: #fbbf24;
---danger: #c23a31;
+--danger: #fb7185;
---light: #1b2027;
+--light: #334155;
---dark: #0f1318;
+--dark: #0f172a;
---primary-rgb: 1,1,86;
+--primary-rgb: 20, 184, 166;
---secondary-rgb: 72,82,93;
+--secondary-rgb: 100, 116, 139;
---success-rgb: 74,166,100;
+--success-rgb: 52, 211, 153;
---info-rgb: 79,122,160;
+--info-rgb: 56, 189, 248;
---warning-rgb: 199,122,0;
+--warning-rgb: 251, 191, 36;
---danger-rgb: 194,58,49;
+--danger-rgb: 251, 113, 133;
---light-rgb: 27,32,39;
+--light-rgb: 51, 65, 85;
---dark-rgb: 15,19,24;
+--dark-rgb: 15, 23, 42;
---primary-text-emphasis: #c7ccff;
+--primary-text-emphasis: #99f6e4;
---secondary-text-emphasis: #cfd6de;
+--secondary-text-emphasis: #cbd5e1;
---success-text-emphasis: #bde8c9;
+--success-text-emphasis: #a7f3d0;
---info-text-emphasis: #bcd6ee;
+--info-text-emphasis: #bae6fd;
---warning-text-emphasis: #ffd9a6;
+--warning-text-emphasis: #fde68a;
---danger-text-emphasis: #ffb7b2;
+--danger-text-emphasis: #fecdd3;
---light-text-emphasis: #d2d8df;
+--light-text-emphasis: #cbd5e1;
---dark-text-emphasis: #d2d8df;
+--dark-text-emphasis: #cbd5e1;
---primary-bg-subtle: #0b1030;
+--primary-bg-subtle: #134e4a;
---secondary-bg-subtle: #1e2430;
+--secondary-bg-subtle: #1e293b;
---success-bg-subtle: #0f2a1b;
+--success-bg-subtle: #064e3b;
---info-bg-subtle: #0d2232;
+--info-bg-subtle: #0c4a6e;
---warning-bg-subtle: #2a1e06;
+--warning-bg-subtle: #78350f;
---danger-bg-subtle: #2d1110;
+--danger-bg-subtle: #881337;
---light-bg-subtle: #12161d;
+--light-bg-subtle: #1e293b;
---dark-bg-subtle: #1e2430;
+--dark-bg-subtle: #0f172a;
---primary-border-subtle: #2b3a7a;
+--primary-border-subtle: #115e59;
---secondary-border-subtle: #2b323b;
+--secondary-border-subtle: #334155;
---success-border-subtle: #2b5b40;
+--success-border-subtle: #065f46;
---info-border-subtle: #254861;
+--info-border-subtle: #075985;
---warning-border-subtle: #5a3c0e;
+--warning-border-subtle: #92400e;
---danger-border-subtle: #5c2723;
+--danger-border-subtle: #9f1239;
---light-border-subtle: #222831;
+--light-border-subtle: #334155;
---dark-border-subtle: #2b323b;
+--dark-border-subtle: #1e293b;
 
 /* ===== STANDARD COLORS ===== */
---blue: #91a4ff;
+--blue: #60a5fa;
---indigo: #b19cff;
+--indigo: #818cf8;
---purple: #c0a5ff;
+--purple: #c084fc;
---pink: #ff8fc0;
+--pink: #f472b6;
---red: #ff7a73;
+--red: #f87171;
---orange: #ff9c4d;
+--orange: #fb923c;
---yellow: #ffd166;
+--yellow: #fbbf24;
---green: #78d694;
+--green: #34d399;
---teal: #76e3ff;
+--teal: #2dd4bf;
---cyan: #6fb7ff;
+--cyan: #22d3ee;
 --black: #000;
 --white: #fff;
 
 /* ===== GRAY SCALE ===== */
---gray-100: #161a20;
+--gray-100: #1e293b;
---gray-200: #1b2027;
+--gray-200: #334155;
---gray-300: #222831;
+--gray-300: #475569;
---gray-400: #2b323b;
+--gray-400: #64748b;
---gray-500: #36404a;
+--gray-500: #94a3b8;
---gray-600: #48525d;
+--gray-600: #cbd5e1;
---gray-700: #5b6672;
+--gray-700: #e2e8f0;
---gray-800: #cfd6de;
+--gray-800: #f1f5f9;
---gray-900: #e6ebf1;
+--gray-900: #f8fafc;
 --white-rgb: 255, 255, 255;
 --black-rgb: 0, 0, 0;
 
@@ -201,73 +202,73 @@ color-scheme: dark;
 
 /* ===== CONTAINER BACKGROUNDS ===== */
 /* Below Topbar Container */
---container-below-topbar-bg-image: ;
+--container-below-topbar-bg-image: none;
---container-below-topbar-bg-color: ;
+--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: ;
+--container-below-topbar-border: none;
---container-below-topbar-border-radius: ;
+--container-below-topbar-border-radius: 0;
 
 /* Top A Container */
---container-top-a-bg-image: ;
+--container-top-a-bg-image: none;
---container-top-a-bg-color: ;
+--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: ;
+--container-top-a-border: none;
---container-top-a-border-radius: ;
+--container-top-a-border-radius: 0;
 
 /* Top B Container */
---container-top-b-bg-image: ;
+--container-top-b-bg-image: none;
---container-top-b-bg-color: ;
+--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: ;
+--container-top-b-border: none;
---container-top-b-border-radius: ;
+--container-top-b-border-radius: 0;
 
 /* TOC Container */
---container-toc-bg: ;
+--container-toc-bg: var(--secondary-bg);
---container-toc-color: #dbe3ff;
+--container-toc-color: #99f6e4;
 
 /* Sidebar Container */
---container-sidebar-bg-image: ;
+--container-sidebar-bg-image: none;
---container-sidebar-bg-color: ;
+--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: ;
+--container-sidebar-border: none;
---container-sidebar-border-radius: ;
+--container-sidebar-border-radius: 0;
 
 /* Bottom A Container */
---container-bottom-a-bg-image: ;
+--container-bottom-a-bg-image: none;
---container-bottom-a-bg-color: ;
+--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: ;
+--container-bottom-a-border: none;
 --container-bottom-a-border-radius: 5px;
 
 /* Bottom B Container */
---container-bottom-b-bg-image: ;
+--container-bottom-b-bg-image: none;
---container-bottom-b-bg-color: ;
+--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: ;
+--container-bottom-b-border: none;
---container-bottom-b-border-radius: ;
+--container-bottom-b-border-radius: 0;
 
 /* ===== BORDERS ===== */
 --border-width: 1px;
 --border-style: solid;
---border-color: #2b323b;
+--border-color: #334155;
 --border-color-translucent: #ffffff26;
 --border-radius: .25rem;
 --border-radius-sm: .2rem;
@@ -286,19 +287,19 @@ color-scheme: dark;
 /* ===== FOCUS & FORMS ===== */
 --focus-ring-width: .25rem;
 --focus-ring-opacity: .6;
---focus-ring-color: #5472ff66;
+--focus-ring-color: #14b8a666;
---input-color: #e6ebf1;
+--input-color: #e2e8f0;
---input-bg: #1a2332;
+--input-bg: #1e293b;
---input-border-color: #3a4250;
+--input-border-color: #475569;
---input-focus-border-color: #5472ff;
+--input-focus-border-color: #14b8a6;
---input-focus-box-shadow: 0 0 0 0.25rem rgba(84, 114, 255, 0.25);
+--input-focus-box-shadow: 0 0 0 0.25rem rgba(20, 184, 166, 0.25);
---input-placeholder-color: #8894aa;
+--input-placeholder-color: #94a3b8;
---input-disabled-bg: #0f1318;
+--input-disabled-bg: #0f172a;
---input-disabled-border-color: #2b323b;
+--input-disabled-border-color: #334155;
---form-valid-color: #78d694;
+--form-valid-color: #34d399;
---form-valid-border-color: #78d694;
+--form-valid-border-color: #34d399;
---form-invalid-color: #ff8e86;
+--form-invalid-color: #fb7185;
---form-invalid-border-color: #ff8e86;
+--form-invalid-border-color: #fb7185;
 
 /* ===== BUTTONS ===== */
 --btn-border-radius: var(--border-radius);
@@ -329,7 +330,7 @@ color-scheme: dark;
 --vm-surface-2: var(--tertiary-bg);
 --vm-text: var(--body-color);
 --vm-text-strong: #ffffff;
---vm-text-muted: var(--gray-700);
+--vm-text-muted: var(--gray-600);
 --vm-border: var(--border-color);
 --vm-price-color: var(--success);
 
@@ -403,19 +404,19 @@ color-scheme: dark;
 --vm-vendor-menu-hover-bg: var(--tertiary-bg);
 
 /* ===== GABLE ===== */
---gab-blue: #4d9fff;
+--gab-blue: #60a5fa;
---gab-green: #5cb85c;
+--gab-green: #34d399;
---gab-red: #ff6b6b;
+--gab-red: #f87171;
---gab-orange: #ff9f5a;
+--gab-orange: #fb923c;
---gab-gray1: #868e96;
+--gab-gray1: #94a3b8;
---gab-gray2: #adb5bd;
+--gab-gray2: #cbd5e1;
---gab-gray3: #ced4da;
+--gab-gray3: #e2e8f0;
 }
 
 .btn {
 --btn-padding-x: 1rem;
 --btn-padding-y: 0.6rem;
---btn-font-family: ;
+--btn-font-family: inherit;
 --btn-font-size: 1rem;
 --btn-font-weight: 400;
 --btn-line-height: 1.5;
@@ -454,60 +455,60 @@ transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-
 }
 
 .btn-primary {
---btn-color: hsl(0, 0%, 100%);
+--btn-color: #ffffff;
---btn-bg: hsl(240, 98%, 17%);
+--btn-bg: #14b8a6;
---btn-border-color: hsl(240, 98%, 17%);
+--btn-border-color: #14b8a6;
---btn-hover-color: hsl(0, 0%, 100%);
+--btn-hover-color: #ffffff;
---btn-hover-bg: #010149;
+--btn-hover-bg: #0d9488;
---btn-hover-border-color: #010145;
+--btn-hover-border-color: #0d9488;
---btn-focus-shadow-rgb: 84, 114, 255;
+--btn-focus-shadow-rgb: 20, 184, 166;
---btn-active-color: hsl(0, 0%, 100%);
+--btn-active-color: #ffffff;
---btn-active-bg: #010145;
+--btn-active-bg: #0d9488;
---btn-active-border-color: #010141;
+--btn-active-border-color: #0f766e;
 }
 
 .btn-secondary {
 --btn-color: var(--nav-text-color);
 --btn-bg: var(--nav-bg-color);
---btn-border-color: #3a4250;
+--btn-border-color: #475569;
 --btn-hover-color: #fff;
---btn-hover-bg: #1b2a55;
+--btn-hover-bg: #115e59;
---btn-hover-border-color: #162448;
+--btn-hover-border-color: #134e4a;
---btn-focus-shadow-rgb: 84, 114, 255;
+--btn-focus-shadow-rgb: 20, 184, 166;
 --btn-active-color: #fff;
---btn-active-bg: #162448;
+--btn-active-bg: #134e4a;
---btn-active-border-color: #12203f;
+--btn-active-border-color: #134e4a;
 }
 
 .btn-outline-light {
---btn-color: #e6ebf1;
+--btn-color: #e2e8f0;
---btn-border-color: #e6ebf1;
+--btn-border-color: #e2e8f0;
---btn-hover-color: #111;
+--btn-hover-color: #0f172a;
---btn-hover-bg: #e6ebf1;
+--btn-hover-bg: #e2e8f0;
---btn-hover-border-color: #e6ebf1;
+--btn-hover-border-color: #e2e8f0;
---btn-active-color: #111;
+--btn-active-color: #0f172a;
---btn-active-bg: #d7dce2;
+--btn-active-bg: #cbd5e1;
---btn-active-border-color: #d7dce2;
+--btn-active-border-color: #cbd5e1;
 --gradient: none;
 }
 
 .btn-link {
 --btn-font-weight: 400;
---btn-color: var(--link-color);
+--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-color: #64748b;
 --btn-disabled-border-color: transparent;
 --btn-box-shadow: none;
---btn-focus-shadow-rgb: 84, 114, 255;
+--btn-focus-shadow-rgb: 20, 184, 166;
 text-decoration: underline;
 }
 
 .btn-secondary {
---btn-color: var(--nav-text-color);
+--btn-color: var(--color-hover);
 --btn-bg: var(--nav-bg-color);
 }

src/media/css/colors/dark/colors_standard.css

@@ -202,68 +202,68 @@ color-scheme: dark;
 
 /* ===== CONTAINER BACKGROUNDS ===== */
 /* Below Topbar Container */
---container-below-topbar-bg-image: ;
+--container-below-topbar-bg-image: none;
---container-below-topbar-bg-color: ;
+--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: ;
+--container-below-topbar-border: none;
---container-below-topbar-border-radius: ;
+--container-below-topbar-border-radius: 0;
 
 /* Top A Container */
---container-top-a-bg-image: ;
+--container-top-a-bg-image: none;
---container-top-a-bg-color: ;
+--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: ;
+--container-top-a-border: none;
---container-top-a-border-radius: ;
+--container-top-a-border-radius: 0;
 
 /* Top B Container */
---container-top-b-bg-image: ;
+--container-top-b-bg-image: none;
---container-top-b-bg-color: ;
+--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: ;
+--container-top-b-border: none;
---container-top-b-border-radius: ;
+--container-top-b-border-radius: 0;
 
 /* TOC Container */
---container-toc-bg: ;
+--container-toc-bg: var(--secondary-bg);
 --container-toc-color: #dbe3ff;
 
 /* Sidebar Container */
---container-sidebar-bg-image: ;
+--container-sidebar-bg-image: none;
---container-sidebar-bg-color: ;
+--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: ;
+--container-sidebar-border: none;
---container-sidebar-border-radius: ;
+--container-sidebar-border-radius: 0;
 
 /* Bottom A Container */
---container-bottom-a-bg-image: ;
+--container-bottom-a-bg-image: none;
---container-bottom-a-bg-color: ;
+--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: ;
+--container-bottom-a-border: none;
 --container-bottom-a-border-radius: 5px;
 
 /* Bottom B Container */
---container-bottom-b-bg-image: ;
+--container-bottom-b-bg-image: none;
---container-bottom-b-bg-color: ;
+--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: ;
+--container-bottom-b-border: none;
---container-bottom-b-border-radius: ;
+--container-bottom-b-border-radius: 0;
 
 /* ===== BORDERS ===== */
 --border-width: 1px;
@@ -416,7 +416,7 @@ color-scheme: dark;
 .btn {
 	--btn-padding-x: 1rem;
 	--btn-padding-y: 0.6rem;
-	--btn-font-family: ;
+	--btn-font-family: inherit;
 	--btn-font-size: 1rem;
 	--btn-font-weight: 400;
 	--btn-line-height: 1.5;

src/media/css/colors/light/colors_standard.css

@@ -201,68 +201,68 @@ color-scheme: light;
 
 /* ===== CONTAINER BACKGROUNDS ===== */
 /* Below Topbar Container */
---container-below-topbar-bg-image: ;
+--container-below-topbar-bg-image: none;
---container-below-topbar-bg-color ;
+--container-below-topbar-bg-color: transparent;
 --container-below-topbar-bg-position: auto;
 --container-below-topbar-bg-attachment: fixed;
 --container-below-topbar-bg-repeat: repeat;
 --container-below-topbar-bg-size: auto;
---container-below-topbar-border: ;
+--container-below-topbar-border: none;
---container-below-topbar-border-radius: ;
+--container-below-topbar-border-radius: 0;
 
 /* Top A Container */
---container-top-a-bg-image: ;
+--container-top-a-bg-image: none;
---container-top-a-bg-color: ;
+--container-top-a-bg-color: transparent;
 --container-top-a-bg-position: auto;
 --container-top-a-bg-attachment: fixed;
 --container-top-a-bg-repeat: repeat;
 --container-top-a-bg-size: auto;
---container-top-a-border: ;
+--container-top-a-border: none;
---container-top-a-border-radius: ;
+--container-top-a-border-radius: 0;
 
 /* Top B Container */
---container-top-b-bg-image: ;
+--container-top-b-bg-image: none;
---container-top-b-bg-color: ;
+--container-top-b-bg-color: transparent;
 --container-top-b-bg-position: auto;
 --container-top-b-bg-attachment: fixed;
 --container-top-b-bg-repeat: repeat;
 --container-top-b-bg-size: auto;
---container-top-b-border: ;
+--container-top-b-border: none;
---container-top-b-border-radius: ;
+--container-top-b-border-radius: 0;
 
 /* TOC Container */
 --container-toc-bg: var(--mainmenu-nav-link-color);
 --container-toc-color: var(--color-primary);
 
 /* Sidebar Container */
---container-sidebar-bg-image: ;
+--container-sidebar-bg-image: none;
---container-sidebar-bg-color: ;
+--container-sidebar-bg-color: transparent;
 --container-sidebar-bg-position: auto;
 --container-sidebar-bg-attachment: scroll;
 --container-sidebar-bg-repeat: repeat;
 --container-sidebar-bg-size: auto;
---container-sidebar-border: ;
+--container-sidebar-border: none;
---container-sidebar-border-radius: ;
+--container-sidebar-border-radius: 0;
 
 /* Bottom A Container */
---container-bottom-a-bg-image: ;
+--container-bottom-a-bg-image: none;
---container-bottom-a-bg-color: ;
+--container-bottom-a-bg-color: transparent;
 --container-bottom-a-bg-position: auto;
 --container-bottom-a-bg-attachment: fixed;
 --container-bottom-a-bg-repeat: repeat;
 --container-bottom-a-bg-size: auto;
---container-bottom-a-border: ;
+--container-bottom-a-border: none;
---container-bottom-a-border-radius: ;
+--container-bottom-a-border-radius: 0;
 
 /* Bottom B Container */
---container-bottom-b-bg-image: ;
+--container-bottom-b-bg-image: none;
---container-bottom-b-bg-color: ;
+--container-bottom-b-bg-color: transparent;
 --container-bottom-b-bg-position: auto;
 --container-bottom-b-bg-attachment: fixed;
 --container-bottom-b-bg-repeat: repeat;
 --container-bottom-b-bg-size: auto;
---container-bottom-b-border: ;
+--container-bottom-b-border: none;
---container-bottom-b-border-radius: ;
+--container-bottom-b-border-radius: 0;
 
 /* ===== BORDERS ===== */
 --border-width: 1px;
@@ -415,7 +415,7 @@ color-scheme: light;
 .btn {
 --btn-padding-x: 1rem;
 --btn-padding-y: 0.6rem;
---btn-font-family: ;
+--btn-font-family: inherit;
 --btn-font-size: 1rem;
 --btn-font-weight: 400;
 --btn-line-height: 1.5;

src/media/css/template.css

@@ -18357,3 +18357,201 @@ nav[data-toggle=toc] .nav-link.active+ul{
 .icon-check::before  { content: "\f00c"; }
 .icon-plus::before   { content: "\f067"; }
 .icon-minus::before  { content: "\f068"; }
+
+/* ===== BOOTSTRAP & JOOMLA BUTTONS ===== */
+.btn-primary {
+  --btn-color: white;
+  --btn-bg: var(--color-primary);
+  --btn-border-color: var(--color-primary);
+  --btn-hover-bg: color-mix(in srgb, var(--color-primary) 85%, black);
+  --btn-hover-border-color: color-mix(in srgb, var(--color-primary) 85%, black);
+}
+
+.btn-secondary {
+  --btn-color: var(--body-bg);
+  --btn-bg: var(--secondary);
+  --btn-border-color: var(--secondary);
+  --btn-hover-bg: color-mix(in srgb, var(--secondary) 85%, black);
+  --btn-hover-border-color: color-mix(in srgb, var(--secondary) 85%, black);
+}
+
+.btn-success {
+  --btn-color: white;
+  --btn-bg: var(--success);
+  --btn-border-color: var(--success);
+  --btn-hover-bg: color-mix(in srgb, var(--success) 85%, black);
+  --btn-hover-border-color: color-mix(in srgb, var(--success) 85%, black);
+}
+
+.btn-info {
+  --btn-color: white;
+  --btn-bg: var(--info);
+  --btn-border-color: var(--info);
+  --btn-hover-bg: color-mix(in srgb, var(--info) 85%, black);
+  --btn-hover-border-color: color-mix(in srgb, var(--info) 85%, black);
+}
+
+.btn-warning {
+  --btn-color: white;
+  --btn-bg: var(--warning);
+  --btn-border-color: var(--warning);
+  --btn-hover-bg: color-mix(in srgb, var(--warning) 85%, black);
+  --btn-hover-border-color: color-mix(in srgb, var(--warning) 85%, black);
+}
+
+.btn-danger {
+  --btn-color: white;
+  --btn-bg: var(--danger);
+  --btn-border-color: var(--danger);
+  --btn-hover-bg: color-mix(in srgb, var(--danger) 85%, black);
+  --btn-hover-border-color: color-mix(in srgb, var(--danger) 85%, black);
+}
+
+.btn-light {
+  --btn-color: var(--body-color);
+  --btn-bg: var(--light);
+  --btn-border-color: var(--light);
+  --btn-hover-bg: color-mix(in srgb, var(--light) 90%, black);
+  --btn-hover-border-color: color-mix(in srgb, var(--light) 90%, black);
+}
+
+.btn-dark {
+  --btn-color: white;
+  --btn-bg: var(--dark);
+  --btn-border-color: var(--dark);
+  --btn-hover-bg: color-mix(in srgb, var(--dark) 85%, black);
+  --btn-hover-border-color: color-mix(in srgb, var(--dark) 85%, black);
+}
+
+/* Outline button variants */
+.btn-outline-primary {
+  --btn-color: var(--color-primary);
+  --btn-border-color: var(--color-primary);
+  --btn-hover-color: white;
+  --btn-hover-bg: var(--color-primary);
+  --btn-hover-border-color: var(--color-primary);
+}
+
+.btn-outline-secondary {
+  --btn-color: var(--secondary);
+  --btn-border-color: var(--secondary);
+  --btn-hover-color: white;
+  --btn-hover-bg: var(--secondary);
+  --btn-hover-border-color: var(--secondary);
+}
+
+.btn-outline-success {
+  --btn-color: var(--success);
+  --btn-border-color: var(--success);
+  --btn-hover-color: white;
+  --btn-hover-bg: var(--success);
+  --btn-hover-border-color: var(--success);
+}
+
+.btn-outline-info {
+  --btn-color: var(--info);
+  --btn-border-color: var(--info);
+  --btn-hover-color: white;
+  --btn-hover-bg: var(--info);
+  --btn-hover-border-color: var(--info);
+}
+
+.btn-outline-warning {
+  --btn-color: var(--warning);
+  --btn-border-color: var(--warning);
+  --btn-hover-color: white;
+  --btn-hover-bg: var(--warning);
+  --btn-hover-border-color: var(--warning);
+}
+
+.btn-outline-danger {
+  --btn-color: var(--danger);
+  --btn-border-color: var(--danger);
+  --btn-hover-color: white;
+  --btn-hover-bg: var(--danger);
+  --btn-hover-border-color: var(--danger);
+}
+
+.btn-outline-light {
+  --btn-color: var(--light);
+  --btn-border-color: var(--light);
+  --btn-hover-color: var(--body-color);
+  --btn-hover-bg: var(--light);
+  --btn-hover-border-color: var(--light);
+}
+
+.btn-outline-dark {
+  --btn-color: var(--dark);
+  --btn-border-color: var(--dark);
+  --btn-hover-color: white;
+  --btn-hover-bg: var(--dark);
+  --btn-hover-border-color: var(--dark);
+}
+
+/* ===== BOOTSTRAP & JOOMLA ALERTS ===== */
+.alert-primary {
+  --alert-bg: color-mix(in srgb, var(--primary) 10%, var(--body-bg));
+  --alert-color: color-mix(in srgb, var(--primary) 90%, black);
+  --alert-border-color: color-mix(in srgb, var(--primary) 20%, var(--body-bg));
+}
+
+.alert-secondary {
+  --alert-bg: color-mix(in srgb, var(--secondary) 10%, var(--body-bg));
+  --alert-color: color-mix(in srgb, var(--secondary) 90%, black);
+  --alert-border-color: color-mix(in srgb, var(--secondary) 20%, var(--body-bg));
+}
+
+.alert-success {
+  --alert-bg: color-mix(in srgb, var(--success) 10%, var(--body-bg));
+  --alert-color: color-mix(in srgb, var(--success) 90%, black);
+  --alert-border-color: color-mix(in srgb, var(--success) 20%, var(--body-bg));
+}
+
+.alert-info {
+  --alert-bg: color-mix(in srgb, var(--info) 10%, var(--body-bg));
+  --alert-color: color-mix(in srgb, var(--info) 90%, black);
+  --alert-border-color: color-mix(in srgb, var(--info) 20%, var(--body-bg));
+}
+
+.alert-warning {
+  --alert-bg: color-mix(in srgb, var(--warning) 10%, var(--body-bg));
+  --alert-color: color-mix(in srgb, var(--warning) 90%, black);
+  --alert-border-color: color-mix(in srgb, var(--warning) 20%, var(--body-bg));
+}
+
+.alert-danger {
+  --alert-bg: color-mix(in srgb, var(--danger) 10%, var(--body-bg));
+  --alert-color: color-mix(in srgb, var(--danger) 90%, black);
+  --alert-border-color: color-mix(in srgb, var(--danger) 20%, var(--body-bg));
+}
+
+.alert-light {
+  --alert-bg: var(--light);
+  --alert-color: var(--body-color);
+  --alert-border-color: color-mix(in srgb, var(--light) 85%, black);
+}
+
+.alert-dark {
+  --alert-bg: var(--dark);
+  --alert-color: white;
+  --alert-border-color: var(--dark);
+}
+
+/* Joomla-specific alert mappings */
+.alert-message {
+  --alert-bg: var(--alert-info, color-mix(in srgb, var(--info) 10%, var(--body-bg)));
+  --alert-color: color-mix(in srgb, var(--info) 90%, black);
+  --alert-border-color: color-mix(in srgb, var(--info) 20%, var(--body-bg));
+}
+
+.alert-error {
+  --alert-bg: var(--alert-danger, color-mix(in srgb, var(--danger) 10%, var(--body-bg)));
+  --alert-color: color-mix(in srgb, var(--danger) 90%, black);
+  --alert-border-color: color-mix(in srgb, var(--danger) 20%, var(--body-bg));
+}
+
+.alert-notice {
+  --alert-bg: var(--alert-warning, color-mix(in srgb, var(--warning) 10%, var(--body-bg)));
+  --alert-color: color-mix(in srgb, var(--warning) 90%, black);
+  --alert-border-color: color-mix(in srgb, var(--warning) 20%, var(--body-bg));
+}