/*-----------------------------------------------------------------------------
 * Color System CSS
 * This file contains all color-related styles organized by component type
 *---------------------------------------------------------------------------*/

/* Color Variables
 *---------------------------------------------------------------------------*/
:root {
	--charcoal: #1f2326; /* Dark Charcoal */
	--charcoal-hover: #2d3135;
	--charcoal-light: #3b4045;
	--charcoal-light-hover: #4a4f54;

	--olive: #736c5a; /* Earthy Olive */
	--olive-hover: #827b69;
	--olive-light: #918a78;
	--olive-light-hover: #a09987;

	--tan: #bfae99; /* Warm Tan */
	--tan-hover: #c9b9a6;
	--tan-light: #d3c4b3;
	--tan-light-hover: #ddcfc0;

	--cream: #f2eae4; /* Light Cream */
	--cream-hover: #f5eee9;
	--cream-light: #f8f2ee;
	--cream-light-hover: #fbf6f3;
}

/*-----------------------------------------------------------------------------
 * Buttons
 *---------------------------------------------------------------------------*/

/* Default Button Structure */
[class*="btn-"] {
	display: inline-block;
	padding: 0.5rem 1rem;
	border-radius: 0.25rem;
	transition: all 0.2s ease-in-out;
}

/* Charcoal */
html .btn-charcoal {
	background-color: var(--charcoal);
	border-color: var(--charcoal);
	color: #fff;
}

html .btn-charcoal:hover,
html .btn-charcoal.hover {
	background-color: var(--charcoal-hover);
	border-color: var(--charcoal-hover);
	color: #fff;
}

html .btn-charcoal:focus,
html .btn-charcoal.focus {
	box-shadow: 0 0 0 3px rgba(31, 35, 38, 0.5);
	background-color: var(--charcoal);
	border-color: var(--charcoal);
}

html .btn-charcoal.disabled,
html .btn-charcoal:disabled {
	background-color: var(--charcoal);
	border-color: var(--charcoal);
	opacity: 0.65;
}

/* Charcoal Light */
html .btn-charcoal-light {
	background-color: var(--charcoal-light);
	border-color: var(--charcoal-light);
	color: #fff;
}

html .btn-charcoal-light:hover,
html .btn-charcoal-light.hover {
	background-color: var(--charcoal-light-hover);
	border-color: var(--charcoal-light-hover);
	color: #fff;
}

html .btn-charcoal-light:focus,
html .btn-charcoal-light.focus {
	box-shadow: 0 0 0 3px rgba(59, 64, 69, 0.5);
	background-color: var(--charcoal-light);
	border-color: var(--charcoal-light);
}

html .btn-charcoal-light.disabled,
html .btn-charcoal-light:disabled {
	background-color: var(--charcoal-light);
	border-color: var(--charcoal-light);
	opacity: 0.65;
}

/* Olive */
html .btn-olive {
	background-color: var(--olive);
	border-color: var(--olive);
	color: #fff;
}

html .btn-olive:hover,
html .btn-olive.hover {
	background-color: var(--olive-hover);
	border-color: var(--olive-hover);
	color: #fff;
}

html .btn-olive:focus,
html .btn-olive.focus {
	box-shadow: 0 0 0 3px rgba(115, 108, 90, 0.5);
	background-color: var(--olive);
	border-color: var(--olive);
}

html .btn-olive.disabled,
html .btn-olive:disabled {
	background-color: var(--olive);
	border-color: var(--olive);
	opacity: 0.65;
}

/* Olive Light */
html .btn-olive-light {
	background-color: var(--olive-light);
	border-color: var(--olive-light);
	color: #fff;
}

html .btn-olive-light:hover,
html .btn-olive-light.hover {
	background-color: var(--olive-light-hover);
	border-color: var(--olive-light-hover);
	color: #fff;
}

html .btn-olive-light:focus,
html .btn-olive-light.focus {
	box-shadow: 0 0 0 3px rgba(145, 138, 120, 0.5);
	background-color: var(--olive-light);
	border-color: var(--olive-light);
}

html .btn-olive-light.disabled,
html .btn-olive-light:disabled {
	background-color: var(--olive-light);
	border-color: var(--olive-light);
	opacity: 0.65;
}

