diff --git a/src/media/css/colors/dark/colors_standard.css b/src/media/css/colors/dark/colors_standard.css
index 0ce1e0f..364aae6 100644
--- a/src/media/css/colors/dark/colors_standard.css
+++ b/src/media/css/colors/dark/colors_standard.css
@@ -481,6 +481,210 @@ color-scheme: dark;
 	--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;
@@ -494,6 +698,23 @@ color-scheme: dark;
 	--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;
@@ -510,8 +731,3 @@ color-scheme: dark;
 	--btn-focus-shadow-rgb: 84, 114, 255;
 	text-decoration: underline;
 }
-
-.btn-secondary {
-	--btn-color: var(--color-hover);
-	--btn-bg: var(--nav-bg-color);
-}
diff --git a/templates/colors_custom_dark.css b/templates/colors_custom_dark.css
new file mode 100644
index 0000000..724f16c
--- /dev/null
+++ b/templates/colors_custom_dark.css
@@ -0,0 +1,327 @@
+@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: MokoCassiopeia.Templates
+ PATH: ./templates/colors_custom_dark.css
+ VERSION: 03.08.04
+ BRIEF: Custom dark theme color template with Bootstrap button definitions
+ */
+
+/* -----------------------------------------------
+ * CUSTOM DARK THEME TEMPLATE
+ * 
+ * Copy this file to:
+ *   src/media/css/colors/dark/colors_custom.css
+ * 
+ * Then register it in src/joomla.asset.json under
+ * template.dark.colors_custom asset.
+ * --------------------------------------------- */
+
+:root[data-bs-theme='dark'] {
+	/* ===== BRAND COLORS (Customize these) ===== */
+	--color-primary: #3399ff;
+	--accent-color-primary: #66b3ff;
+	--accent-color-secondary: #99ccff;
+	
+	/* ===== LINKS ===== */
+	--link-color: #6bb3ff;
+	--link-hover-color: #99ccff;
+	
+	/* ===== BODY & TYPOGRAPHY ===== */
+	--body-color: #e9ecef;
+	--body-bg: #0e1318;
+	
+	/* ===== BOOTSTRAP STATE COLORS ===== */
+	--success: #5cb85c;
+	--info: #5bc0de;
+	--warning: #ffc107;
+	--danger: #d9534f;
+	
+	/* ===== NAVIGATION ===== */
+	--nav-bg-color: var(--color-primary);
+	--nav-text-color: #ffffff;
+}
+
+/* ===== BOOTSTRAP BUTTON VARIANTS ===== */
+
+.btn-primary {
+	--btn-color: hsl(0, 0%, 100%);
+	--btn-bg: var(--color-primary);
+	--btn-border-color: var(--color-primary);
+	--btn-hover-color: hsl(0, 0%, 100%);
+	--btn-hover-bg: #2680e6;
+	--btn-hover-border-color: #1f73d9;
+	--btn-focus-shadow-rgb: 82, 168, 255;
+	--btn-active-color: hsl(0, 0%, 100%);
+	--btn-active-bg: #1f73d9;
+	--btn-active-border-color: #1a66cc;
+	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+	--btn-disabled-color: hsl(0, 0%, 100%);
+	--btn-disabled-bg: var(--color-primary);
+	--btn-disabled-border-color: var(--color-primary);
+}
+
+.btn-secondary {
+	--btn-color: hsl(0, 0%, 100%);
+	--btn-bg: #6c757d;
+	--btn-border-color: #6c757d;
+	--btn-hover-color: hsl(0, 0%, 100%);
+	--btn-hover-bg: #5c636a;
+	--btn-hover-border-color: #565e64;
+	--btn-focus-shadow-rgb: 130, 138, 145;
+	--btn-active-color: hsl(0, 0%, 100%);
+	--btn-active-bg: #565e64;
+	--btn-active-border-color: #51585e;
+	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+	--btn-disabled-color: hsl(0, 0%, 100%);
+	--btn-disabled-bg: #6c757d;
+	--btn-disabled-border-color: #6c757d;
+}
+
+.btn-success {
+	--btn-color: hsl(0, 0%, 100%);
+	--btn-bg: var(--success);
+	--btn-border-color: var(--success);
+	--btn-hover-color: hsl(0, 0%, 100%);
+	--btn-hover-bg: #4cae4c;
+	--btn-hover-border-color: #449d44;
+	--btn-focus-shadow-rgb: 113, 198, 113;
+	--btn-active-color: hsl(0, 0%, 100%);
+	--btn-active-bg: #449d44;
+	--btn-active-border-color: #398439;
+	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+	--btn-disabled-color: hsl(0, 0%, 100%);
+	--btn-disabled-bg: var(--success);
+	--btn-disabled-border-color: var(--success);
+}
+
+.btn-info {
+	--btn-color: hsl(0, 0%, 100%);
+	--btn-bg: var(--info);
+	--btn-border-color: var(--info);
+	--btn-hover-color: hsl(0, 0%, 100%);
+	--btn-hover-bg: #46b8da;
+	--btn-hover-border-color: #31b0d5;
+	--btn-focus-shadow-rgb: 116, 204, 233;
+	--btn-active-color: hsl(0, 0%, 100%);
+	--btn-active-bg: #31b0d5;
+	--btn-active-border-color: #269abc;
+	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+	--btn-disabled-color: hsl(0, 0%, 100%);
+	--btn-disabled-bg: var(--info);
+	--btn-disabled-border-color: var(--info);
+}
+
+.btn-warning {
+	--btn-color: hsl(0, 0%, 0%);
+	--btn-bg: var(--warning);
+	--btn-border-color: var(--warning);
+	--btn-hover-color: hsl(0, 0%, 0%);
+	--btn-hover-bg: #edb100;
+	--btn-hover-border-color: #d39e00;
+	--btn-focus-shadow-rgb: 222, 170, 12;
+	--btn-active-color: hsl(0, 0%, 0%);
+	--btn-active-bg: #d39e00;
+	--btn-active-border-color: #c69500;
+	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+	--btn-disabled-color: hsl(0, 0%, 0%);
+	--btn-disabled-bg: var(--warning);
+	--btn-disabled-border-color: var(--warning);
+}
+
+.btn-danger {
+	--btn-color: hsl(0, 0%, 100%);
+	--btn-bg: var(--danger);
+	--btn-border-color: var(--danger);
+	--btn-hover-color: hsl(0, 0%, 100%);
+	--btn-hover-bg: #d43f3a;
+	--btn-hover-border-color: #c9302c;
+	--btn-focus-shadow-rgb: 223, 109, 105;
+	--btn-active-color: hsl(0, 0%, 100%);
+	--btn-active-bg: #c9302c;
+	--btn-active-border-color: #ac2925;
+	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+	--btn-disabled-color: hsl(0, 0%, 100%);
+	--btn-disabled-bg: var(--danger);
+	--btn-disabled-border-color: var(--danger);
+}
+
+.btn-light {
+	--btn-color: hsl(0, 0%, 0%);
+	--btn-bg: #e9ecef;
+	--btn-border-color: #e9ecef;
+	--btn-hover-color: hsl(0, 0%, 0%);
+	--btn-hover-bg: #d3d6d9;
+	--btn-hover-border-color: #c8cbcf;
+	--btn-focus-shadow-rgb: 204, 207, 210;
+	--btn-active-color: hsl(0, 0%, 0%);
+	--btn-active-bg: #c8cbcf;
+	--btn-active-border-color: #bdc1c5;
+	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+	--btn-disabled-color: hsl(0, 0%, 0%);
+	--btn-disabled-bg: #e9ecef;
+	--btn-disabled-border-color: #e9ecef;
+}
+
+.btn-dark {
+	--btn-color: hsl(0, 0%, 100%);
+	--btn-bg: #2c3136;
+	--btn-border-color: #2c3136;
+	--btn-hover-color: hsl(0, 0%, 100%);
+	--btn-hover-bg: #1e2124;
+	--btn-hover-border-color: #191c1f;
+	--btn-focus-shadow-rgb: 70, 75, 80;
+	--btn-active-color: hsl(0, 0%, 100%);
+	--btn-active-bg: #191c1f;
+	--btn-active-border-color: #14161a;
+	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+	--btn-disabled-color: hsl(0, 0%, 100%);
+	--btn-disabled-bg: #2c3136;
+	--btn-disabled-border-color: #2c3136;
+}
+
+/* ===== OUTLINE BUTTON VARIANTS ===== */
+
+.btn-outline-primary {
+	--btn-color: var(--color-primary);
+	--btn-border-color: var(--color-primary);
+	--btn-hover-color: hsl(0, 0%, 0%);
+	--btn-hover-bg: var(--color-primary);
+	--btn-hover-border-color: var(--color-primary);
+	--btn-focus-shadow-rgb: 82, 168, 255;
+	--btn-active-color: hsl(0, 0%, 0%);
+	--btn-active-bg: var(--color-primary);
+	--btn-active-border-color: var(--color-primary);
+	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+	--btn-disabled-color: var(--color-primary);
+	--btn-disabled-bg: transparent;
+	--btn-disabled-border-color: var(--color-primary);
+	--gradient: none;
+}
+
+.btn-outline-secondary {
+	--btn-color: #8c959f;
+	--btn-border-color: #8c959f;
+	--btn-hover-color: hsl(0, 0%, 0%);
+	--btn-hover-bg: #8c959f;
+	--btn-hover-border-color: #8c959f;
+	--btn-focus-shadow-rgb: 150, 158, 167;
+	--btn-active-color: hsl(0, 0%, 0%);
+	--btn-active-bg: #8c959f;
+	--btn-active-border-color: #8c959f;
+	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+	--btn-disabled-color: #8c959f;
+	--btn-disabled-bg: transparent;
+	--btn-disabled-border-color: #8c959f;
+	--gradient: none;
+}
+
+.btn-outline-success {
+	--btn-color: var(--success);
+	--btn-border-color: var(--success);
+	--btn-hover-color: hsl(0, 0%, 0%);
+	--btn-hover-bg: var(--success);
+	--btn-hover-border-color: var(--success);
+	--btn-focus-shadow-rgb: 113, 198, 113;
+	--btn-active-color: hsl(0, 0%, 0%);
+	--btn-active-bg: var(--success);
+	--btn-active-border-color: var(--success);
+	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+	--btn-disabled-color: var(--success);
+	--btn-disabled-bg: transparent;
+	--btn-disabled-border-color: var(--success);
+	--gradient: none;
+}
+
+.btn-outline-info {
+	--btn-color: var(--info);
+	--btn-border-color: var(--info);
+	--btn-hover-color: hsl(0, 0%, 0%);
+	--btn-hover-bg: var(--info);
+	--btn-hover-border-color: var(--info);
+	--btn-focus-shadow-rgb: 116, 204, 233;
+	--btn-active-color: hsl(0, 0%, 0%);
+	--btn-active-bg: var(--info);
+	--btn-active-border-color: var(--info);
+	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+	--btn-disabled-color: var(--info);
+	--btn-disabled-bg: transparent;
+	--btn-disabled-border-color: var(--info);
+	--gradient: none;
+}
+
+.btn-outline-warning {
+	--btn-color: var(--warning);
+	--btn-border-color: var(--warning);
+	--btn-hover-color: hsl(0, 0%, 0%);
+	--btn-hover-bg: var(--warning);
+	--btn-hover-border-color: var(--warning);
+	--btn-focus-shadow-rgb: 222, 170, 12;
+	--btn-active-color: hsl(0, 0%, 0%);
+	--btn-active-bg: var(--warning);
+	--btn-active-border-color: var(--warning);
+	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+	--btn-disabled-color: var(--warning);
+	--btn-disabled-bg: transparent;
+	--btn-disabled-border-color: var(--warning);
+	--gradient: none;
+}
+
+.btn-outline-danger {
+	--btn-color: var(--danger);
+	--btn-border-color: var(--danger);
+	--btn-hover-color: hsl(0, 0%, 100%);
+	--btn-hover-bg: var(--danger);
+	--btn-hover-border-color: var(--danger);
+	--btn-focus-shadow-rgb: 223, 109, 105;
+	--btn-active-color: hsl(0, 0%, 100%);
+	--btn-active-bg: var(--danger);
+	--btn-active-border-color: var(--danger);
+	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+	--btn-disabled-color: var(--danger);
+	--btn-disabled-bg: transparent;
+	--btn-disabled-border-color: var(--danger);
+	--gradient: none;
+}
+
+.btn-outline-light {
+	--btn-color: #e9ecef;
+	--btn-border-color: #e9ecef;
+	--btn-hover-color: hsl(0, 0%, 0%);
+	--btn-hover-bg: #e9ecef;
+	--btn-hover-border-color: #e9ecef;
+	--btn-focus-shadow-rgb: 204, 207, 210;
+	--btn-active-color: hsl(0, 0%, 0%);
+	--btn-active-bg: #e9ecef;
+	--btn-active-border-color: #e9ecef;
+	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+	--btn-disabled-color: #e9ecef;
+	--btn-disabled-bg: transparent;
+	--btn-disabled-border-color: #e9ecef;
+	--gradient: none;
+}
+
+.btn-outline-dark {
+	--btn-color: #4a5057;
+	--btn-border-color: #4a5057;
+	--btn-hover-color: hsl(0, 0%, 100%);
+	--btn-hover-bg: #4a5057;
+	--btn-hover-border-color: #4a5057;
+	--btn-focus-shadow-rgb: 90, 95, 100;
+	--btn-active-color: hsl(0, 0%, 100%);
+	--btn-active-bg: #4a5057;
+	--btn-active-border-color: #4a5057;
+	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+	--btn-disabled-color: #4a5057;
+	--btn-disabled-bg: transparent;
+	--btn-disabled-border-color: #4a5057;
+	--gradient: none;
+}
diff --git a/templates/colors_custom_light.css b/templates/colors_custom_light.css
new file mode 100644
index 0000000..b2af9af
--- /dev/null
+++ b/templates/colors_custom_light.css
@@ -0,0 +1,327 @@
+@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: MokoCassiopeia.Templates
+ PATH: ./templates/colors_custom_light.css
+ VERSION: 03.08.04
+ BRIEF: Custom light theme color template with Bootstrap button definitions
+ */
+
+/* -----------------------------------------------
+ * CUSTOM LIGHT THEME TEMPLATE
+ * 
+ * Copy this file to:
+ *   src/media/css/colors/light/colors_custom.css
+ * 
+ * Then register it in src/joomla.asset.json under
+ * template.light.colors_custom asset.
+ * --------------------------------------------- */
+
+:root[data-bs-theme="light"] {
+	/* ===== BRAND COLORS (Customize these) ===== */
+	--color-primary: #0066cc;
+	--accent-color-primary: #3399ff;
+	--accent-color-secondary: #66b3ff;
+	
+	/* ===== LINKS ===== */
+	--link-color: #0066cc;
+	--link-hover-color: #0052a3;
+	
+	/* ===== BODY & TYPOGRAPHY ===== */
+	--body-color: #212529;
+	--body-bg: #ffffff;
+	
+	/* ===== BOOTSTRAP STATE COLORS ===== */
+	--success: #28a745;
+	--info: #17a2b8;
+	--warning: #ffc107;
+	--danger: #dc3545;
+	
+	/* ===== NAVIGATION ===== */
+	--nav-bg-color: var(--color-primary);
+	--nav-text-color: #ffffff;
+}
+
+/* ===== BOOTSTRAP BUTTON VARIANTS ===== */
+
+.btn-primary {
+	--btn-color: hsl(0, 0%, 100%);
+	--btn-bg: var(--color-primary);
+	--btn-border-color: var(--color-primary);
+	--btn-hover-color: hsl(0, 0%, 100%);
+	--btn-hover-bg: #0052a3;
+	--btn-hover-border-color: #004d99;
+	--btn-focus-shadow-rgb: 38, 128, 217;
+	--btn-active-color: hsl(0, 0%, 100%);
+	--btn-active-bg: #004d99;
+	--btn-active-border-color: #004788;
+	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+	--btn-disabled-color: hsl(0, 0%, 100%);
+	--btn-disabled-bg: var(--color-primary);
+	--btn-disabled-border-color: var(--color-primary);
+}
+
+.btn-secondary {
+	--btn-color: hsl(0, 0%, 100%);
+	--btn-bg: #6c757d;
+	--btn-border-color: #6c757d;
+	--btn-hover-color: hsl(0, 0%, 100%);
+	--btn-hover-bg: #5c636a;
+	--btn-hover-border-color: #565e64;
+	--btn-focus-shadow-rgb: 130, 138, 145;
+	--btn-active-color: hsl(0, 0%, 100%);
+	--btn-active-bg: #565e64;
+	--btn-active-border-color: #51585e;
+	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+	--btn-disabled-color: hsl(0, 0%, 100%);
+	--btn-disabled-bg: #6c757d;
+	--btn-disabled-border-color: #6c757d;
+}
+
+.btn-success {
+	--btn-color: hsl(0, 0%, 100%);
+	--btn-bg: var(--success);
+	--btn-border-color: var(--success);
+	--btn-hover-color: hsl(0, 0%, 100%);
+	--btn-hover-bg: #218838;
+	--btn-hover-border-color: #1e7e34;
+	--btn-focus-shadow-rgb: 72, 180, 97;
+	--btn-active-color: hsl(0, 0%, 100%);
+	--btn-active-bg: #1e7e34;
+	--btn-active-border-color: #1c7430;
+	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+	--btn-disabled-color: hsl(0, 0%, 100%);
+	--btn-disabled-bg: var(--success);
+	--btn-disabled-border-color: var(--success);
+}
+
+.btn-info {
+	--btn-color: hsl(0, 0%, 100%);
+	--btn-bg: var(--info);
+	--btn-border-color: var(--info);
+	--btn-hover-color: hsl(0, 0%, 100%);
+	--btn-hover-bg: #138496;
+	--btn-hover-border-color: #117a8b;
+	--btn-focus-shadow-rgb: 58, 176, 195;
+	--btn-active-color: hsl(0, 0%, 100%);
+	--btn-active-bg: #117a8b;
+	--btn-active-border-color: #10707f;
+	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+	--btn-disabled-color: hsl(0, 0%, 100%);
+	--btn-disabled-bg: var(--info);
+	--btn-disabled-border-color: var(--info);
+}
+
+.btn-warning {
+	--btn-color: hsl(0, 0%, 0%);
+	--btn-bg: var(--warning);
+	--btn-border-color: var(--warning);
+	--btn-hover-color: hsl(0, 0%, 0%);
+	--btn-hover-bg: #e0a800;
+	--btn-hover-border-color: #d39e00;
+	--btn-focus-shadow-rgb: 222, 170, 12;
+	--btn-active-color: hsl(0, 0%, 0%);
+	--btn-active-bg: #d39e00;
+	--btn-active-border-color: #c69500;
+	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+	--btn-disabled-color: hsl(0, 0%, 0%);
+	--btn-disabled-bg: var(--warning);
+	--btn-disabled-border-color: var(--warning);
+}
+
+.btn-danger {
+	--btn-color: hsl(0, 0%, 100%);
+	--btn-bg: var(--danger);
+	--btn-border-color: var(--danger);
+	--btn-hover-color: hsl(0, 0%, 100%);
+	--btn-hover-bg: #c82333;
+	--btn-hover-border-color: #bd2130;
+	--btn-focus-shadow-rgb: 225, 83, 97;
+	--btn-active-color: hsl(0, 0%, 100%);
+	--btn-active-bg: #bd2130;
+	--btn-active-border-color: #b21f2d;
+	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+	--btn-disabled-color: hsl(0, 0%, 100%);
+	--btn-disabled-bg: var(--danger);
+	--btn-disabled-border-color: var(--danger);
+}
+
+.btn-light {
+	--btn-color: hsl(0, 0%, 0%);
+	--btn-bg: #f8f9fa;
+	--btn-border-color: #f8f9fa;
+	--btn-hover-color: hsl(0, 0%, 0%);
+	--btn-hover-bg: #e2e6ea;
+	--btn-hover-border-color: #dae0e5;
+	--btn-focus-shadow-rgb: 216, 217, 219;
+	--btn-active-color: hsl(0, 0%, 0%);
+	--btn-active-bg: #dae0e5;
+	--btn-active-border-color: #d3d9df;
+	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+	--btn-disabled-color: hsl(0, 0%, 0%);
+	--btn-disabled-bg: #f8f9fa;
+	--btn-disabled-border-color: #f8f9fa;
+}
+
+.btn-dark {
+	--btn-color: hsl(0, 0%, 100%);
+	--btn-bg: #343a40;
+	--btn-border-color: #343a40;
+	--btn-hover-color: hsl(0, 0%, 100%);
+	--btn-hover-bg: #23272b;
+	--btn-hover-border-color: #1d2124;
+	--btn-focus-shadow-rgb: 82, 88, 93;
+	--btn-active-color: hsl(0, 0%, 100%);
+	--btn-active-bg: #1d2124;
+	--btn-active-border-color: #171a1d;
+	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+	--btn-disabled-color: hsl(0, 0%, 100%);
+	--btn-disabled-bg: #343a40;
+	--btn-disabled-border-color: #343a40;
+}
+
+/* ===== OUTLINE BUTTON VARIANTS ===== */
+
+.btn-outline-primary {
+	--btn-color: var(--color-primary);
+	--btn-border-color: var(--color-primary);
+	--btn-hover-color: hsl(0, 0%, 100%);
+	--btn-hover-bg: var(--color-primary);
+	--btn-hover-border-color: var(--color-primary);
+	--btn-focus-shadow-rgb: 38, 128, 217;
+	--btn-active-color: hsl(0, 0%, 100%);
+	--btn-active-bg: var(--color-primary);
+	--btn-active-border-color: var(--color-primary);
+	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+	--btn-disabled-color: var(--color-primary);
+	--btn-disabled-bg: transparent;
+	--btn-disabled-border-color: var(--color-primary);
+	--gradient: none;
+}
+
+.btn-outline-secondary {
+	--btn-color: #6c757d;
+	--btn-border-color: #6c757d;
+	--btn-hover-color: hsl(0, 0%, 100%);
+	--btn-hover-bg: #6c757d;
+	--btn-hover-border-color: #6c757d;
+	--btn-focus-shadow-rgb: 130, 138, 145;
+	--btn-active-color: hsl(0, 0%, 100%);
+	--btn-active-bg: #6c757d;
+	--btn-active-border-color: #6c757d;
+	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+	--btn-disabled-color: #6c757d;
+	--btn-disabled-bg: transparent;
+	--btn-disabled-border-color: #6c757d;
+	--gradient: none;
+}
+
+.btn-outline-success {
+	--btn-color: var(--success);
+	--btn-border-color: var(--success);
+	--btn-hover-color: hsl(0, 0%, 100%);
+	--btn-hover-bg: var(--success);
+	--btn-hover-border-color: var(--success);
+	--btn-focus-shadow-rgb: 72, 180, 97;
+	--btn-active-color: hsl(0, 0%, 100%);
+	--btn-active-bg: var(--success);
+	--btn-active-border-color: var(--success);
+	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+	--btn-disabled-color: var(--success);
+	--btn-disabled-bg: transparent;
+	--btn-disabled-border-color: var(--success);
+	--gradient: none;
+}
+
+.btn-outline-info {
+	--btn-color: var(--info);
+	--btn-border-color: var(--info);
+	--btn-hover-color: hsl(0, 0%, 100%);
+	--btn-hover-bg: var(--info);
+	--btn-hover-border-color: var(--info);
+	--btn-focus-shadow-rgb: 58, 176, 195;
+	--btn-active-color: hsl(0, 0%, 100%);
+	--btn-active-bg: var(--info);
+	--btn-active-border-color: var(--info);
+	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+	--btn-disabled-color: var(--info);
+	--btn-disabled-bg: transparent;
+	--btn-disabled-border-color: var(--info);
+	--gradient: none;
+}
+
+.btn-outline-warning {
+	--btn-color: var(--warning);
+	--btn-border-color: var(--warning);
+	--btn-hover-color: hsl(0, 0%, 0%);
+	--btn-hover-bg: var(--warning);
+	--btn-hover-border-color: var(--warning);
+	--btn-focus-shadow-rgb: 222, 170, 12;
+	--btn-active-color: hsl(0, 0%, 0%);
+	--btn-active-bg: var(--warning);
+	--btn-active-border-color: var(--warning);
+	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+	--btn-disabled-color: var(--warning);
+	--btn-disabled-bg: transparent;
+	--btn-disabled-border-color: var(--warning);
+	--gradient: none;
+}
+
+.btn-outline-danger {
+	--btn-color: var(--danger);
+	--btn-border-color: var(--danger);
+	--btn-hover-color: hsl(0, 0%, 100%);
+	--btn-hover-bg: var(--danger);
+	--btn-hover-border-color: var(--danger);
+	--btn-focus-shadow-rgb: 225, 83, 97;
+	--btn-active-color: hsl(0, 0%, 100%);
+	--btn-active-bg: var(--danger);
+	--btn-active-border-color: var(--danger);
+	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+	--btn-disabled-color: var(--danger);
+	--btn-disabled-bg: transparent;
+	--btn-disabled-border-color: var(--danger);
+	--gradient: none;
+}
+
+.btn-outline-light {
+	--btn-color: #f8f9fa;
+	--btn-border-color: #f8f9fa;
+	--btn-hover-color: hsl(0, 0%, 0%);
+	--btn-hover-bg: #f8f9fa;
+	--btn-hover-border-color: #f8f9fa;
+	--btn-focus-shadow-rgb: 216, 217, 219;
+	--btn-active-color: hsl(0, 0%, 0%);
+	--btn-active-bg: #f8f9fa;
+	--btn-active-border-color: #f8f9fa;
+	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+	--btn-disabled-color: #f8f9fa;
+	--btn-disabled-bg: transparent;
+	--btn-disabled-border-color: #f8f9fa;
+	--gradient: none;
+}
+
+.btn-outline-dark {
+	--btn-color: #343a40;
+	--btn-border-color: #343a40;
+	--btn-hover-color: hsl(0, 0%, 100%);
+	--btn-hover-bg: #343a40;
+	--btn-hover-border-color: #343a40;
+	--btn-focus-shadow-rgb: 82, 88, 93;
+	--btn-active-color: hsl(0, 0%, 100%);
+	--btn-active-bg: #343a40;
+	--btn-active-border-color: #343a40;
+	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+	--btn-disabled-color: #343a40;
+	--btn-disabled-bg: transparent;
+	--btn-disabled-border-color: #343a40;
+	--gradient: none;
+}