/*
 * Extra theme colors: blue and pink.
 *
 * The theme only generates utility classes for its theme colors
 * (primary, secondary, success, info, warning, danger, purple, light, dark),
 * while the layout 'colors' rotation also uses 'blue' and 'pink'. This file
 * adds the standard Bootstrap utility set for those two palette colors
 * (--theme-blue / --theme-pink), following the exact patterns of app.css.
 */

:root,
[data-bs-theme=light] {
	--theme-blue-rgb: 74, 129, 212;
	--theme-pink-rgb: 246, 114, 167;
	--theme-blue-text-emphasis: #3f6eb4;
	--theme-pink-text-emphasis: #d1618e;
	--theme-blue-bg-subtle: #e4ecf9;
	--theme-pink-bg-subtle: #feeaf2;
	--theme-blue-border-subtle: #b7cdee;
	--theme-pink-border-subtle: #fbc7dc;
}

[data-bs-theme=dark] {
	--theme-blue-text-emphasis: #92b3e5;
	--theme-pink-text-emphasis: #faaaca;
	--theme-blue-bg-subtle: rgba(74, 129, 212, 0.2);
	--theme-pink-bg-subtle: rgba(246, 114, 167, 0.2);
	--theme-blue-border-subtle: #2c4d7f;
	--theme-pink-border-subtle: #944464;
}

.text-bg-blue {
	color: #fff !important;
	background-color: RGBA(var(--theme-blue-rgb), var(--theme-bg-opacity, 1)) !important;
}

.text-bg-pink {
	color: #fff !important;
	background-color: RGBA(var(--theme-pink-rgb), var(--theme-bg-opacity, 1)) !important;
}

.link-blue {
	color: RGBA(var(--theme-blue-rgb), var(--theme-link-opacity, 1)) !important;
	text-decoration-color: RGBA(var(--theme-blue-rgb), var(--theme-link-underline-opacity, 1)) !important;
}
.link-blue:hover, .link-blue:focus {
	color: RGBA(63, 110, 180, var(--theme-link-opacity, 1)) !important;
	text-decoration-color: RGBA(63, 110, 180, var(--theme-link-underline-opacity, 1)) !important;
}

.link-pink {
	color: RGBA(var(--theme-pink-rgb), var(--theme-link-opacity, 1)) !important;
	text-decoration-color: RGBA(var(--theme-pink-rgb), var(--theme-link-underline-opacity, 1)) !important;
}
.link-pink:hover, .link-pink:focus {
	color: RGBA(209, 97, 142, var(--theme-link-opacity, 1)) !important;
	text-decoration-color: RGBA(209, 97, 142, var(--theme-link-underline-opacity, 1)) !important;
}

.border-blue {
	--theme-border-opacity: 1;
	border-color: rgba(var(--theme-blue-rgb), var(--theme-border-opacity)) !important;
}

.border-pink {
	--theme-border-opacity: 1;
	border-color: rgba(var(--theme-pink-rgb), var(--theme-border-opacity)) !important;
}

.border-blue-subtle {
	border-color: var(--theme-blue-border-subtle) !important;
}

.border-pink-subtle {
	border-color: var(--theme-pink-border-subtle) !important;
}

.text-blue {
	--theme-text-opacity: 1;
	color: rgba(var(--theme-blue-rgb), var(--theme-text-opacity)) !important;
}

.text-pink {
	--theme-text-opacity: 1;
	color: rgba(var(--theme-pink-rgb), var(--theme-text-opacity)) !important;
}

.text-blue-emphasis {
	color: var(--theme-blue-text-emphasis) !important;
}

.text-pink-emphasis {
	color: var(--theme-pink-text-emphasis) !important;
}

.bg-blue {
	--theme-bg-opacity: 1;
	background-color: rgba(var(--theme-blue-rgb), var(--theme-bg-opacity)) !important;
}

.bg-pink {
	--theme-bg-opacity: 1;
	background-color: rgba(var(--theme-pink-rgb), var(--theme-bg-opacity)) !important;
}

.bg-blue-subtle {
	background-color: var(--theme-blue-bg-subtle) !important;
}

.bg-pink-subtle {
	background-color: var(--theme-pink-bg-subtle) !important;
}