/* Tan */
html .btn-tan {
	background-color: var(--tan);
	border-color: var(--tan);
	color: #fff;
}

html .btn-tan:hover,
html .btn-tan.hover {
	background-color: var(--tan-hover);
	border-color: var(--tan-hover);
	color: #fff;
}

html .btn-tan:focus,
html .btn-tan.focus {
	box-shadow: 0 0 0 3px rgba(191, 174, 153, 0.5);
	background-color: var(--tan);
	border-color: var(--tan);
}

html .btn-tan.disabled,
html .btn-tan:disabled {
	background-color: var(--tan);
	border-color: var(--tan);
	opacity: 0.65;
}

/* Tan Light */
html .btn-tan-light {
	background-color: var(--tan-light);
	border-color: var(--tan-light);
	color: #333;
}

html .btn-tan-light:hover,
html .btn-tan-light.hover {
	background-color: var(--tan-light-hover);
	border-color: var(--tan-light-hover);
	color: #333;
}

html .btn-tan-light:focus,
html .btn-tan-light.focus {
	box-shadow: 0 0 0 3px rgba(211, 196, 179, 0.5);
	background-color: var(--tan-light);
	border-color: var(--tan-light);
}

html .btn-tan-light.disabled,
html .btn-tan-light:disabled {
	background-color: var(--tan-light);
	border-color: var(--tan-light);
	opacity: 0.65;
}

/* Cream */
html .btn-cream {
	background-color: var(--cream);
	border-color: var(--cream);
	color: #333;
}

html .btn-cream:hover,
html .btn-cream.hover {
	background-color: var(--cream-hover);
	border-color: var(--cream-hover);
	color: #333;
}

html .btn-cream:focus,
html .btn-cream.focus {
	box-shadow: 0 0 0 3px rgba(242, 234, 228, 0.5);
	background-color: var(--cream);
	border-color: var(--cream);
}

html .btn-cream.disabled,
html .btn-cream:disabled {
	background-color: var(--cream);
	border-color: var(--cream);
	opacity: 0.65;
}

/* Cream Light */
html .btn-cream-light {
	background-color: var(--cream-light);
	border-color: var(--cream-light);
	color: #333;
}

html .btn-cream-light:hover,
html .btn-cream-light.hover {
	background-color: var(--cream-light-hover);
	border-color: var(--cream-light-hover);
	color: #333;
}

html .btn-cream-light:focus,
html .btn-cream-light.focus {
	box-shadow: 0 0 0 3px rgba(248, 242, 238, 0.5);
	background-color: var(--cream-light);
	border-color: var(--cream-light);
}

html .btn-cream-light.disabled,
html .btn-cream-light:disabled {
	background-color: var(--cream-light);
	border-color: var(--cream-light);
	opacity: 0.65;
}

/*-----------------------------------------------------------------------------
 * Text Colors
 *---------------------------------------------------------------------------*/

/* Charcoal Text Colors */
html .heading-charcoal,
html .lnk-charcoal,
html .text-color-charcoal,
html .text-charcoal {
	color: var(--charcoal) !important;
}

html .text-color-hover-charcoal:hover,
html .text-hover-charcoal:hover {
	color: var(--charcoal) !important;
}

/* Charcoal Light Text Colors */
html .heading-charcoal-light,
html .lnk-charcoal-light,
html .text-color-charcoal-light,
html .text-charcoal-light {
	color: var(--charcoal-light) !important;
}

html .text-color-hover-charcoal-light:hover,
html .text-hover-charcoal-light:hover {
	color: var(--charcoal-light) !important;
}

/* Olive Text Colors */
html .heading-olive,
html .lnk-olive,
html .text-color-olive,
html .text-olive {
	color: var(--olive) !important;
}

html .text-color-hover-olive:hover,
html .text-hover-olive:hover {
	color: var(--olive) !important;
}

/* Olive Light Text Colors */
html .heading-olive-light,
html .lnk-olive-light,
html .text-color-olive-light,
html .text-olive-light {
	color: var(--olive-light) !important;
}

html .text-color-hover-olive-light:hover,
html .text-hover-olive-light:hover {
	color: var(--olive-light) !important;
}

