/*-----------------------------------------------------------------------------
 * DARE Transfers — Color System
 * Named color palette with full utility classes
 * Generated by Sagentic Dashboard Color System + manual additions
 *---------------------------------------------------------------------------*/

:root {
	/* ─── Brand Colors ────────────────────────────────────────────── */

	/* Buttercup — primary gold */
	--buttercup: #f2c01e;
	--buttercup-hover: #b88f0a;
	--buttercup-light: #f6d466;
	--buttercup-light-hover: #fae8ae;

	/* Limeade — CTA green */
	--limeade: #5c8303;
	--limeade-hover: #273801;
	--limeade-light: #90cd04;
	--limeade-light-hover: #b9fa24;

	/* Conifer — accent green */
	--conifer: #a8cf4d;
	--conifer-hover: #7fa32c;
	--conifer-light: #c5df89;
	--conifer-light-hover: #e2efc5;

	/* Wild-Willow — soft green */
	--wild-willow: #b9d180;
	--wild-willow-hover: #9abc47;
	--wild-willow-light: #d7e5b8;
	--wild-willow-light-hover: #f6f9f0;

	/* ─── Dark Neutrals — depth layers ────────────────────────────── */

	--obsidian: #010203;
	--obsidian-hover: #0a0b0c;
	--obsidian-light: #191919;
	--obsidian-light-hover: #222222;

	--coal: #111111;
	--coal-hover: #1a1a1a;
	--coal-light: #222222;
	--coal-light-hover: #2a2a2a;

	--graphite: #1a1a1a;
	--graphite-hover: #222222;
	--graphite-light: #2a2a2a;
	--graphite-light-hover: #333333;

	--slate: #222222;
	--slate-hover: #2a2a2a;
	--slate-light: #333333;
	--slate-light-hover: #3d3d3d;

	--ash: #2a2a2a;
	--ash-hover: #333333;
	--ash-light: #3d3d3d;
	--ash-light-hover: #4a4a4a;

	/* ─── Light Neutrals — text & accents ─────────────────────────── */

	--pewter: #999999;
	--pewter-hover: #b3b3b3;
	--pewter-light: #cccccc;
	--pewter-light-hover: #e0e0e0;

	--sandstone: #b8b2a8;
	--sandstone-hover: #cec9c1;
	--sandstone-light: #d9d5cf;
	--sandstone-light-hover: #e8e5e1;

	--ivory: #ede8e0;
	--ivory-hover: #f5f2ed;
	--ivory-light: #faf8f5;
	--ivory-light-hover: #ffffff;

	--cloud: #f8f9fa;
	--cloud-hover: #e9ecef;
	--cloud-light: #ffffff;
	--cloud-light-hover: #ffffff;

	/* ─── Status Colors ───────────────────────────────────────────── */

	--emerald: #27ae60;
	--emerald-hover: #219a52;
	--emerald-light: #52c77e;
	--emerald-light-hover: #7ed9a0;

	--scarlet: #c0392b;
	--scarlet-hover: #a93226;
	--scarlet-light: #d45d52;
	--scarlet-light-hover: #e88078;

	--cerulean: #3498db;
	--cerulean-hover: #2980b9;
	--cerulean-light: #5dade2;
	--cerulean-light-hover: #85c1e9;
}

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

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

/* Buttercup */
html .btn-buttercup {
	background-color: var(--buttercup);
	border-color: var(--buttercup);
	color: #000 !important;
}

html .btn-buttercup:hover,
html .btn-buttercup.hover {
	background-color: var(--buttercup-hover);
	border-color: var(--buttercup-hover);
	color: #000 !important;
}

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

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

/* Buttercup Light */
html .btn-buttercup-light {
	background-color: var(--buttercup-light);
	border-color: var(--buttercup-light);
	color: #000 !important;
}

html .btn-buttercup-light:hover,
html .btn-buttercup-light.hover {
	background-color: var(--buttercup-light-hover);
	border-color: var(--buttercup-light-hover);
	color: #000 !important;
}

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

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

/* Limeade */
html .btn-limeade {
	background-color: var(--limeade);
	border-color: var(--limeade);
	color: #FFF !important;
}

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

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

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

/* Limeade Light */
html .btn-limeade-light {
	background-color: var(--limeade-light);
	border-color: var(--limeade-light);
	color: #FFF !important;
}

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

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

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

/* Conifer */
html .btn-conifer {
	background-color: var(--conifer);
	border-color: var(--conifer);
	color: #000 !important;
}

html .btn-conifer:hover,
html .btn-conifer.hover {
	background-color: var(--conifer-hover);
	border-color: var(--conifer-hover);
	color: #000 !important;
}

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

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

/* Conifer Light */
html .btn-conifer-light {
	background-color: var(--conifer-light);
	border-color: var(--conifer-light);
	color: #000 !important;
}

html .btn-conifer-light:hover,
html .btn-conifer-light.hover {
	background-color: var(--conifer-light-hover);
	border-color: var(--conifer-light-hover);
	color: #000 !important;
}

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

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

/* Wild-Willow */
html .btn-wild-willow {
	background-color: var(--wild-willow);
	border-color: var(--wild-willow);
	color: #000;
}

html .btn-wild-willow:hover,
html .btn-wild-willow.hover {
	background-color: var(--wild-willow-hover);
	border-color: var(--wild-willow-hover);
	color: #000;
}

html .btn-wild-willow:focus,
html .btn-wild-willow.focus {
	box-shadow: 0 0 0 3px rgba(185, 209, 128, 0.5);
	background-color: var(--wild-willow);
	border-color: var(--wild-willow);
}

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

