/* Shared Badge and Tag Components */

/* Status badges for various states */
.status-badge {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
}

/* Status badge variants */
.status-badge--published,
.status-published {
    background: var(--color-success-100);
    color: var(--color-success-700);
}

.status-badge--draft,
.status-draft {
    background: var(--color-warning-100);
    color: var(--color-warning-700);
}

.status-badge--scheduled,
.status-scheduled {
    background: var(--color-info-100);
    color: var(--color-info-700);
}

.status-badge--review {
    background: var(--color-secondary-100);
    color: var(--color-secondary-700);
}

.status-badge--archived {
    background: var(--color-surface-variant);
    color: var(--color-text-muted);
}

.status-badge--error,
.status-badge--rejected {
    background: var(--color-error-100);
    color: var(--color-error-700);
}

/* Content tags for categorization */
.tag {
    background: var(--color-primary-100);
    color: var(--color-primary-700);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    text-decoration: none;
    display: inline-block;
    font-weight: var(--font-medium);
    transition: var(--transition-all);
}

.tag:hover {
    background: var(--color-primary-200);
    color: var(--color-primary-800);
}

/* Tag color variants */
.tag--secondary {
    background: var(--color-secondary-100);
    color: var(--color-secondary-700);
}

.tag--secondary:hover {
    background: var(--color-secondary-200);
    color: var(--color-secondary-800);
}

.tag--success {
    background: var(--color-success-100);
    color: var(--color-success-700);
}

.tag--success:hover {
    background: var(--color-success-200);
    color: var(--color-success-800);
}

.tag--warning {
    background: var(--color-warning-100);
    color: var(--color-warning-700);
}

.tag--warning:hover {
    background: var(--color-warning-200);
    color: var(--color-warning-800);
}

.tag--error {
    background: var(--color-error-100);
    color: var(--color-error-700);
}

.tag--error:hover {
    background: var(--color-error-200);
    color: var(--color-error-800);
}

.tag--neutral {
    background: var(--color-surface-variant);
    color: var(--color-text-subtle);
    border: 1px solid var(--color-border);
}

.tag--neutral:hover {
    background: var(--color-hover-overlay);
    color: var(--color-text);
}

/* Tag container for groups of tags */
.tags {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.tags--vertical {
    flex-direction: column;
    align-items: flex-start;
}

.tags--center {
    justify-content: center;
}

.tags--right {
    justify-content: flex-end;
}

/* Gallery/item tags with backdrop effect */
.gallery-tag,
.item-tag {
    background: var(--color-primary-100);
    color: var(--color-primary-700);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    backdrop-filter: blur(4px);
    border: 1px solid var(--color-primary-200);
}

/* Priority badges */
.priority-badge {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.priority-badge--low {
    background: var(--color-surface-variant);
    color: var(--color-text-muted);
}

.priority-badge--medium {
    background: var(--color-warning-100);
    color: var(--color-warning-700);
}

.priority-badge--high {
    background: var(--color-error-100);
    color: var(--color-error-700);
}

.priority-badge--critical {
    background: var(--color-error-500);
    color: white;
}

/* User role badges */
.role-badge {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    text-transform: capitalize;
}

.role-badge--admin {
    background: var(--color-error-100);
    color: var(--color-error-700);
}

.role-badge--editor {
    background: var(--color-warning-100);
    color: var(--color-warning-700);
}

.role-badge--author {
    background: var(--color-info-100);
    color: var(--color-info-700);
}

.role-badge--contributor {
    background: var(--color-success-100);
    color: var(--color-success-700);
}

.role-badge--viewer {
    background: var(--color-surface-variant);
    color: var(--color-text-subtle);
}

/* Notification badges (for counts) */
.notification-badge {
    background: var(--color-error-500);
    color: white;
    border-radius: var(--radius-full);
    padding: 2px 6px;
    font-size: 10px;
    font-weight: var(--font-bold);
    min-width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -4px;
    right: -4px;
}

.notification-badge--info {
    background: var(--color-info-500);
}

.notification-badge--success {
    background: var(--color-success-500);
}

.notification-badge--warning {
    background: var(--color-warning-500);
}

/* Badge with icons */
.badge-with-icon {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.badge-icon {
    font-size: 0.75em;
}

/* Large badges for hero sections */
.badge--large {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
}

/* Interactive badges */
.badge--interactive {
    cursor: pointer;
    transition: var(--transition-all);
}

.badge--interactive:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Outline badges */
.badge--outline {
    background: transparent;
    border: 1px solid currentColor;
}

/* Responsive considerations */
@media (max-width: 768px) {
    .tags {
        gap: var(--space-1);
    }
    
    .tag,
    .status-badge {
        font-size: 10px;
        padding: 2px var(--space-1);
    }
}