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

/* Color Variables
 *---------------------------------------------------------------------------*/
:root {
	/* Tan Colors */
	--tan: #F2D49B;               /* Light Tan */
	--tan-hover: #F0CE88;
	--tan-light: #F6E0C1;
	--tan-light-hover: #F8E6D4;
}

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

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

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

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

html .btn-tan:focus,
html .btn-tan.focus {
	box-shadow: 0 0 0 3px rgba(242, 212, 155, 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(246, 224, 193, 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;
}

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

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

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

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

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

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

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

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

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

html .btn-outline-tan:focus,
html .btn-outline-tan.focus {
	box-shadow: 0 0 0 3px rgba(242, 212, 155, 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(246, 224, 193, 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;
}

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