/* Wild-Willow Light */
html .btn-wild-willow-light {
	background-color: var(--wild-willow-light);
	border-color: var(--wild-willow-light);
	color: #000;
}

html .btn-wild-willow-light:hover,
html .btn-wild-willow-light.hover {
	background-color: var(--wild-willow-light-hover);
	border-color: var(--wild-willow-light-hover);
	color: #000;
}

html .btn-wild-willow-light:focus,
html .btn-wild-willow-light.focus {
	box-shadow: 0 0 0 3px rgba(215, 229, 184, 0.5);
	background-color: var(--wild-willow-light);
	border-color: var(--wild-willow-light);
}

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

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

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

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

html .heading.heading-buttercup h1,
html .heading.heading-buttercup h2,
html .heading.heading-buttercup h3,
html .heading.heading-buttercup h4,
html .heading.heading-buttercup h5,
html .heading.heading-buttercup h6 {
	border-color: var(--buttercup);
}

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

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

html .heading.heading-buttercup-light h1,
html .heading.heading-buttercup-light h2,
html .heading.heading-buttercup-light h3,
html .heading.heading-buttercup-light h4,
html .heading.heading-buttercup-light h5,
html .heading.heading-buttercup-light h6 {
	border-color: var(--buttercup-light);
}

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

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

html .heading.heading-limeade h1,
html .heading.heading-limeade h2,
html .heading.heading-limeade h3,
html .heading.heading-limeade h4,
html .heading.heading-limeade h5,
html .heading.heading-limeade h6 {
	border-color: var(--limeade);
}

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

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

html .heading.heading-limeade-light h1,
html .heading.heading-limeade-light h2,
html .heading.heading-limeade-light h3,
html .heading.heading-limeade-light h4,
html .heading.heading-limeade-light h5,
html .heading.heading-limeade-light h6 {
	border-color: var(--limeade-light);
}

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

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

html .heading.heading-conifer h1,
html .heading.heading-conifer h2,
html .heading.heading-conifer h3,
html .heading.heading-conifer h4,
html .heading.heading-conifer h5,
html .heading.heading-conifer h6 {
	border-color: var(--conifer);
}

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

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

html .heading.heading-conifer-light h1,
html .heading.heading-conifer-light h2,
html .heading.heading-conifer-light h3,
html .heading.heading-conifer-light h4,
html .heading.heading-conifer-light h5,
html .heading.heading-conifer-light h6 {
	border-color: var(--conifer-light);
}

/* Wild-Willow Text Colors */
html .heading-wild-willow,
html .lnk-wild-willow,
html .text-color-wild-willow,
html .text-wild-willow {
	color: var(--wild-willow) !important;
}

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

html .heading.heading-wild-willow h1,
html .heading.heading-wild-willow h2,
html .heading.heading-wild-willow h3,
html .heading.heading-wild-willow h4,
html .heading.heading-wild-willow h5,
html .heading.heading-wild-willow h6 {
	border-color: var(--wild-willow);
}

/* Wild-Willow Light Text Colors */
html .heading-wild-willow-light,
html .lnk-wild-willow-light,
html .text-color-wild-willow-light,
html .text-wild-willow-light {
	color: var(--wild-willow-light) !important;
}

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

html .heading.heading-wild-willow-light h1,
html .heading.heading-wild-willow-light h2,
html .heading.heading-wild-willow-light h3,
html .heading.heading-wild-willow-light h4,
html .heading.heading-wild-willow-light h5,
html .heading.heading-wild-willow-light h6 {
	border-color: var(--wild-willow-light);
}

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

/* Buttercup Background Colors */
html .bg-buttercup,
html .background-color-buttercup {
	background-color: var(--buttercup) !important;
}

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

/* Limeade Background Colors */
html .bg-limeade,
html .background-color-limeade {
	background-color: var(--limeade) !important;
}

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

/* Conifer Background Colors */
html .bg-conifer,
html .background-color-conifer {
	background-color: var(--conifer) !important;
}

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

/* Wild-Willow Background Colors */
html .bg-wild-willow,
html .background-color-wild-willow {
	background-color: var(--wild-willow) !important;
}

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

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

/* Buttercup Badges */
.badge-buttercup {
	background: var(--buttercup-hover);
	color: #000;
}

.badge-buttercup-light {
	background: var(--buttercup-light-hover);
	color: #000;
}

/* Limeade Badges */
.badge-limeade {
	background: var(--limeade-hover);
	color: #FFF;
}

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

/* Conifer Badges */
.badge-conifer {
	background: var(--conifer-hover);
	color: #000;
}

.badge-conifer-light {
	background: var(--conifer-light-hover);
	color: #000;
}

/* Wild-Willow Badges */
.badge-wild-willow {
	background: var(--wild-willow-hover);
	color: #000;
}

.badge-wild-willow-light {
	background: var(--wild-willow-light-hover);
	color: #000;
}

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

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

html .btn-outline-buttercup:hover,
html .btn-outline-buttercup.hover {
	background-color: var(--buttercup);
	border-color: var(--buttercup);
	color: #000 !important;
}

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

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

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

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

html .btn-outline-buttercup-light:focus,
html .btn-outline-buttercup-light.focus {
	box-shadow: 0 0 0 3px rgba(246, 212, 102, 0.5);
}

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

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

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

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

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

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

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

html .btn-outline-limeade-light:focus,
html .btn-outline-limeade-light.focus {
	box-shadow: 0 0 0 3px rgba(144, 205, 4, 0.5);
}

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

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

html .btn-outline-conifer:hover,
html .btn-outline-conifer.hover {
	background-color: var(--conifer);
	border-color: var(--conifer);
	color: #000 !important;
}

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

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

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

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