/* Tan Text Colors */
html .heading-tan,
html .lnk-tan,
html .text-color-tan,
html .text-tan {
	color: var(--tan) !important;
}

html .text-color-hover-tan:hover,
html .text-hover-tan:hover {
	color: var(--tan) !important;
}

/* Tan Light Text Colors */
html .heading-tan-light,
html .lnk-tan-light,
html .text-color-tan-light,
html .text-tan-light {
	color: var(--tan-light) !important;
}

html .text-color-hover-tan-light:hover,
html .text-hover-tan-light:hover {
	color: var(--tan-light) !important;
}

/* Cream Text Colors */
html .heading-cream,
html .lnk-cream,
html .text-color-cream,
html .text-cream {
	color: var(--cream) !important;
}

html .text-color-hover-cream:hover,
html .text-hover-cream:hover {
	color: var(--cream) !important;
}

/* Cream Light Text Colors */
html .heading-cream-light,
html .lnk-cream-light,
html .text-color-cream-light,
html .text-cream-light {
	color: var(--cream-light) !important;
}

html .text-color-hover-cream-light:hover,
html .text-hover-cream-light:hover {
	color: var(--cream-light) !important;
}

/*-----------------------------------------------------------------------------
 * Background Colors
 *---------------------------------------------------------------------------*/

html .bg-charcoal,
html .background-color-charcoal {
	background-color: var(--charcoal) !important;
}

html .bg-charcoal-light,
html .background-color-charcoal-light {
	background-color: var(--charcoal-light) !important;
}

html .bg-olive,
html .background-color-olive {
	background-color: var(--olive) !important;
}

html .bg-olive-light,
html .background-color-olive-light {
	background-color: var(--olive-light) !important;
}

html .bg-tan,
html .background-color-tan {
	background-color: var(--tan) !important;
}

html .bg-tan-light,
html .background-color-tan-light {
	background-color: var(--tan-light) !important;
}

html .bg-cream,
html .background-color-cream {
	background-color: var(--cream) !important;
}

html .bg-cream-light,
html .background-color-cream-light {
	background-color: var(--cream-light) !important;
}

/*-----------------------------------------------------------------------------
 * Badges
 *---------------------------------------------------------------------------*/

.badge-charcoal {
	background: var(--charcoal-hover);
	color: #fff;
}

.badge-charcoal-light {
	background: var(--charcoal-light-hover);
	color: #fff;
}

.badge-olive {
	background: var(--olive-hover);
	color: #fff;
}

.badge-olive-light {
	background: var(--olive-light-hover);
	color: #fff;
}

.badge-tan {
	background: var(--tan-hover);
	color: #fff;
}

.badge-tan-light {
	background: var(--tan-light-hover);
	color: #333;
}

.badge-cream {
	background: var(--cream-hover);
	color: #333;
}

.badge-cream-light {
	background: var(--cream-light-hover);
	color: #333;
}

/*-----------------------------------------------------------------------------
 * Outline Buttons
 *---------------------------------------------------------------------------*/

/* Charcoal Outline */
html .btn-outline-charcoal {
	color: var(--charcoal);
	border-color: var(--charcoal);
	background-color: transparent;
	border-width: 2px;
	padding: 7.728px 14.928px;
	padding: 0.483rem 0.933rem;
}

html .btn-outline-charcoal:hover,
html .btn-outline-charcoal.hover {
	background-color: var(--charcoal);
	border-color: var(--charcoal);
	color: #fff;
}

html .btn-outline-charcoal:focus,
html .btn-outline-charcoal.focus {
	box-shadow: 0 0 0 3px rgba(31, 35, 38, 0.5);
}

html .btn-outline-charcoal.disabled,
html .btn-outline-charcoal:disabled {
	color: var(--charcoal);
	background-color: transparent;
	border-color: var(--charcoal);
	opacity: 0.65;
}

/* Charcoal Light Outline */
html .btn-outline-charcoal-light {
	color: var(--charcoal-light);
	border-color: var(--charcoal-light);
	background-color: transparent;
	border-width: 2px;
	padding: 7.728px 14.928px;
	padding: 0.483rem 0.933rem;
}

html .btn-outline-charcoal-light:hover,
html .btn-outline-charcoal-light.hover {
	background-color: var(--charcoal-light);
	border-color: var(--charcoal-light);
	color: #fff;
}

