@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/light.custom.css
 VERSION: 03.09.03
 BRIEF: Custom light theme color template with Bootstrap button definitions
 */

/* -----------------------------------------------
 * CUSTOM LIGHT THEME TEMPLATE
 * 
 * Copy this file to:
 *   src/media/css/theme/light.custom.css
 * 
 * Then register it in src/joomla.asset.json under
 * template.light.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;
}