/* Глобальные дефолты — чтобы линтер не ругался и были фолбэки */
:root {
    --cat-fg: #0d6efd; /* цвет текста/иконки по умолчанию */
    --cat-bg: #e9f2ff; /* мягкий фон */
    --cat-bd: rgba(0, 0, 0, .06); /* цвет рамки */
}

/* Бейдж категории */
.badge-category {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .55rem;
    border-radius: 999px;
    font-weight: 600;
    line-height: 1;

    /* переменные с фолбэками */
    color: var(--cat-fg, #0d6efd);
    background: var(--cat-bg, #e9f2ff);

    /* без шортхенда, чтобы не подчеркивало var() */
    border: 1px solid;
    border-color: var(--cat-bd, rgb(0 0 0 / 0.06));

    white-space: nowrap;
}

.badge-category .icon {
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
}

/* Тёмная тема */
[data-bs-theme="dark"] .badge-category {
    --cat-bd: rgba(255, 255, 255, .10);
    background: color-mix(in oklab, var(--cat-fg, #6f42c1) 12%, #111 88%);
    border-color: var(--cat-bd);
}

/* Палитра категорий: переопределяем переменные */
.badge-category--youtube {
    --cat-fg: #dc3545;
    --cat-bg: #f8d7da;
    --cat-bd: #f1aeb5;
}

.badge-category--tiktok {
    --cat-fg: #212529;
    --cat-bg: #e2e3e5;
    --cat-bd: #c4c8cb;
}

.badge-category--instagram {
    --cat-fg: #ffc107;
    --cat-bg: #fff3cd;
    --cat-bd: #ffe69c;
}

.badge-category--facebook {
    --cat-fg: #0d6efd;
    --cat-bg: #cfe2ff;
    --cat-bd: #9ec5fe;
}

.badge-category--twitter {
    --cat-fg: #0dcaf0;
    --cat-bg: #cff4fc;
    --cat-bd: #9eeaf9;
}

.badge-category--telegram {
    --cat-fg: #0dcaf0;
    --cat-bg: #cff4fc;
    --cat-bd: #9eeaf9;
}

.badge-category--whatsapp {
    --cat-fg: #198754;
    --cat-bg: #d1e7dd;
    --cat-bd: #a3cfbb;
}

.badge-category--linkedin {
    --cat-fg: #0d6efd;
    --cat-bg: #cfe2ff;
    --cat-bd: #9ec5fe;
}

.badge-category--pinterest {
    --cat-fg: #dc3545;
    --cat-bg: #f8d7da;
    --cat-bd: #f1aeb5;
}

/* DESIGN — розово-фиолетовый */
.badge-category--design {
    --cat-fg: #6f42c1;
    --cat-bg: #efe2ff;
    --cat-bd: #dcc3ff;
}

/* Дефолт */
.badge-category--default {
    --cat-fg: #212529;
    --cat-bg: #f8f9fa;
    --cat-bd: #dee2e6;
}