html .btn-outline-charcoal-light:focus,
html .btn-outline-charcoal-light.focus {
	box-shadow: 0 0 0 3px rgba(59, 64, 69, 0.5);
}

html .btn-outline-charcoal-light.disabled,
html .btn-outline-charcoal-light:disabled {
	color: var(--charcoal-light);
	background-color: transparent;
	border-color: var(--charcoal-light);
	opacity: 0.65;
}

/* Olive Outline */
html .btn-outline-olive {
	color: var(--olive);
	border-color: var(--olive);
	background-color: transparent;
	border-width: 2px;
	padding: 7.728px 14.928px;
	padding: 0.483rem 0.933rem;
}

html .btn-outline-olive:hover,
html .btn-outline-olive.hover {
	background-color: var(--olive);
	border-color: var(--olive);
	color: #fff;
}

html .btn-outline-olive:focus,
html .btn-outline-olive.focus {
	box-shadow: 0 0 0 3px rgba(115, 108, 90, 0.5);
}

html .btn-outline-olive.disabled,
html .btn-outline-olive:disabled {
	color: var(--olive);
	background-color: transparent;
	border-color: var(--olive);
	opacity: 0.65;
}

/* Olive Light Outline */
html .btn-outline-olive-light {
	color: var(--olive-light);
	border-color: var(--olive-light);
	background-color: transparent;
	border-width: 2px;
	padding: 7.728px 14.928px;
	padding: 0.483rem 0.933rem;
}

html .btn-outline-olive-light:hover,
html .btn-outline-olive-light.hover {
	background-color: var(--olive-light);
	border-color: var(--olive-light);
	color: #fff;
}

html .btn-outline-olive-light:focus,
html .btn-outline-olive-light.focus {
	box-shadow: 0 0 0 3px rgba(145, 138, 120, 0.5);
}

html .btn-outline-olive-light.disabled,
html .btn-outline-olive-light:disabled {
	color: var(--olive-light);
	background-color: transparent;
	border-color: var(--olive-light);
	opacity: 0.65;
}

/* Tan Outline */
html .btn-outline-tan {
	color: var(--tan);
	border-color: var(--tan);
	background-color: transparent;
	border-width: 2px;
	padding: 7.728px 14.928px;
	padding: 0.483rem 0.933rem;
}

html .btn-outline-tan:hover,
html .btn-outline-tan.hover {
	background-color: var(--tan);
	border-color: var(--tan);
	color: #fff;
}

html .btn-outline-tan:focus,
html .btn-outline-tan.focus {
	box-shadow: 0 0 0 3px rgba(191, 174, 153, 0.5);
}

html .btn-outline-tan.disabled,
html .btn-outline-tan:disabled {
	color: var(--tan);
	background-color: transparent;
	border-color: var(--tan);
	opacity: 0.65;
}

/* Tan Light Outline */
html .btn-outline-tan-light {
	color: var(--tan-light);
	border-color: var(--tan-light);
	background-color: transparent;
	border-width: 2px;
	padding: 7.728px 14.928px;
	padding: 0.483rem 0.933rem;
}

html .btn-outline-tan-light:hover,
html .btn-outline-tan-light.hover {
	background-color: var(--tan-light);
	border-color: var(--tan-light);
	color: #333;
}

html .btn-outline-tan-light:focus,
html .btn-outline-tan-light.focus {
	box-shadow: 0 0 0 3px rgba(211, 196, 179, 0.5);
}

html .btn-outline-tan-light.disabled,
html .btn-outline-tan-light:disabled {
	color: var(--tan-light);
	background-color: transparent;
	border-color: var(--tan-light);
	opacity: 0.65;
}

/* Cream Outline */
html .btn-outline-cream {
	color: var(--cream);
	border-color: var(--cream);
	background-color: transparent;
	border-width: 2px;
	padding: 7.728px 14.928px;
	padding: 0.483rem 0.933rem;
}

html .btn-outline-cream:hover,
html .btn-outline-cream.hover {
	background-color: var(--cream);
	border-color: var(--cream);
	color: #333;
}

html .btn-outline-cream:focus,
html .btn-outline-cream.focus {
	box-shadow: 0 0 0 3px rgba(242, 234, 228, 0.5);
}

