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

/* Color Variables
 *---------------------------------------------------------------------------*/
:root {
	/* Primary Colors */
	--crimson: #C92927;           /* Crimson */
	--crimson-hover: #D93E3C;
	--crimson-light: #E26361;
	--crimson-light-hover: #F08785;

	--carbon: #030303;            /* Carbon */
	--carbon-hover: #252525;
	--carbon-light: #464646;
	--carbon-light-hover: #666666;

	/* Additional Compatible Colors */
	--charcoal: #333333;          /* Charcoal Gray */
	--charcoal-hover: #444444;
	--charcoal-light: #555555;
	--charcoal-light-hover: #777777;

	--burgundy: #7D1A1A;          /* Deep Burgundy */
	--burgundy-hover: #8F2323;
	--burgundy-light: #A13232;
	--burgundy-light-hover: #B34646;
}

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

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

/* Crimson */
html .btn-crimson {
	background-color: var(--crimson);
	border-color: var(--crimson);
	color: #FFF;
}

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

html .btn-crimson:focus,
html .btn-crimson.focus {
	box-shadow: 0 0 0 3px rgba(201, 41, 39, 0.5);
	background-color: var(--crimson);
	border-color: var(--crimson);
}

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

/* Crimson Light */
html .btn-crimson-light {
	background-color: var(--crimson-light);
	border-color: var(--crimson-light);
	color: #FFF;
}

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

html .btn-crimson-light:focus,
html .btn-crimson-light.focus {
	box-shadow: 0 0 0 3px rgba(226, 99, 97, 0.5);
	background-color: var(--crimson-light);
	border-color: var(--crimson-light);
}

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

/* Carbon */
html .btn-carbon {
	background-color: var(--carbon);
	border-color: var(--carbon);
	color: #FFF;
}

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

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

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

/* Carbon Light */
html .btn-carbon-light {
	background-color: var(--carbon-light);
	border-color: var(--carbon-light);
	color: #FFF;
}

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

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

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

/* 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(51, 51, 51, 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(85, 85, 85, 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;
}

/* Burgundy */
html .btn-burgundy {
	background-color: var(--burgundy);
	border-color: var(--burgundy);
	color: #FFF;
}

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

html .btn-burgundy:focus,
html .btn-burgundy.focus {
	box-shadow: 0 0 0 3px rgba(125, 26, 26, 0.5);
	background-color: var(--burgundy);
	border-color: var(--burgundy);
}

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

/* Burgundy Light */
html .btn-burgundy-light {
	background-color: var(--burgundy-light);
	border-color: var(--burgundy-light);
	color: #FFF;
}

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

html .btn-burgundy-light:focus,
html .btn-burgundy-light.focus {
	box-shadow: 0 0 0 3px rgba(161, 50, 50, 0.5);
	background-color: var(--burgundy-light);
	border-color: var(--burgundy-light);
}

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

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

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

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

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

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

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

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

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

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

/* 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;
}

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

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

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

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

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

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

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

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

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

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-burgundy,
html .background-color-burgundy {
	background-color: var(--burgundy) !important;
}

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

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

.badge-crimson {
	background: var(--crimson-hover);
	color: #FFF;
}

.badge-crimson-light {
	background: var(--crimson-light-hover);
	color: #FFF;
}

.badge-carbon {
	background: var(--carbon-hover);
	color: #FFF;
}

.badge-carbon-light {
	background: var(--carbon-light-hover);
	color: #FFF;
}

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

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

.badge-burgundy {
	background: var(--burgundy-hover);
	color: #FFF;
}

.badge-burgundy-light {
	background: var(--burgundy-light-hover);
	color: #FFF;
}

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

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

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

html .btn-outline-crimson:focus,
html .btn-outline-crimson.focus {
	box-shadow: 0 0 0 3px rgba(201, 41, 39, 0.5);
}

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

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

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

html .btn-outline-crimson-light:focus,
html .btn-outline-crimson-light.focus {
	box-shadow: 0 0 0 3px rgba(226, 99, 97, 0.5);
}

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

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

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

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

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

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

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

html .btn-outline-carbon-light:focus,
html .btn-outline-carbon-light.focus {
	box-shadow: 0 0 0 3px rgba(70, 70, 70, 0.5);
}

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

/* 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(51, 51, 51, 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(85, 85, 85, 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;
}

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

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

html .btn-outline-burgundy:focus,
html .btn-outline-burgundy.focus {
	box-shadow: 0 0 0 3px rgba(125, 26, 26, 0.5);
}

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

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

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

html .btn-outline-burgundy-light:focus,
html .btn-outline-burgundy-light.focus {
	box-shadow: 0 0 0 3px rgba(161, 50, 50, 0.5);
}

html .btn-outline-burgundy-light.disabled,
html .btn-outline-burgundy-light:disabled {
	color: var(--burgundy-light);
	background-color: transparent;
	border-color: var(--burgundy-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-crimson {
	color: #FFF;
	background-color: var(--crimson);
	border-color: var(--crimson);
}

.alert-crimson .alert-link {
	color: #FFF;
	text-decoration: underline;
}

.alert-crimson-light {
	color: #FFF;
	background-color: var(--crimson-light);
	border-color: var(--crimson-light);
}

.alert-crimson-light .alert-link {
	color: #FFF;
	text-decoration: underline;
}

.alert-carbon {
	color: #FFF;
	background-color: var(--carbon);
	border-color: var(--carbon);
}

.alert-carbon .alert-link {
	color: #FFF;
	text-decoration: underline;
}

.alert-carbon-light {
	color: #FFF;
	background-color: var(--carbon-light);
	border-color: var(--carbon-light);
}

.alert-carbon-light .alert-link {
	color: #FFF;
	text-decoration: underline;
}

.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-burgundy {
	color: #FFF;
	background-color: var(--burgundy);
	border-color: var(--burgundy);
}

.alert-burgundy .alert-link {
	color: #FFF;
	text-decoration: underline;
}

.alert-burgundy-light {
	color: #FFF;
	background-color: var(--burgundy-light);
	border-color: var(--burgundy-light);
}

.alert-burgundy-light .alert-link {
	color: #FFF;
	text-decoration: underline;
}