.ccl-form-field-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  font-family: var(--typography-font-family-sans);
}

.ccl-form-field-wrapper__label {
  font-size: var(--typography-font-size-sm);
  color: var(--color-text, #333);
  font-weight: var(--typography-font-weight-regular, 400);
  margin-bottom: var(--spacing-xs);
}

.ccl-form-field-wrapper__required {
  color: var(--color-error-500);
  margin-left: var(--spacing-xs);
  font-weight: var(--typography-font-weight-bold, 700);
}

.ccl-form-field-wrapper__input-container {
  position: relative;
}

.ccl-form-field-wrapper__hint {
  font-size: var(--typography-font-size-sm);
  color: var(--color-muted, #666);
  margin-top: var(--spacing-xs);
}

.ccl-form-field-wrapper__error {
  font-size: var(--typography-font-size-sm);
  color: var(--color-error-500);
  margin-top: var(--spacing-xs);
  font-weight: var(--typography-font-weight-regular, 400);
}

/* State variants */
.ccl-form-field-wrapper--disabled .ccl-form-field-wrapper__label,
.ccl-form-field-wrapper--disabled .ccl-form-field-wrapper__hint {
  color: var(--color-muted, #999);
  opacity: 0.7;
}

.ccl-form-field-wrapper--error .ccl-form-field-wrapper__label {
  color: var(--color-error-500);
}

.ccl-form-field-wrapper--success .ccl-form-field-wrapper__label {
  color: var(--color-success-500);
}

.ccl-form-field-wrapper--success .ccl-form-field-wrapper__hint {
  color: var(--color-success-500);
}

/* Focus management */
.ccl-form-field-wrapper:focus-within .ccl-form-field-wrapper__label {
  color: var(--color-primary-500);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .ccl-form-field-wrapper {
    gap: var(--spacing-sm);
  }
  
  .ccl-form-field-wrapper__label {
    font-size: var(--typography-font-size-md);
  }
}