/**
 * Paleta neutra + puente legacy → tokens semánticos (HIG).
 * El acento activo vive en styles/themes/accent-*.css
 */
:root {
	--color_variable_1: #007AFF;
	--color_variable_2: #007AFF;
	--color_variable_3: color-mix(in srgb, #007AFF 72%, #ffffff);
	--color_variable_4: color-mix(in srgb, #007AFF 48%, #ffffff);
}

.color_trans {
	backdrop-filter: blur(30px);
	background-color: rgba(0, 0, 0, 0.7);
}

.color_black_1 { background-color: #12171a; }
.color_black_2 { background-color: #263238; }
.color_black_3 { background-color: #37474f; }
.color_black_4 { background-color: #455a64; }
.color_black_5 { background-color: #546e7a; }

.color_white_1 { background-color: #90a4ae; }
.color_white_2 { background-color: #b0bec5; }
.color_white_3 { background-color: #cfd8dc; }
.color_white_4 { background-color: #eceff1; }
.color_white_4_5 { background-color: #f5f7f8; }
.color_white_5 { background-color: #fff; }

.color_black_txt { color: #000; }
.color_grey_txt { color: #232e33; }
.color_grey_txt_1 { color: #758992; }
.color_grey_txt_2 { color: #546e7a; }
.color_white_txt { color: #ffffff; }

/* Puente: clases legacy → variables de acento */
.color_variable_1 { background-color: var(--color_variable_1); }
.color_variable_2 { background-color: var(--color_variable_2); }
.color_variable_3 { background-color: var(--color_variable_3); }
.color_variable_4 { background-color: var(--color_variable_4); }

.color_variable_txt_1 { color: var(--color_variable_1); }
.color_variable_txt_2 { color: var(--color_variable_2); }
.color_variable_txt_3 { color: var(--color_variable_3); }
.color_variable_txt_4 { color: var(--color_variable_4); }

.special_text_1 {
	background-color: #fff;
	color: var(--color_variable_1);
	padding: 0 5px;
	font-weight: 900;
}

.keyword {
	background-color: var(--color_variable_1);
}

.gradientCardColor {
	background: linear-gradient(
		to bottom right,
		var(--color_variable_1) 0%,
		var(--color_variable_2) 40%,
		color-mix(in srgb, var(--color_variable_1) 70%, #000) 100%
	);
	background-attachment: fixed;
}

.variableBadge {
	background: linear-gradient(
		to bottom right,
		var(--color_variable_2) 0%,
		color-mix(in srgb, var(--color_variable_1) 75%, #000) 100%
	);
	color: color-mix(in srgb, var(--color_variable_1) 80%, #000);
}

::selection,
::-moz-selection {
	color: #ffffff;
	background: color-mix(in srgb, var(--color_variable_1) 88%, #000);
}

[type="checkbox"].filled-in:checked + span:not(.lever)::after {
	border: 2px solid var(--color_variable_2) !important;
	background-color: var(--color_variable_2) !important;
}

.noUi-base,
.noUi-connect {
	background-color: var(--color_variable_4) !important;
}

.noUi-tooltip {
	background-color: var(--color_variable_1) !important;
	color: #ffffff !important;
}

.noUi-tooltip::after {
	border-bottom: 20px solid var(--color_variable_1);
}