html .btn-outline-cream.disabled,
html .btn-outline-cream:disabled {
	color: var(--cream);
	background-color: transparent;
	border-color: var(--cream);
	opacity: 0.65;
}

/* Cream Light Outline */
html .btn-outline-cream-light {
	color: var(--cream-light);
	border-color: var(--cream-light);
	background-color: transparent;
	border-width: 2px;
	padding: 7.728px 14.928px;
	padding: 0.483rem 0.933rem;
}

html .btn-outline-cream-light:hover,
html .btn-outline-cream-light.hover {
	background-color: var(--cream-light);
	border-color: var(--cream-light);
	color: #333;
}

html .btn-outline-cream-light:focus,
html .btn-outline-cream-light.focus {
	box-shadow: 0 0 0 3px rgba(248, 242, 238, 0.5);
}

html .btn-outline-cream-light.disabled,
html .btn-outline-cream-light:disabled {
	color: var(--cream-light);
	background-color: transparent;
	border-color: var(--cream-light);
	opacity: 0.65;
}

/*-----------------------------------------------------------------------------
 * Button Size Variations
 *---------------------------------------------------------------------------*/

html [class*="btn-outline-"].btn-xs {
	padding: 2.4px 8px;
	padding: 0.15rem 0.5rem;
}

html [class*="btn-outline-"].btn-sm {
	padding: 4px 10.4px;
	padding: 0.25rem 0.65rem;
}

html [class*="btn-outline-"].btn-lg {
	padding: 7.2px 16px;
	padding: 0.45rem 1rem;
}

html [class*="btn-outline-"].btn-xl {
	padding: 12px 32px;
	padding: 0.75rem 2rem;
}

html [class*="btn-outline-"].btn-outline-thin {
	border-width: 1px;
}

/*-----------------------------------------------------------------------------
 * Alerts
 *---------------------------------------------------------------------------*/

.alert-charcoal {
	color: #fff;
	background-color: var(--charcoal);
	border-color: var(--charcoal);
}

.alert-charcoal .alert-link {
	color: #fff;
	text-decoration: underline;
}

.alert-charcoal-light {
	color: #fff;
	background-color: var(--charcoal-light);
	border-color: var(--charcoal-light);
}

.alert-charcoal-light .alert-link {
	color: #fff;
	text-decoration: underline;
}

.alert-olive {
	color: #fff;
	background-color: var(--olive);
	border-color: var(--olive);
}

.alert-olive .alert-link {
	color: #fff;
	text-decoration: underline;
}

.alert-olive-light {
	color: #fff;
	background-color: var(--olive-light);
	border-color: var(--olive-light);
}

.alert-olive-light .alert-link {
	color: #fff;
	text-decoration: underline;
}

.alert-tan {
	color: #333;
	background-color: var(--tan);
	border-color: var(--tan);
}

.alert-tan .alert-link {
	color: #333;
	text-decoration: underline;
}

.alert-tan-light {
	color: #333;
	background-color: var(--tan-light);
	border-color: var(--tan-light);
}

.alert-tan-light .alert-link {
	color: #333;
	text-decoration: underline;
}

.alert-cream {
	color: #333;
	background-color: var(--cream);
	border-color: var(--cream);
}

.alert-cream .alert-link {
	color: #333;
	text-decoration: underline;
}

.alert-cream-light {
	color: #333;
	background-color: var(--cream-light);
	border-color: var(--cream-light);
}

.alert-cream-light .alert-link {
	color: #333;
	text-decoration: underline;
}

/*-----------------------------------------------------------------------------
 * Border Colors
 *---------------------------------------------------------------------------*/

html .border-charcoal {
	border-color: var(--charcoal) !important;
}

html .border-charcoal-light {
	border-color: var(--charcoal-light) !important;
}

html .border-olive {
	border-color: var(--olive) !important;
}

html .border-olive-light {
	border-color: var(--olive-light) !important;
}

html .border-tan {
	border-color: var(--tan) !important;
}

html .border-tan-light {
	border-color: var(--tan-light) !important;
}

html .border-cream {
	border-color: var(--cream) !important;
}

html .border-cream-light {
	border-color: var(--cream-light) !important;
}