/* 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-only vars fallback для light mode.
 *
 * _ceramic.css оригинально спроектирован как Raycast dark-theme. 28 vars
 * определены только в html.dark {} блоке — любое их использование
 * (backdrop-blur, card-gradient, glow-*, shadow-glass-*, mask-fade-*)
 * ломается в light mode: var(--X) → invalid → ignored.
 *
 * Дублируем все 28 в :root как fallback. html.dark всё равно переопределяет
 * через более specific selector (те же значения — pure safety).
 *
 * Audit 2026-04-21 в рамках EXFA theme migration (см. memory
 * project_ceramic_jit_refactor.md). */
:root {
    /* Card gradients */
    --bg-card-gradient: linear-gradient(137deg, rgba(17, 18, 20, 0.75) 4.87%, rgba(12, 13, 15, 0.9) 75.88%);
    --bg-card-gradient-solid: linear-gradient(137deg, #111214 4.87%, #0c0d0f 75.88%);
    --bg-footer-gradient: linear-gradient(180deg, rgba(7, 8, 10, 0.8) 0.1%, #07080a 32.45%);

    /* Blur levels (Raycast 6 tiers) */
    --blur-xs: blur(2px);
    --blur-sm: blur(10px);
    --blur-md: blur(16px);
    --blur-lg: blur(24px);
    --blur-xl: blur(36px);
    --blur-2xl: blur(48px);

    /* Button secondary (glass) */
    --button-secondary-bg: rgba(255, 255, 255, 0.08);

    /* Glow halos */
    --glow-brand: 0 0 20px 5px rgba(224, 125, 0, 0.08);
    --glow-error: 0 0 20px 0 rgba(229, 99, 99, 0.10);
    --glow-info: 0 0 16px -7px rgba(125, 211, 252, 0.10);
    --glow-success: 0 0 20px 0 rgba(60, 204, 126, 0.10);
    --glow-warm: 0 0 20px 5px rgba(215, 201, 175, 0.05);

    /* Decorative gradients */
    --gradient-depth: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 4.5%, rgba(255, 255, 255, 0.03) 99.51%);
    --gradient-rainbow: conic-gradient(from 137deg at 50% 50%, #0294fe -55.68deg, #ff2136 113.23deg, #9b4dff 195deg, #0294fe 304.32deg, #ff2136 473.23deg);
    --gradient-shine: linear-gradient(92.74deg, rgba(255, 255, 255, 0) 4.57%, rgba(255, 255, 255, 0.06) 65.86%, rgba(255, 255, 255, 0) 95.43%);
    --gradient-subtle-color: radial-gradient(85.77% 49.97% at 51% 5.12%, rgba(255, 150, 150, 0.11) 0, rgba(222, 226, 255, 0.08) 45.83%, rgba(241, 242, 255, 0.02) 100%);

    /* Mask fades */
    --mask-fade-bottom: linear-gradient(180deg, #d9d9d9 60%, rgba(217, 217, 217, 0) 90%);
    --mask-fade-radial: radial-gradient(circle at top left, #fff 29.33%, rgba(255, 255, 255, 0) 60%);
    --mask-fade-right: linear-gradient(90deg, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0.1));

    /* Glass shadows */
    --shadow-glass-halo: 0 0 40px 20px rgba(255, 255, 255, 0.03);
    --shadow-glass-inset: inset 0 0.5px 0 0 hsla(0, 0%, 100%, 0.3);
    --shadow-glass-shine: inset 0 0.5px 0 0 hsla(0, 0%, 100%, 0.3), 0 4px 12px -2px rgba(0, 0, 0, 0.3);
    --shadow-glass-subtle: 0 0 2px 0 rgba(255, 255, 255, 0.19);

    /* Stripe blocks */
    --stripe-block-background: var(--ceramic-gray-1400);
    --stripe-block-border: var(--ceramic-gray-700);
}

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