/* =============================================================================
   BADGE COMPONENT
   ============================================================================= */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    
    /* Motion bindings */
    transition: background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), transform var(--motion-fast);
}

.badge:hover {
    /* Subtle lift for tactile micro-interaction */
    transform: translateY(-1px);
}

.badge--sm { font-size: 12px; padding: 4px 10px; }
.badge--md { font-size: 14px; padding: 6px 14px; }
.badge--uppercase { text-transform: uppercase; letter-spacing: 0.05em; font-size: 11px;}
.badge__icon { font-size: 0.9em; line-height: 1; flex-shrink: 0; }

/* Teal — Primary accents, "Employer Funded" */
.badge--teal {
    background-color: rgba(31, 138, 112, 0.12);
    color: #1A755F; /* Darkened for WCAG */
    border: 1px solid rgba(31, 138, 112, 0.25);
}
.badge--teal:hover {
    background-color: rgba(31, 138, 112, 0.18);
    border-color: rgba(31, 138, 112, 0.35);
}

/* Blue — Trust/Verified, "Ethical Recruitment" */
.badge--blue {
    background-color: rgba(11, 60, 93, 0.1);
    color: #0B3C5D;
    border: 1px solid rgba(11, 60, 93, 0.2);
}
.badge--blue:hover {
    background-color: rgba(11, 60, 93, 0.16);
    border-color: rgba(11, 60, 93, 0.3);
}

/* Success — Positive Green */
.badge--success {
    background-color: rgba(46, 133, 64, 0.12);
    color: #277036; /* Darkened for WCAG */
    border: 1px solid rgba(46, 133, 64, 0.25);
}
.badge--success:hover {
    background-color: rgba(46, 133, 64, 0.18);
    border-color: rgba(46, 133, 64, 0.35);
}

/* Warning — Warning Amber */
.badge--warning {
    background-color: rgba(242, 163, 60, 0.15);
    color: #C2822A; /* Darkened for WCAG */
    border: 1px solid rgba(242, 163, 60, 0.3);
}
.badge--warning:hover {
    background-color: rgba(242, 163, 60, 0.22);
    border-color: rgba(242, 163, 60, 0.4);
}

/* Error — Error Red */
.badge--error {
    background-color: rgba(196, 62, 62, 0.1);
    color: #C43E3E;
    border: 1px solid rgba(196, 62, 62, 0.22);
}
.badge--error:hover {
    background-color: rgba(196, 62, 62, 0.16);
    border-color: rgba(196, 62, 62, 0.3);
}

/* Neutral — Soft Grey */
.badge--neutral {
    background-color: #F5F7FA;
    color: #A0A8B5;
    border: 1px solid #E5E7EB;
}
.badge--neutral:hover {
    background-color: #EAEFF4;
    color: #8A94A6;
    border-color: #D3D8E0;
}