/* ceramic_add.css — missing utility classes
 *
 * Generated 2026-04-20 для 25 ceramic+opacity комбинаций, использованных
 * в blade но отсутствующих в _ceramic.css (pre-compiled). Quick fix пока
 * не переведём ceramic на JIT (вариант B в project_ceramic_jit_refactor.md).
 *
 * При добавлении новой комбинации: либо регенерировать через скрипт
 * (scripts/gen-ceramic-missing.sh — TODO), либо вручную дописать по
 * образцу.
 */

.dark\:hover\:bg-ceramic-white\/\[0\.02\]:is(.dark *):hover {
    background-color: color-mix(in srgb, var(--ceramic-white) calc(0.02 * 100%), transparent);
}

.bg-ceramic-gray-1300\/95 {
    background-color: color-mix(in srgb, var(--ceramic-gray-1300) 95%, transparent);
}

.bg-ceramic-gray-400\/30 {
    background-color: color-mix(in srgb, var(--ceramic-gray-400) 30%, transparent);
}

.bg-ceramic-gray-50\/50 {
    background-color: color-mix(in srgb, var(--ceramic-gray-50) 50%, transparent);
}

.bg-ceramic-green-500\/5 {
    background-color: color-mix(in srgb, var(--ceramic-green-500) 5%, transparent);
}

.bg-ceramic-green-500\/8 {
    background-color: color-mix(in srgb, var(--ceramic-green-500) 8%, transparent);
}

.bg-ceramic-red-500\/5 {
    background-color: color-mix(in srgb, var(--ceramic-red-500) 5%, transparent);
}

.bg-ceramic-red-500\/8 {
    background-color: color-mix(in srgb, var(--ceramic-red-500) 8%, transparent);
}

.border-ceramic-gray-700\/12 {
    border-color: color-mix(in srgb, var(--ceramic-gray-700) 12%, transparent);
}

.checked\:ring-ceramic-green-600\/30:checked {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-green-600) 30%, transparent);
}

.dark\:bg-ceramic-gray-1300\/30:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-gray-1300) 30%, transparent);
}

.dark\:bg-ceramic-gray-1500\/60:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-gray-1500) 60%, transparent);
}

.dark\:bg-ceramic-gray-1500\/80:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-gray-1500) 80%, transparent);
}

.dark\:bg-ceramic-green-900\/30:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-green-900) 30%, transparent);
}

.dark\:bg-ceramic-orange-1500\/10:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-orange-1500) 10%, transparent);
}

.dark\:bg-ceramic-red-1500\/20:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-red-1500) 20%, transparent);
}

.dark\:hover\:bg-ceramic-gray-1500\/50:is(.dark *):hover {
    background-color: color-mix(in srgb, var(--ceramic-gray-1500) 50%, transparent);
}

.dark\:ring-ceramic-gray-800\/50:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-800) 50%, transparent);
}

.focus\:ring-ceramic-blue-500\/40:focus {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-blue-500) 40%, transparent);
}

.hover\:bg-ceramic-gray-700\/4:hover {
    background-color: color-mix(in srgb, var(--ceramic-gray-700) 4%, transparent);
}

.hover\:bg-ceramic-red-500\/5:hover {
    background-color: color-mix(in srgb, var(--ceramic-red-500) 5%, transparent);
}

.ring-ceramic-gray-400\/30 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-400) 30%, transparent);
}

.ring-ceramic-green-500\/12 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-green-500) 12%, transparent);
}

.ring-ceramic-red-500\/12 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-red-500) 12%, transparent);
}

.text-ceramic-green-500\/30 {
    color: color-mix(in srgb, var(--ceramic-green-500) 30%, transparent);
}

.text-ceramic-green-500\/40 {
    color: color-mix(in srgb, var(--ceramic-green-500) 40%, transparent);
}