html .btn-outline-conifer-light:focus,
html .btn-outline-conifer-light.focus {
	box-shadow: 0 0 0 3px rgba(197, 223, 137, 0.5);
}

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

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

html .btn-outline-wild-willow:hover,
html .btn-outline-wild-willow.hover {
	background-color: var(--wild-willow);
	border-color: var(--wild-willow);
	color: #000;
}

html .btn-outline-wild-willow:focus,
html .btn-outline-wild-willow.focus {
	box-shadow: 0 0 0 3px rgba(185, 209, 128, 0.5);
}

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

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

html .btn-outline-wild-willow-light:hover,
html .btn-outline-wild-willow-light.hover {
	background-color: var(--wild-willow-light);
	border-color: var(--wild-willow-light);
	color: #000;
}

html .btn-outline-wild-willow-light:focus,
html .btn-outline-wild-willow-light.focus {
	box-shadow: 0 0 0 3px rgba(215, 229, 184, 0.5);
}

html .btn-outline-wild-willow-light.disabled,
html .btn-outline-wild-willow-light:disabled {
	color: var(--wild-willow-light);
	background-color: transparent;
	border-color: var(--wild-willow-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-buttercup {
	color: #000;
	background-color: var(--buttercup);
	border-color: var(--buttercup);
}

.alert-buttercup .alert-link {
	color: #000;
	text-decoration: underline;
}

.alert-buttercup-light {
	color: #000;
	background-color: var(--buttercup-light);
	border-color: var(--buttercup-light);
}

.alert-buttercup-light .alert-link {
	color: #000;
	text-decoration: underline;
}

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

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

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

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

.alert-conifer {
	color: #000;
	background-color: var(--conifer);
	border-color: var(--conifer);
}

.alert-conifer .alert-link {
	color: #000;
	text-decoration: underline;
}

.alert-conifer-light {
	color: #000;
	background-color: var(--conifer-light);
	border-color: var(--conifer-light);
}

.alert-conifer-light .alert-link {
	color: #000;
	text-decoration: underline;
}

.alert-wild-willow {
	color: #000;
	background-color: var(--wild-willow);
	border-color: var(--wild-willow);
}

.alert-wild-willow .alert-link {
	color: #000;
	text-decoration: underline;
}

.alert-wild-willow-light {
	color: #000;
	background-color: var(--wild-willow-light);
	border-color: var(--wild-willow-light);
}

.alert-wild-willow-light .alert-link {
	color: #000;
	text-decoration: underline;
}

/*-----------------------------------------------------------------------------
 * Dark Neutral & Status Color Utilities
 * Colors: obsidian, coal, graphite, slate, ash, pewter, sandstone, ivory, cloud,
 *         emerald, scarlet, cerulean
 *---------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------
 * Buttons — Dark Neutrals
 *---------------------------------------------------------------------------*/

/* Obsidian */
html .btn-obsidian { background-color: var(--obsidian); border-color: var(--obsidian); color: #FFF; }
html .btn-obsidian:hover, html .btn-obsidian.hover { background-color: var(--obsidian-hover); border-color: var(--obsidian-hover); color: #FFF; }
html .btn-obsidian:focus, html .btn-obsidian.focus { box-shadow: 0 0 0 3px rgba(1, 2, 3, 0.5); background-color: var(--obsidian); border-color: var(--obsidian); }
html .btn-obsidian.disabled, html .btn-obsidian:disabled { background-color: var(--obsidian); border-color: var(--obsidian); opacity: 0.65; }

html .btn-obsidian-light { background-color: var(--obsidian-light); border-color: var(--obsidian-light); color: #FFF; }
html .btn-obsidian-light:hover, html .btn-obsidian-light.hover { background-color: var(--obsidian-light-hover); border-color: var(--obsidian-light-hover); color: #FFF; }
html .btn-obsidian-light:focus, html .btn-obsidian-light.focus { box-shadow: 0 0 0 3px rgba(25, 25, 25, 0.5); background-color: var(--obsidian-light); border-color: var(--obsidian-light); }
html .btn-obsidian-light.disabled, html .btn-obsidian-light:disabled { background-color: var(--obsidian-light); border-color: var(--obsidian-light); opacity: 0.65; }

/* Coal */
html .btn-coal { background-color: var(--coal); border-color: var(--coal); color: #FFF; }
html .btn-coal:hover, html .btn-coal.hover { background-color: var(--coal-hover); border-color: var(--coal-hover); color: #FFF; }
html .btn-coal:focus, html .btn-coal.focus { box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.5); background-color: var(--coal); border-color: var(--coal); }
html .btn-coal.disabled, html .btn-coal:disabled { background-color: var(--coal); border-color: var(--coal); opacity: 0.65; }

html .btn-coal-light { background-color: var(--coal-light); border-color: var(--coal-light); color: #FFF; }
html .btn-coal-light:hover, html .btn-coal-light.hover { background-color: var(--coal-light-hover); border-color: var(--coal-light-hover); color: #FFF; }
html .btn-coal-light:focus, html .btn-coal-light.focus { box-shadow: 0 0 0 3px rgba(34, 34, 34, 0.5); background-color: var(--coal-light); border-color: var(--coal-light); }
html .btn-coal-light.disabled, html .btn-coal-light:disabled { background-color: var(--coal-light); border-color: var(--coal-light); opacity: 0.65; }

/* Graphite */
html .btn-graphite { background-color: var(--graphite); border-color: var(--graphite); color: #FFF; }
html .btn-graphite:hover, html .btn-graphite.hover { background-color: var(--graphite-hover); border-color: var(--graphite-hover); color: #FFF; }
html .btn-graphite:focus, html .btn-graphite.focus { box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.5); background-color: var(--graphite); border-color: var(--graphite); }
html .btn-graphite.disabled, html .btn-graphite:disabled { background-color: var(--graphite); border-color: var(--graphite); opacity: 0.65; }

html .btn-graphite-light { background-color: var(--graphite-light); border-color: var(--graphite-light); color: #FFF; }
html .btn-graphite-light:hover, html .btn-graphite-light.hover { background-color: var(--graphite-light-hover); border-color: var(--graphite-light-hover); color: #FFF; }
html .btn-graphite-light:focus, html .btn-graphite-light.focus { box-shadow: 0 0 0 3px rgba(42, 42, 42, 0.5); background-color: var(--graphite-light); border-color: var(--graphite-light); }
html .btn-graphite-light.disabled, html .btn-graphite-light:disabled { background-color: var(--graphite-light); border-color: var(--graphite-light); opacity: 0.65; }

/* Slate */
html .btn-slate { background-color: var(--slate); border-color: var(--slate); color: #FFF; }
html .btn-slate:hover, html .btn-slate.hover { background-color: var(--slate-hover); border-color: var(--slate-hover); color: #FFF; }
html .btn-slate:focus, html .btn-slate.focus { box-shadow: 0 0 0 3px rgba(34, 34, 34, 0.5); background-color: var(--slate); border-color: var(--slate); }
html .btn-slate.disabled, html .btn-slate:disabled { background-color: var(--slate); border-color: var(--slate); opacity: 0.65; }

html .btn-slate-light { background-color: var(--slate-light); border-color: var(--slate-light); color: #FFF; }
html .btn-slate-light:hover, html .btn-slate-light.hover { background-color: var(--slate-light-hover); border-color: var(--slate-light-hover); color: #FFF; }
html .btn-slate-light:focus, html .btn-slate-light.focus { box-shadow: 0 0 0 3px rgba(51, 51, 51, 0.5); background-color: var(--slate-light); border-color: var(--slate-light); }
html .btn-slate-light.disabled, html .btn-slate-light:disabled { background-color: var(--slate-light); border-color: var(--slate-light); opacity: 0.65; }

/* Ash */
html .btn-ash { background-color: var(--ash); border-color: var(--ash); color: #FFF; }
html .btn-ash:hover, html .btn-ash.hover { background-color: var(--ash-hover); border-color: var(--ash-hover); color: #FFF; }
html .btn-ash:focus, html .btn-ash.focus { box-shadow: 0 0 0 3px rgba(42, 42, 42, 0.5); background-color: var(--ash); border-color: var(--ash); }
html .btn-ash.disabled, html .btn-ash:disabled { background-color: var(--ash); border-color: var(--ash); opacity: 0.65; }

html .btn-ash-light { background-color: var(--ash-light); border-color: var(--ash-light); color: #FFF; }
html .btn-ash-light:hover, html .btn-ash-light.hover { background-color: var(--ash-light-hover); border-color: var(--ash-light-hover); color: #FFF; }
html .btn-ash-light:focus, html .btn-ash-light.focus { box-shadow: 0 0 0 3px rgba(61, 61, 61, 0.5); background-color: var(--ash-light); border-color: var(--ash-light); }
html .btn-ash-light.disabled, html .btn-ash-light:disabled { background-color: var(--ash-light); border-color: var(--ash-light); opacity: 0.65; }

/*-----------------------------------------------------------------------------
 * Buttons — Light Neutrals
 *---------------------------------------------------------------------------*/

/* Pewter */
html .btn-pewter { background-color: var(--pewter); border-color: var(--pewter); color: #000; }
html .btn-pewter:hover, html .btn-pewter.hover { background-color: var(--pewter-hover); border-color: var(--pewter-hover); color: #000; }
html .btn-pewter:focus, html .btn-pewter.focus { box-shadow: 0 0 0 3px rgba(153, 153, 153, 0.5); background-color: var(--pewter); border-color: var(--pewter); }
html .btn-pewter.disabled, html .btn-pewter:disabled { background-color: var(--pewter); border-color: var(--pewter); opacity: 0.65; }

html .btn-pewter-light { background-color: var(--pewter-light); border-color: var(--pewter-light); color: #000; }
html .btn-pewter-light:hover, html .btn-pewter-light.hover { background-color: var(--pewter-light-hover); border-color: var(--pewter-light-hover); color: #000; }
html .btn-pewter-light:focus, html .btn-pewter-light.focus { box-shadow: 0 0 0 3px rgba(204, 204, 204, 0.5); background-color: var(--pewter-light); border-color: var(--pewter-light); }
html .btn-pewter-light.disabled, html .btn-pewter-light:disabled { background-color: var(--pewter-light); border-color: var(--pewter-light); opacity: 0.65; }

/* Sandstone */
html .btn-sandstone { background-color: var(--sandstone); border-color: var(--sandstone); color: #000; }
html .btn-sandstone:hover, html .btn-sandstone.hover { background-color: var(--sandstone-hover); border-color: var(--sandstone-hover); color: #000; }
html .btn-sandstone:focus, html .btn-sandstone.focus { box-shadow: 0 0 0 3px rgba(184, 178, 168, 0.5); background-color: var(--sandstone); border-color: var(--sandstone); }
html .btn-sandstone.disabled, html .btn-sandstone:disabled { background-color: var(--sandstone); border-color: var(--sandstone); opacity: 0.65; }

html .btn-sandstone-light { background-color: var(--sandstone-light); border-color: var(--sandstone-light); color: #000; }
html .btn-sandstone-light:hover, html .btn-sandstone-light.hover { background-color: var(--sandstone-light-hover); border-color: var(--sandstone-light-hover); color: #000; }
html .btn-sandstone-light:focus, html .btn-sandstone-light.focus { box-shadow: 0 0 0 3px rgba(217, 213, 207, 0.5); background-color: var(--sandstone-light); border-color: var(--sandstone-light); }
html .btn-sandstone-light.disabled, html .btn-sandstone-light:disabled { background-color: var(--sandstone-light); border-color: var(--sandstone-light); opacity: 0.65; }

/* Ivory */
html .btn-ivory { background-color: var(--ivory); border-color: var(--ivory); color: #000; }
html .btn-ivory:hover, html .btn-ivory.hover { background-color: var(--ivory-hover); border-color: var(--ivory-hover); color: #000; }
html .btn-ivory:focus, html .btn-ivory.focus { box-shadow: 0 0 0 3px rgba(237, 232, 224, 0.5); background-color: var(--ivory); border-color: var(--ivory); }
html .btn-ivory.disabled, html .btn-ivory:disabled { background-color: var(--ivory); border-color: var(--ivory); opacity: 0.65; }

html .btn-ivory-light { background-color: var(--ivory-light); border-color: var(--ivory-light); color: #000; }
html .btn-ivory-light:hover, html .btn-ivory-light.hover { background-color: var(--ivory-light-hover); border-color: var(--ivory-light-hover); color: #000; }
html .btn-ivory-light:focus, html .btn-ivory-light.focus { box-shadow: 0 0 0 3px rgba(250, 248, 245, 0.5); background-color: var(--ivory-light); border-color: var(--ivory-light); }
html .btn-ivory-light.disabled, html .btn-ivory-light:disabled { background-color: var(--ivory-light); border-color: var(--ivory-light); opacity: 0.65; }

/* Cloud */
html .btn-cloud { background-color: var(--cloud); border-color: var(--cloud); color: #000; }
html .btn-cloud:hover, html .btn-cloud.hover { background-color: var(--cloud-hover); border-color: var(--cloud-hover); color: #000; }
html .btn-cloud:focus, html .btn-cloud.focus { box-shadow: 0 0 0 3px rgba(248, 249, 250, 0.5); background-color: var(--cloud); border-color: var(--cloud); }
html .btn-cloud.disabled, html .btn-cloud:disabled { background-color: var(--cloud); border-color: var(--cloud); opacity: 0.65; }

html .btn-cloud-light { background-color: var(--cloud-light); border-color: var(--cloud-light); color: #000; }
html .btn-cloud-light:hover, html .btn-cloud-light.hover { background-color: var(--cloud-light-hover); border-color: var(--cloud-light-hover); color: #000; }
html .btn-cloud-light:focus, html .btn-cloud-light.focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5); background-color: var(--cloud-light); border-color: var(--cloud-light); }
html .btn-cloud-light.disabled, html .btn-cloud-light:disabled { background-color: var(--cloud-light); border-color: var(--cloud-light); opacity: 0.65; }

/*-----------------------------------------------------------------------------
 * Buttons — Status Colors
 *---------------------------------------------------------------------------*/

/* Emerald */
html .btn-emerald { background-color: var(--emerald); border-color: var(--emerald); color: #FFF; }
html .btn-emerald:hover, html .btn-emerald.hover { background-color: var(--emerald-hover); border-color: var(--emerald-hover); color: #FFF; }
html .btn-emerald:focus, html .btn-emerald.focus { box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.5); background-color: var(--emerald); border-color: var(--emerald); }
html .btn-emerald.disabled, html .btn-emerald:disabled { background-color: var(--emerald); border-color: var(--emerald); opacity: 0.65; }

html .btn-emerald-light { background-color: var(--emerald-light); border-color: var(--emerald-light); color: #FFF; }
html .btn-emerald-light:hover, html .btn-emerald-light.hover { background-color: var(--emerald-light-hover); border-color: var(--emerald-light-hover); color: #FFF; }
html .btn-emerald-light:focus, html .btn-emerald-light.focus { box-shadow: 0 0 0 3px rgba(82, 199, 126, 0.5); background-color: var(--emerald-light); border-color: var(--emerald-light); }
html .btn-emerald-light.disabled, html .btn-emerald-light:disabled { background-color: var(--emerald-light); border-color: var(--emerald-light); opacity: 0.65; }

/* Scarlet */
html .btn-scarlet { background-color: var(--scarlet); border-color: var(--scarlet); color: #FFF; }
html .btn-scarlet:hover, html .btn-scarlet.hover { background-color: var(--scarlet-hover); border-color: var(--scarlet-hover); color: #FFF; }
html .btn-scarlet:focus, html .btn-scarlet.focus { box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.5); background-color: var(--scarlet); border-color: var(--scarlet); }
html .btn-scarlet.disabled, html .btn-scarlet:disabled { background-color: var(--scarlet); border-color: var(--scarlet); opacity: 0.65; }

html .btn-scarlet-light { background-color: var(--scarlet-light); border-color: var(--scarlet-light); color: #FFF; }
html .btn-scarlet-light:hover, html .btn-scarlet-light.hover { background-color: var(--scarlet-light-hover); border-color: var(--scarlet-light-hover); color: #FFF; }
html .btn-scarlet-light:focus, html .btn-scarlet-light.focus { box-shadow: 0 0 0 3px rgba(212, 93, 82, 0.5); background-color: var(--scarlet-light); border-color: var(--scarlet-light); }
html .btn-scarlet-light.disabled, html .btn-scarlet-light:disabled { background-color: var(--scarlet-light); border-color: var(--scarlet-light); opacity: 0.65; }

/* Cerulean */
html .btn-cerulean { background-color: var(--cerulean); border-color: var(--cerulean); color: #FFF; }
html .btn-cerulean:hover, html .btn-cerulean.hover { background-color: var(--cerulean-hover); border-color: var(--cerulean-hover); color: #FFF; }
html .btn-cerulean:focus, html .btn-cerulean.focus { box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.5); background-color: var(--cerulean); border-color: var(--cerulean); }
html .btn-cerulean.disabled, html .btn-cerulean:disabled { background-color: var(--cerulean); border-color: var(--cerulean); opacity: 0.65; }

html .btn-cerulean-light { background-color: var(--cerulean-light); border-color: var(--cerulean-light); color: #FFF; }
html .btn-cerulean-light:hover, html .btn-cerulean-light.hover { background-color: var(--cerulean-light-hover); border-color: var(--cerulean-light-hover); color: #FFF; }
html .btn-cerulean-light:focus, html .btn-cerulean-light.focus { box-shadow: 0 0 0 3px rgba(93, 173, 226, 0.5); background-color: var(--cerulean-light); border-color: var(--cerulean-light); }
html .btn-cerulean-light.disabled, html .btn-cerulean-light:disabled { background-color: var(--cerulean-light); border-color: var(--cerulean-light); opacity: 0.65; }

/*-----------------------------------------------------------------------------
 * Text Colors — Dark Neutrals
 *---------------------------------------------------------------------------*/

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

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

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

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

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

/*-----------------------------------------------------------------------------
 * Text Colors — Light Neutrals
 *---------------------------------------------------------------------------*/

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

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

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

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

/*-----------------------------------------------------------------------------
 * Text Colors — Status
 *---------------------------------------------------------------------------*/

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

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

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

/*-----------------------------------------------------------------------------
 * Background Colors — Neutrals & Status
 *---------------------------------------------------------------------------*/

html .bg-obsidian, html .background-color-obsidian { background-color: var(--obsidian) !important; }
html .bg-obsidian-light, html .background-color-obsidian-light { background-color: var(--obsidian-light) !important; }
html .bg-coal, html .background-color-coal { background-color: var(--coal) !important; }
html .bg-coal-light, html .background-color-coal-light { background-color: var(--coal-light) !important; }
html .bg-graphite, html .background-color-graphite { background-color: var(--graphite) !important; }
html .bg-graphite-light, html .background-color-graphite-light { background-color: var(--graphite-light) !important; }
html .bg-slate, html .background-color-slate { background-color: var(--slate) !important; }
html .bg-slate-light, html .background-color-slate-light { background-color: var(--slate-light) !important; }
html .bg-ash, html .background-color-ash { background-color: var(--ash) !important; }
html .bg-ash-light, html .background-color-ash-light { background-color: var(--ash-light) !important; }
html .bg-pewter, html .background-color-pewter { background-color: var(--pewter) !important; }
html .bg-pewter-light, html .background-color-pewter-light { background-color: var(--pewter-light) !important; }
html .bg-sandstone, html .background-color-sandstone { background-color: var(--sandstone) !important; }
html .bg-sandstone-light, html .background-color-sandstone-light { background-color: var(--sandstone-light) !important; }
html .bg-ivory, html .background-color-ivory { background-color: var(--ivory) !important; }
html .bg-ivory-light, html .background-color-ivory-light { background-color: var(--ivory-light) !important; }
html .bg-cloud, html .background-color-cloud { background-color: var(--cloud) !important; }
html .bg-cloud-light, html .background-color-cloud-light { background-color: var(--cloud-light) !important; }
html .bg-emerald, html .background-color-emerald { background-color: var(--emerald) !important; }
html .bg-emerald-light, html .background-color-emerald-light { background-color: var(--emerald-light) !important; }
html .bg-scarlet, html .background-color-scarlet { background-color: var(--scarlet) !important; }
html .bg-scarlet-light, html .background-color-scarlet-light { background-color: var(--scarlet-light) !important; }
html .bg-cerulean, html .background-color-cerulean { background-color: var(--cerulean) !important; }
html .bg-cerulean-light, html .background-color-cerulean-light { background-color: var(--cerulean-light) !important; }

/*-----------------------------------------------------------------------------
 * Badges — Neutrals & Status
 *---------------------------------------------------------------------------*/

.badge-obsidian { background: var(--obsidian-hover); color: #FFF; }
.badge-obsidian-light { background: var(--obsidian-light-hover); color: #FFF; }
.badge-coal { background: var(--coal-hover); color: #FFF; }
.badge-coal-light { background: var(--coal-light-hover); color: #FFF; }
.badge-graphite { background: var(--graphite-hover); color: #FFF; }
.badge-graphite-light { background: var(--graphite-light-hover); color: #FFF; }
.badge-slate { background: var(--slate-hover); color: #FFF; }
.badge-slate-light { background: var(--slate-light-hover); color: #FFF; }
.badge-ash { background: var(--ash-hover); color: #FFF; }
.badge-ash-light { background: var(--ash-light-hover); color: #FFF; }
.badge-pewter { background: var(--pewter-hover); color: #000; }
.badge-pewter-light { background: var(--pewter-light-hover); color: #000; }
.badge-sandstone { background: var(--sandstone-hover); color: #000; }
.badge-sandstone-light { background: var(--sandstone-light-hover); color: #000; }
.badge-ivory { background: var(--ivory-hover); color: #000; }
.badge-ivory-light { background: var(--ivory-light-hover); color: #000; }
.badge-cloud { background: var(--cloud-hover); color: #000; }
.badge-cloud-light { background: var(--cloud-light-hover); color: #000; }
.badge-emerald { background: var(--emerald-hover); color: #FFF; }
.badge-emerald-light { background: var(--emerald-light-hover); color: #FFF; }
.badge-scarlet { background: var(--scarlet-hover); color: #FFF; }
.badge-scarlet-light { background: var(--scarlet-light-hover); color: #FFF; }
.badge-cerulean { background: var(--cerulean-hover); color: #FFF; }
.badge-cerulean-light { background: var(--cerulean-light-hover); color: #FFF; }

/*-----------------------------------------------------------------------------
 * Outline Buttons — Neutrals & Status
 *---------------------------------------------------------------------------*/

html .btn-outline-obsidian { color: var(--obsidian); border-color: var(--obsidian); background-color: transparent; border-width: 2px; padding: 0.483rem 0.933rem; }
html .btn-outline-obsidian:hover, html .btn-outline-obsidian.hover { background-color: var(--obsidian); border-color: var(--obsidian); color: #FFF; }
html .btn-outline-obsidian:focus, html .btn-outline-obsidian.focus { box-shadow: 0 0 0 3px rgba(1, 2, 3, 0.5); }
html .btn-outline-obsidian.disabled, html .btn-outline-obsidian:disabled { color: var(--obsidian); background-color: transparent; border-color: var(--obsidian); opacity: 0.65; }

html .btn-outline-coal { color: var(--coal); border-color: var(--coal); background-color: transparent; border-width: 2px; padding: 0.483rem 0.933rem; }
html .btn-outline-coal:hover, html .btn-outline-coal.hover { background-color: var(--coal); border-color: var(--coal); color: #FFF; }
html .btn-outline-coal:focus, html .btn-outline-coal.focus { box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.5); }
html .btn-outline-coal.disabled, html .btn-outline-coal:disabled { color: var(--coal); background-color: transparent; border-color: var(--coal); opacity: 0.65; }

html .btn-outline-graphite { color: var(--graphite); border-color: var(--graphite); background-color: transparent; border-width: 2px; padding: 0.483rem 0.933rem; }
html .btn-outline-graphite:hover, html .btn-outline-graphite.hover { background-color: var(--graphite); border-color: var(--graphite); color: #FFF; }
html .btn-outline-graphite:focus, html .btn-outline-graphite.focus { box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.5); }
html .btn-outline-graphite.disabled, html .btn-outline-graphite:disabled { color: var(--graphite); background-color: transparent; border-color: var(--graphite); opacity: 0.65; }

html .btn-outline-slate { color: var(--slate); border-color: var(--slate); background-color: transparent; border-width: 2px; padding: 0.483rem 0.933rem; }
html .btn-outline-slate:hover, html .btn-outline-slate.hover { background-color: var(--slate); border-color: var(--slate); color: #FFF; }
html .btn-outline-slate:focus, html .btn-outline-slate.focus { box-shadow: 0 0 0 3px rgba(34, 34, 34, 0.5); }
html .btn-outline-slate.disabled, html .btn-outline-slate:disabled { color: var(--slate); background-color: transparent; border-color: var(--slate); opacity: 0.65; }

html .btn-outline-ash { color: var(--ash); border-color: var(--ash); background-color: transparent; border-width: 2px; padding: 0.483rem 0.933rem; }
html .btn-outline-ash:hover, html .btn-outline-ash.hover { background-color: var(--ash); border-color: var(--ash); color: #FFF; }
html .btn-outline-ash:focus, html .btn-outline-ash.focus { box-shadow: 0 0 0 3px rgba(42, 42, 42, 0.5); }
html .btn-outline-ash.disabled, html .btn-outline-ash:disabled { color: var(--ash); background-color: transparent; border-color: var(--ash); opacity: 0.65; }

html .btn-outline-pewter { color: var(--pewter); border-color: var(--pewter); background-color: transparent; border-width: 2px; padding: 0.483rem 0.933rem; }
html .btn-outline-pewter:hover, html .btn-outline-pewter.hover { background-color: var(--pewter); border-color: var(--pewter); color: #000; }
html .btn-outline-pewter:focus, html .btn-outline-pewter.focus { box-shadow: 0 0 0 3px rgba(153, 153, 153, 0.5); }
html .btn-outline-pewter.disabled, html .btn-outline-pewter:disabled { color: var(--pewter); background-color: transparent; border-color: var(--pewter); opacity: 0.65; }

html .btn-outline-sandstone { color: var(--sandstone); border-color: var(--sandstone); background-color: transparent; border-width: 2px; padding: 0.483rem 0.933rem; }
html .btn-outline-sandstone:hover, html .btn-outline-sandstone.hover { background-color: var(--sandstone); border-color: var(--sandstone); color: #000; }
html .btn-outline-sandstone:focus, html .btn-outline-sandstone.focus { box-shadow: 0 0 0 3px rgba(184, 178, 168, 0.5); }
html .btn-outline-sandstone.disabled, html .btn-outline-sandstone:disabled { color: var(--sandstone); background-color: transparent; border-color: var(--sandstone); opacity: 0.65; }

html .btn-outline-ivory { color: var(--ivory); border-color: var(--ivory); background-color: transparent; border-width: 2px; padding: 0.483rem 0.933rem; }
html .btn-outline-ivory:hover, html .btn-outline-ivory.hover { background-color: var(--ivory); border-color: var(--ivory); color: #000; }
html .btn-outline-ivory:focus, html .btn-outline-ivory.focus { box-shadow: 0 0 0 3px rgba(237, 232, 224, 0.5); }
html .btn-outline-ivory.disabled, html .btn-outline-ivory:disabled { color: var(--ivory); background-color: transparent; border-color: var(--ivory); opacity: 0.65; }

html .btn-outline-cloud { color: var(--cloud); border-color: var(--cloud); background-color: transparent; border-width: 2px; padding: 0.483rem 0.933rem; }
html .btn-outline-cloud:hover, html .btn-outline-cloud.hover { background-color: var(--cloud); border-color: var(--cloud); color: #000; }
html .btn-outline-cloud:focus, html .btn-outline-cloud.focus { box-shadow: 0 0 0 3px rgba(248, 249, 250, 0.5); }
html .btn-outline-cloud.disabled, html .btn-outline-cloud:disabled { color: var(--cloud); background-color: transparent; border-color: var(--cloud); opacity: 0.65; }

html .btn-outline-emerald { color: var(--emerald); border-color: var(--emerald); background-color: transparent; border-width: 2px; padding: 0.483rem 0.933rem; }
html .btn-outline-emerald:hover, html .btn-outline-emerald.hover { background-color: var(--emerald); border-color: var(--emerald); color: #FFF; }
html .btn-outline-emerald:focus, html .btn-outline-emerald.focus { box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.5); }
html .btn-outline-emerald.disabled, html .btn-outline-emerald:disabled { color: var(--emerald); background-color: transparent; border-color: var(--emerald); opacity: 0.65; }

html .btn-outline-scarlet { color: var(--scarlet); border-color: var(--scarlet); background-color: transparent; border-width: 2px; padding: 0.483rem 0.933rem; }
html .btn-outline-scarlet:hover, html .btn-outline-scarlet.hover { background-color: var(--scarlet); border-color: var(--scarlet); color: #FFF; }
html .btn-outline-scarlet:focus, html .btn-outline-scarlet.focus { box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.5); }
html .btn-outline-scarlet.disabled, html .btn-outline-scarlet:disabled { color: var(--scarlet); background-color: transparent; border-color: var(--scarlet); opacity: 0.65; }

html .btn-outline-cerulean { color: var(--cerulean); border-color: var(--cerulean); background-color: transparent; border-width: 2px; padding: 0.483rem 0.933rem; }
html .btn-outline-cerulean:hover, html .btn-outline-cerulean.hover { background-color: var(--cerulean); border-color: var(--cerulean); color: #FFF; }
html .btn-outline-cerulean:focus, html .btn-outline-cerulean.focus { box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.5); }
html .btn-outline-cerulean.disabled, html .btn-outline-cerulean:disabled { color: var(--cerulean); background-color: transparent; border-color: var(--cerulean); opacity: 0.65; }

/*-----------------------------------------------------------------------------
 * Alerts — Neutrals & Status
 *---------------------------------------------------------------------------*/

.alert-obsidian { color: #FFF; background-color: var(--obsidian); border-color: var(--obsidian); }
.alert-obsidian .alert-link { color: #FFF; text-decoration: underline; }
.alert-coal { color: #FFF; background-color: var(--coal); border-color: var(--coal); }
.alert-coal .alert-link { color: #FFF; text-decoration: underline; }
.alert-graphite { color: #FFF; background-color: var(--graphite); border-color: var(--graphite); }
.alert-graphite .alert-link { color: #FFF; text-decoration: underline; }
.alert-slate { color: #FFF; background-color: var(--slate); border-color: var(--slate); }
.alert-slate .alert-link { color: #FFF; text-decoration: underline; }
.alert-ash { color: #FFF; background-color: var(--ash); border-color: var(--ash); }
.alert-ash .alert-link { color: #FFF; text-decoration: underline; }
.alert-pewter { color: #000; background-color: var(--pewter); border-color: var(--pewter); }
.alert-pewter .alert-link { color: #000; text-decoration: underline; }
.alert-sandstone { color: #000; background-color: var(--sandstone); border-color: var(--sandstone); }
.alert-sandstone .alert-link { color: #000; text-decoration: underline; }
.alert-ivory { color: #000; background-color: var(--ivory); border-color: var(--ivory); }
.alert-ivory .alert-link { color: #000; text-decoration: underline; }
.alert-cloud { color: #000; background-color: var(--cloud); border-color: var(--cloud); }
.alert-cloud .alert-link { color: #000; text-decoration: underline; }
.alert-emerald { color: #FFF; background-color: var(--emerald); border-color: var(--emerald); }
.alert-emerald .alert-link { color: #FFF; text-decoration: underline; }
.alert-emerald-light { color: #FFF; background-color: var(--emerald-light); border-color: var(--emerald-light); }
.alert-emerald-light .alert-link { color: #FFF; text-decoration: underline; }
.alert-scarlet { color: #FFF; background-color: var(--scarlet); border-color: var(--scarlet); }
.alert-scarlet .alert-link { color: #FFF; text-decoration: underline; }
.alert-scarlet-light { color: #FFF; background-color: var(--scarlet-light); border-color: var(--scarlet-light); }
.alert-scarlet-light .alert-link { color: #FFF; text-decoration: underline; }
.alert-cerulean { color: #FFF; background-color: var(--cerulean); border-color: var(--cerulean); }
.alert-cerulean .alert-link { color: #FFF; text-decoration: underline; }
.alert-cerulean-light { color: #FFF; background-color: var(--cerulean-light); border-color: var(--cerulean-light); }
.alert-cerulean-light .alert-link { color: #FFF; text-decoration: underline; }