/**
 * T2W Utility Components — badge, form input, skeleton, placeholder
 * Migrated from design-system.css (v8.2 cleanup)
 * Dependencies: variables.css
 */

/* =========================================
   1. Badges & Tags
   ========================================= */
.t2w-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.t2w-badge-gold {
    background: hsla(var(--color-primary-h), 100%, 90%, 1);
    color: hsla(var(--color-primary-h), 100%, 35%, 1);
    border: 1px solid hsla(var(--color-primary-h), 100%, 50%, 0.2);
}

.t2w-badge-glass {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    color: var(--color-secondary);
    box-shadow: var(--shadow-sm);
}

/* =========================================
   2. Form Elements
   ========================================= */
.t2w-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--color-border-light, #E2E8F0);
    border-radius: var(--radius-xl);
    font-family: var(--font-primary);
    font-size: 1rem;
    transition: all 0.2s ease;
    background: var(--color-white, #FFFFFF);
}

.t2w-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px hsla(var(--color-primary-h), 100%, 50%, 0.2);
}

/* =========================================
   3. Skeleton Loading
   ========================================= */
.t2w-skeleton {
    background: linear-gradient(90deg, var(--color-bg-gray, #F3F4F6) 25%, var(--color-border-light, #E5E7EB) 50%, var(--color-bg-gray, #F3F4F6) 75%);
    background-size: 200% 100%;
    animation: t2w-skeleton-shimmer 1.5s infinite;
    border-radius: var(--radius-md, 8px);
}

@keyframes t2w-skeleton-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.t2w-skeleton--card { width: 100%; height: 240px; border-radius: var(--radius-xl, 16px); }
.t2w-skeleton--text { width: 60%; height: 16px; margin-bottom: 8px; }
.t2w-skeleton--title { width: 80%; height: 24px; margin-bottom: 12px; }
.t2w-skeleton--avatar { width: 48px; height: 48px; border-radius: 50%; }

/* =========================================
   4. Image Placeholder (broken/loading)
   ========================================= */
.t2w-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--color-bg-gray, #F3F4F6);
    color: var(--color-text-light, #9CA3AF);
}

.t2w-img-placeholder .material-symbols-outlined {
    font-size: 48px;
}