/* =============================================================================
   FORM LABEL COMPONENT
   Brand: Soft Grey to Trust Blue transition on focus, Alert Red (#C43E3E) Asterisk
   ============================================================================= */

/* Grouping wrapper when helper text is present */
.form-label-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
}

/* Base Label */
.form-field__label {
    display: block;
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-soft-grey); /* Updated to soft-grey per motion spec */
    margin-bottom: 4px; /* Reduced from 8px to keep it tight when helper text is used */
    line-height: 1.4;
    cursor: default;
    
    /* Motion Binding */
    transition: color var(--motion-fast);
}

/* Triggered by parent .form-field state when child input is focused */
.form-field--focused .form-field__label {
    color: var(--color-trust-blue);
}

/* Required asterisk — Brand Error Red */
.form-field__required {
    color: var(--color-error); 
    font-weight: 700;
    margin-left: 2px;
}

/* Helper text (between label and input) */
.form-field__helper {
    display: block;
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: var(--color-soft-grey);
    line-height: 1.5;
    margin-bottom: 4px;
}

/* --- Screen Reader Only Utility ---
   Must be included to hide the "(required)" text visually while
   keeping it accessible to screen readers. 
   (Note: Also present in global.css, kept here for component isolation if needed) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}