/* Shared PC badge contract. Consumers opt in with both the class and kind. */
@layer kp-badges {
:where(.kp-badge[data-badge-kind]) {
    --kp-badge-bg: #f1f5f9 !important;
    --kp-badge-fg: #475569 !important;
    --kp-badge-border: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    gap: 4px !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 24px !important;
    padding: 3px 8px !important;
    border: 1px solid var(--kp-badge-border) !important;
    border-radius: 6px !important;
    background: var(--kp-badge-bg) !important;
    color: var(--kp-badge-fg) !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 16px !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-decoration-thickness: from-font !important;
    text-shadow: none !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    box-shadow: none !important;
    filter: none !important;
}

:where(.kp-badge[data-badge-kind][data-badge-tone="success"]) {
    --kp-badge-bg: #dcfce7 !important;
    --kp-badge-fg: #166534 !important;
    --kp-badge-border: transparent !important;
}

:where(.kp-badge[data-badge-kind][data-badge-tone="warning"]) {
    --kp-badge-bg: #fef3c7 !important;
    --kp-badge-fg: #92400e !important;
    --kp-badge-border: transparent !important;
}

:where(.kp-badge[data-badge-kind][data-badge-tone="info"]) {
    --kp-badge-bg: #eff6ff !important;
    --kp-badge-fg: #1d4ed8 !important;
    --kp-badge-border: transparent !important;
}

:where(.kp-badge[data-badge-kind][data-badge-tone="error"]) {
    --kp-badge-bg: #fee2e2 !important;
    --kp-badge-fg: #b91c1c !important;
    --kp-badge-border: transparent !important;
}

:where(.kp-badge[data-badge-kind][data-badge-tone="neutral"]) {
    --kp-badge-bg: #f1f5f9 !important;
    --kp-badge-fg: #475569 !important;
    --kp-badge-border: transparent !important;
}

/* Classification keeps its domain color while sharing the status badge shape. */
:where(.kp-badge[data-badge-kind="category"],
       .kp-badge[data-badge-kind="provider"],
       .kp-badge[data-badge-kind="role"],
       .kp-badge[data-badge-kind="grade"]) {
    --kp-badge-bg: var(--kp-badge-classification-bg, #f1f5f9) !important;
    --kp-badge-fg: var(--kp-badge-classification-fg, #475569) !important;
    --kp-badge-border: transparent !important;
    border-radius: 6px !important;
}

:where(.kp-badge[data-badge-kind="category"][data-badge-value="affiliate"],
       .kp-badge[data-badge-kind="category"][data-badge-value="event"],
       .kp-badge[data-badge-kind="category"][data-badge-value="new"],
       .kp-badge[data-badge-kind="category"][data-badge-value="content"]) {
    --kp-badge-classification-bg: #fce7f3 !important;
    --kp-badge-classification-fg: #9d174d !important;
}

:where(.kp-badge[data-badge-kind="category"][data-badge-value="group"]) {
    --kp-badge-classification-bg: #f3e8ff !important;
    --kp-badge-classification-fg: #6b21a8 !important;
}

:where(.kp-badge[data-badge-kind="category"][data-badge-value="solo"]) {
    --kp-badge-classification-bg: #e0e7ff !important;
    --kp-badge-classification-fg: #3730a3 !important;
}

:where(.kp-badge[data-badge-kind="category"][data-badge-value="important"]) {
    --kp-badge-classification-bg: #fee2e2 !important;
    --kp-badge-classification-fg: #b91c1c !important;
}

:where(.kp-badge[data-badge-kind="category"][data-badge-value="notice"],
       .kp-badge[data-badge-kind="category"][data-badge-value="normal"],
       .kp-badge[data-badge-kind="category"][data-badge-value="update"]) {
    --kp-badge-classification-bg: #eff6ff !important;
    --kp-badge-classification-fg: #1d4ed8 !important;
}

:where(.kp-badge[data-badge-kind="category"][data-badge-value="maintenance"]) {
    --kp-badge-classification-bg: #f1f5f9 !important;
    --kp-badge-classification-fg: #475569 !important;
}

:where(.kp-badge[data-badge-kind="provider"][data-badge-value="naver"]) {
    --kp-badge-classification-bg: #dcfce7 !important;
    --kp-badge-classification-fg: #087f3d !important;
}

:where(.kp-badge[data-badge-kind="provider"][data-badge-value="kakao"]) {
    --kp-badge-classification-bg: #fef3c7 !important;
    --kp-badge-classification-fg: #3c1e1e !important;
}

:where(.kp-badge[data-badge-kind="provider"][data-badge-value="google"]) {
    --kp-badge-classification-bg: #eff6ff !important;
    --kp-badge-classification-fg: #1d4ed8 !important;
}

:where(.kp-badge[data-badge-kind="provider"][data-badge-value="instagram"]) {
    --kp-badge-classification-bg: #fae8ff !important;
    --kp-badge-classification-fg: #a21caf !important;
}

:where(.kp-badge[data-badge-kind="provider"][data-badge-value="youtube"]) {
    --kp-badge-classification-bg: #fee2e2 !important;
    --kp-badge-classification-fg: #b91c1c !important;
}

:where(.kp-badge[data-badge-kind="provider"][data-badge-value="blog"]) {
    --kp-badge-classification-bg: #dcfce7 !important;
    --kp-badge-classification-fg: #087f3d !important;
}

:where(.kp-badge[data-badge-kind="provider"][data-badge-value="tiktok"]) {
    --kp-badge-classification-bg: #f1f5f9 !important;
    --kp-badge-classification-fg: #111827 !important;
}

:where(.kp-badge[data-badge-kind="role"][data-badge-value="admin"]) {
    --kp-badge-classification-bg: #f1f5f9 !important;
    --kp-badge-classification-fg: #334155 !important;
}

:where(.kp-badge[data-badge-kind="role"][data-badge-value="supplier"]) {
    --kp-badge-classification-bg: #ccfbf1 !important;
    --kp-badge-classification-fg: #115e59 !important;
}

:where(.kp-badge[data-badge-kind="role"][data-badge-value="influencer"]) {
    --kp-badge-classification-bg: #f3e8ff !important;
    --kp-badge-classification-fg: #6b21a8 !important;
}

:where(.kp-badge[data-badge-kind="role"][data-badge-value="customer"]) {
    --kp-badge-classification-bg: #e0e7ff !important;
    --kp-badge-classification-fg: #3730a3 !important;
}

:where(.kp-badge[data-badge-kind="role"][data-badge-value="guest"]) {
    --kp-badge-classification-bg: #f1f5f9 !important;
    --kp-badge-classification-fg: #475569 !important;
}

:where(.kp-badge[data-badge-kind="grade"][data-badge-value="platinum"],
       .kp-badge[data-badge-kind="grade"][data-badge-value="s"]) {
    --kp-badge-classification-bg: #e0e7ff !important;
    --kp-badge-classification-fg: #4338ca !important;
}

:where(.kp-badge[data-badge-kind="grade"][data-badge-value="gold"],
       .kp-badge[data-badge-kind="grade"][data-badge-value="a"]) {
    --kp-badge-classification-bg: #fef3c7 !important;
    --kp-badge-classification-fg: #854d0e !important;
}

:where(.kp-badge[data-badge-kind="grade"][data-badge-value="bronze"],
       .kp-badge[data-badge-kind="grade"][data-badge-value="c"]) {
    --kp-badge-classification-bg: #ffedd5 !important;
    --kp-badge-classification-fg: #9a3412 !important;
}

:where(.kp-badge[data-badge-kind="grade"][data-badge-value="vip"]) {
    --kp-badge-classification-bg: #f3e8ff !important;
    --kp-badge-classification-fg: #6b21a8 !important;
}

:where(.kp-badge[data-badge-kind="grade"][data-badge-value="vvip"]) {
    --kp-badge-classification-bg: #e0e7ff !important;
    --kp-badge-classification-fg: #4338ca !important;
}

:where(.kp-badge[data-badge-kind="grade"][data-badge-value="silver"],
       .kp-badge[data-badge-kind="grade"][data-badge-value="b"]) {
    --kp-badge-classification-bg: #f1f5f9 !important;
    --kp-badge-classification-fg: #475569 !important;
}

:where(.kp-badge[data-badge-kind="grade"][data-badge-value="starter"]) {
    --kp-badge-classification-bg: #f1f5f9 !important;
    --kp-badge-classification-fg: #64748b !important;
}

:where(.kp-badge[data-badge-kind="grade"][data-badge-value="growth"]) {
    --kp-badge-classification-bg: #dcfce7 !important;
    --kp-badge-classification-fg: #15803d !important;
}

:where(.kp-badge[data-badge-kind="grade"][data-badge-value="elite"]) {
    --kp-badge-classification-bg: #fef3c7 !important;
    --kp-badge-classification-fg: #b45309 !important;
}

:where(.kp-badge[data-badge-kind="grade"][data-badge-value="signature"]) {
    --kp-badge-classification-bg: #fce7f3 !important;
    --kp-badge-classification-fg: #be185d !important;
}

:where(.kp-badge[data-badge-kind="counter"]) {
    --kp-badge-border: transparent !important;
    border-radius: 999px !important;
    font-variant-numeric: tabular-nums !important;
}

:where(a.kp-badge[data-badge-kind],
       button.kp-badge[data-badge-kind],
       .kp-badge[data-badge-kind][data-badge-interactive="true"]) {
    min-height: 32px !important;
    padding: 7px 10px !important;
    cursor: pointer !important;
}

:where(a.kp-badge[data-badge-kind],
       button.kp-badge[data-badge-kind],
       .kp-badge[data-badge-kind][data-badge-interactive="true"]):focus-visible {
    outline: 2px solid #1d4ed8 !important;
    outline-offset: 2px !important;
}

/* A badge hidden by application state must remain hidden. */
:where(.kp-badge[data-badge-kind][hidden],
       .kp-badge[data-badge-kind][style*="display: none"],
       .kp-badge[data-badge-kind][style*="display:none"]) {
    display: none !important;
}
}