/**
 * Label Component Styles
 *
 * Form label element with consistent styling and required indicator support.
 * Used with Input and Textarea components for accessible form fields.
 *
 * @package HubTerapeutico
 * @since 1.0.0
 */

/* ============================================
   BASE LABEL STYLES
   ============================================ */

.hub-label {
  /* Display */
  display: block;
  
  /* Spacing */
  margin-bottom: var(--spacing-2);
  
  /* Typography */
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
  color: var(--color-gray-700);
  
  /* Cursor */
  cursor: pointer;
}


/* ============================================
   WEIGHT MODIFIERS
   ============================================ */

.hub-label--normal {
  font-weight: var(--font-weight-normal);
}

.hub-label--medium {
  font-weight: var(--font-weight-medium);
}

.hub-label--semibold {
  font-weight: var(--font-weight-semibold);
}

.hub-label--bold {
  font-weight: var(--font-weight-bold);
}


/* ============================================
   REQUIRED INDICATOR
   ============================================ */

.hub-label__required {
  color: #ef4444;
  margin-left: 2px;
  font-weight: var(--font-weight-bold);
}


/* ============================================
   DISABLED STATE
   ============================================ */

.hub-label--disabled {
  color: var(--color-gray-500);
  cursor: not-allowed;
  opacity: 0.6;
}


/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
  .hub-label {
    font-size: var(--font-size-sm);
  }
}

@media (max-width: 480px) {
  .hub-label {
    font-size: var(--font-size-sm);
    margin-bottom: 6px;
  }
}